canvasengine 1.3.0 → 2.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/package.json +51 -17
  2. package/src/components/Canvas.ts +134 -0
  3. package/src/components/Container.ts +46 -0
  4. package/src/components/DisplayObject.ts +458 -0
  5. package/src/components/DrawMap/index.ts +65 -0
  6. package/src/components/Graphic.ts +147 -0
  7. package/src/components/NineSliceSprite.ts +46 -0
  8. package/src/components/ParticleEmitter.ts +39 -0
  9. package/src/components/Scene.ts +6 -0
  10. package/src/components/Sprite.ts +493 -0
  11. package/src/components/Text.ts +145 -0
  12. package/src/components/Tilemap/Tile.ts +79 -0
  13. package/src/components/Tilemap/TileGroup.ts +207 -0
  14. package/src/components/Tilemap/TileLayer.ts +163 -0
  15. package/src/components/Tilemap/TileSet.ts +41 -0
  16. package/src/components/Tilemap/index.ts +80 -0
  17. package/src/components/TilingSprite.ts +39 -0
  18. package/src/components/Viewport.ts +159 -0
  19. package/src/components/index.ts +13 -0
  20. package/src/components/types/DisplayObject.ts +69 -0
  21. package/src/components/types/MouseEvent.ts +3 -0
  22. package/src/components/types/Spritesheet.ts +389 -0
  23. package/src/components/types/index.ts +4 -0
  24. package/src/directives/Drag.ts +84 -0
  25. package/src/directives/KeyboardControls.ts +922 -0
  26. package/src/directives/Scheduler.ts +101 -0
  27. package/src/directives/Sound.ts +91 -0
  28. package/src/directives/Transition.ts +45 -0
  29. package/src/directives/ViewportCull.ts +40 -0
  30. package/src/directives/ViewportFollow.ts +26 -0
  31. package/src/directives/index.ts +7 -0
  32. package/src/engine/animation.ts +113 -0
  33. package/src/engine/bootstrap.ts +19 -0
  34. package/src/engine/directive.ts +23 -0
  35. package/src/engine/reactive.ts +379 -0
  36. package/src/engine/signal.ts +138 -0
  37. package/src/engine/trigger.ts +40 -0
  38. package/src/engine/utils.ts +135 -0
  39. package/src/hooks/addContext.ts +6 -0
  40. package/src/hooks/useProps.ts +155 -0
  41. package/src/hooks/useRef.ts +21 -0
  42. package/src/index.ts +13 -0
  43. package/src/utils/Ease.ts +33 -0
  44. package/src/utils/RadialGradient.ts +86 -0
  45. package/.gitattributes +0 -22
  46. package/.npmignore +0 -163
  47. package/canvasengine-1.3.0.all.min.js +0 -21
  48. package/canvasengine.js +0 -5802
  49. package/core/DB.js +0 -24
  50. package/core/ModelServer.js +0 -348
  51. package/core/Users.js +0 -190
  52. package/core/engine-common.js +0 -952
  53. package/doc/cocoonjs.md +0 -36
  54. package/doc/doc-lang.yml +0 -43
  55. package/doc/doc-router.yml +0 -14
  56. package/doc/doc-tuto.yml +0 -9
  57. package/doc/doc.yml +0 -39
  58. package/doc/element.md +0 -37
  59. package/doc/entity.md +0 -90
  60. package/doc/extend.md +0 -47
  61. package/doc/get_started.md +0 -19
  62. package/doc/images/entity.png +0 -0
  63. package/doc/multitouch.md +0 -58
  64. package/doc/nodejs.md +0 -142
  65. package/doc/scene.md +0 -44
  66. package/doc/text.md +0 -156
  67. package/examples/server/client.html +0 -31
  68. package/examples/server/server.js +0 -16
  69. package/examples/tiled_server/client.html +0 -52
  70. package/examples/tiled_server/images/tiles_spritesheet.png +0 -0
  71. package/examples/tiled_server/server/map.json +0 -50
  72. package/examples/tiled_server/server/map.tmx +0 -16
  73. package/examples/tiled_server/server/server.js +0 -16
  74. package/extends/Animation.js +0 -910
  75. package/extends/Effect.js +0 -252
  76. package/extends/Gleed2d.js +0 -252
  77. package/extends/Hit.js +0 -1509
  78. package/extends/Input.js +0 -699
  79. package/extends/Marshal.js +0 -716
  80. package/extends/Scrolling.js +0 -388
  81. package/extends/Soundmanager2.js +0 -5466
  82. package/extends/Spritesheet.js +0 -196
  83. package/extends/Text.js +0 -366
  84. package/extends/Tiled.js +0 -403
  85. package/extends/Window.js +0 -575
  86. package/extends/gamepad.js +0 -397
  87. package/extends/socket.io.min.js +0 -2
  88. package/extends/swf/soundmanager2.swf +0 -0
  89. package/extends/swf/soundmanager2_debug.swf +0 -0
  90. package/extends/swf/soundmanager2_flash9.swf +0 -0
  91. package/extends/swf/soundmanager2_flash9_debug.swf +0 -0
  92. package/extends/swf/soundmanager2_flash_xdomain.zip +0 -0
  93. package/extends/workers/transition.js +0 -43
  94. package/index.js +0 -46
  95. package/license.txt +0 -19
  96. package/readme.md +0 -483
package/doc/text.md DELETED
@@ -1,156 +0,0 @@
1
- # Text and fonts
2
-
3
- ## Conventional use
4
-
5
- The classic way is to use the properties of HTML5 :
6
-
7
- canvas.Scene.New({
8
- name: "MyScene",
9
- ready: function(stage) {
10
- var el = this.createElement();
11
- el.font = '40pt Arial';
12
- el.fillStyle = 'red';
13
- el.fillText('Hello World!', 50, 50);
14
- stage.append(el);
15
- }
16
- });
17
-
18
-
19
- You have :
20
-
21
- * fillText()
22
- * strokeText();
23
-
24
- and several properties :
25
-
26
-
27
-
28
- * fillStyle
29
- * strokeStyle
30
- * font
31
- * textBaseline
32
- * textAlign
33
-
34
- Shadow :
35
-
36
- * shadowColor
37
- * shadowBlur
38
- * shadowOffsetX
39
- * shadowOffsetY
40
-
41
- > Infos : [W3Shools - HTML Canvas Reference](http://www.w3schools.com/tags/ref_canvas.asp)
42
-
43
- > To measure a text:
44
-
45
- > var _canvas = this.getCanvas();
46
- > _canvas.measureText("Hello World", "16px").width;
47
-
48
- > More details : [measureText()](?p=core.canvas.measureText)
49
-
50
- ## Using fonts
51
-
52
- Since version 1.3.0, it is possible to load your own fonts and fonts externs before the opening of the scene
53
-
54
- ### Your own fonts
55
-
56
- ut your are in a file and load it at the beginning of the scene :
57
-
58
- canvas.Scene.new({
59
- name: "MyScene",
60
- materials: {
61
- fonts: {
62
- foo: "bar.ttf"
63
- }
64
- },
65
- ready: function(stage) {
66
- var el = this.createElement();
67
- el.font = '40pt foo';
68
- el.fillStyle = 'red';
69
- el.fillText('Hello World!', 50, 50);
70
- stage.append(el);
71
- }
72
- }
73
-
74
- Note that if you are on IE, CanvasEngine will look the same file but with the extension `.eot`. In our example, it will look `bar.eot`
75
-
76
- ### Fonts externs
77
-
78
- It is possible to embed fonts from :
79
-
80
- * Google Fonts
81
- * Fontdeck
82
- * Fonts.com
83
- * Typekit
84
-
85
- canvas.Scene.new({
86
- name: "MyScene",
87
- materials: {
88
- fonts: {
89
- google: {
90
- families: ['Droid Sans']
91
- }
92
- }
93
- },
94
- ready: function(stage) {
95
- var el = this.createElement();
96
- el.font = '40pt "Droid Sans"';
97
- el.fillStyle = 'red';
98
- el.fillText('Hello World!', 50, 50);
99
- stage.append(el);
100
- }
101
- }
102
-
103
- You can find the values in [​​https://github.com/typekit/webfontloader](​​https://github.com/typekit/webfontloader). It is the `WebFontConfig` object
104
-
105
- ## Using Text class
106
-
107
- CanvasEngine has a class for text and its effects.
108
-
109
- 1. Use this class :
110
-
111
- var canvas = CE.defines("canvas_id").
112
- extend([Animation, Text]).
113
- ready(function() {
114
- canvas.Scene.call("MyScene");
115
- });
116
-
117
- > For effects, the class is independent of the Animation class
118
-
119
- 2. Create an element to insert the text in the `ready` method of the scene :
120
-
121
- var content = this.createElement();
122
-
123
- 3. Instantiate a variable of the `Text` class :
124
-
125
- var text = canvas.Text.New(this, "Nec minus feminae quoque calamitatum participes fuere similium.");
126
-
127
- 4. Set the text style :
128
-
129
- text.style({
130
- size: "18px",
131
- lineWidth: 300,
132
- color: "red"
133
- });
134
-
135
- > `lineWidth` is a property that defines the maximum width of a line. If the text exceeds, a newline occurs
136
-
137
- Other properties : [style()](?p=extends.text.style)
138
-
139
- 5. Indicate that you want to display the text in the element previously created :
140
-
141
- text.draw(content, 20, 20);
142
- stage.append(content);
143
-
144
- For effects, add value to the last parameter :
145
-
146
- text.draw(content, 20, 20, {
147
- line: { // Animation
148
- frames: 50
149
- }
150
- });
151
-
152
- Effect : [draw()](?p=extends.text.draw)
153
-
154
- Example :
155
-
156
- <jsfiddle>WebCreative5/AP6BX</jsfiddle>
package/examples/server/client.html DELETED
@@ -1,31 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <script src="../../canvasengine-1.3.0.all.min.js"></script>
5
- <script src="../../extends/socket.io.min.js"></script>
6
-
7
- <script>
8
- var canvas = CE.defines("canvas").
9
- ready(function() {
10
- canvas.Scene.call("MyScene");
11
- });
12
-
13
- canvas.Scene.new({
14
- name: "MyScene",
15
- events: ["load"],
16
- ready: function(stage) {
17
- CE.connectServer('http://127.0.0.1', 8333);
18
- this.loadEvents();
19
- CE.io.emit("start");
20
- },
21
- load: function(text) {
22
- console.log(text);
23
- }
24
- });
25
-
26
- </script>
27
- </head>
28
- <body>
29
- <canvas id="canvas" width="675px" height="506px"></canvas>
30
- </body>
31
- </html>
package/examples/server/server.js DELETED
@@ -1,16 +0,0 @@
1
- var CE = require("canvasengine").listen(8333);
2
- CE.Model.init("Main", ["start"], {
3
-
4
- initialize: function(socket) {
5
-
6
- },
7
-
8
- start: function() {
9
- CE.Core.io.sockets.emit("MyScene.load", "New User");
10
- },
11
-
12
- disconnect: function() {
13
-
14
- }
15
-
16
- });
package/examples/tiled_server/client.html DELETED
@@ -1,52 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <script src="../../canvasengine-1.3.0.all.min.js"></script>
5
- <script src="../../extends/Tiled.js"></script>
6
- <script src="../../extends/socket.io.min.js"></script>
7
-
8
- <script>
9
-
10
- CE.connectServer('http://127.0.0.1', 8333);
11
-
12
- var canvas = CE.defines("canvas").
13
- extend(Tiled).
14
- ready(function() {
15
- canvas.Scene.call("Scene_Map");
16
- });
17
-
18
- canvas.Scene.New({
19
- name: "Scene_Map",
20
- events: ["load"],
21
- materials: {
22
- images: {
23
- tileset: "images/tiles_spritesheet.png"
24
- }
25
- },
26
- load: function(data) {
27
-
28
- var tiled = canvas.Tiled.New(),
29
- stage = this.getStage(),
30
- _canvas = this.getCanvas(),
31
- map = this.createElement();
32
-
33
- stage.fillRect("#CFE9FE", 0, 0, _canvas.width, _canvas.height);
34
-
35
- tiled.ready(function() {
36
- map.pack(this.getWidthPixel(), this.getHeightPixel());
37
- });
38
-
39
- tiled.load(this, map, data);
40
-
41
- stage.append(map);
42
-
43
- }
44
-
45
- });
46
-
47
- </script>
48
- </head>
49
- <body>
50
- <canvas id="canvas" width="1050" height="700"></canvas>
51
- </body>
52
- </html>
package/examples/tiled_server/server/map.json DELETED
@@ -1,50 +0,0 @@
1
- { "height":10,
2
- "layers":[
3
- {
4
- "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 38, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 130, 0, 0, 0, 0, 0, 0, 0, 0, 0, 130, 0, 0, 0, 0, 142, 0, 4, 0, 0, 0, 0, 0, 0, 37, 142, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
5
- "height":10,
6
- "name":"layer2",
7
- "opacity":1,
8
- "type":"tilelayer",
9
- "visible":true,
10
- "width":15,
11
- "x":0,
12
- "y":0
13
- },
14
- {
15
- "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 57, 57, 57, 57, 22, 0, 44, 44, 44, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 9, 9, 9, 9, 56, 0, 0, 0, 0, 57, 57, 57, 57, 57, 45, 9, 9, 9, 9, 35, 57, 57, 57, 57],
16
- "height":10,
17
- "name":"layer1",
18
- "opacity":1,
19
- "type":"tilelayer",
20
- "visible":true,
21
- "width":15,
22
- "x":0,
23
- "y":0
24
- }],
25
- "orientation":"orthogonal",
26
- "properties":
27
- {
28
-
29
- },
30
- "tileheight":70,
31
- "tilesets":[
32
- {
33
- "firstgid":1,
34
- "image":"..\/client\/tiles_spritesheet.png",
35
- "imageheight":856,
36
- "imagewidth":852,
37
- "margin":0,
38
- "name":"tileset",
39
- "properties":
40
- {
41
-
42
- },
43
- "spacing":1,
44
- "tileheight":70,
45
- "tilewidth":70
46
- }],
47
- "tilewidth":70,
48
- "version":1,
49
- "width":15
50
- }
package/examples/tiled_server/server/map.tmx DELETED
@@ -1,16 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <map version="1.0" orientation="orthogonal" width="15" height="10" tilewidth="70" tileheight="70">
3
- <tileset firstgid="1" name="tileset" tilewidth="70" tileheight="70" spacing="1">
4
- <image source="../client/tiles_spritesheet.png" width="852" height="856"/>
5
- </tileset>
6
- <layer name="layer2" width="15" height="10">
7
- <data encoding="base64" compression="zlib">
8
- eJxjYBhegBGHuBpdXUEb0ESBuj4ozYJHnyqSOlzhSCwAAEfbAnI=
9
- </data>
10
- </layer>
11
- <layer name="layer1" width="15" height="10">
12
- <data encoding="base64" compression="zlib">
13
- eJxjYBgFIGCJhsWg4jpIGBfgRMOkgIHQq4RFrwUWdehhAsK6WPQqY1EHALd+BN4=
14
- </data>
15
- </layer>
16
- </map>
package/examples/tiled_server/server/server.js DELETED
@@ -1,16 +0,0 @@
1
- var CE = require("canvasengine").listen(8333),
2
- Tiled = CE.Core.requireExtend("Tiled").Class,
3
- Class = CE.Class;
4
-
5
- CE.Model.init("Main", {
6
-
7
- initialize: function(socket) {
8
-
9
- var tiled = Class.New("Tiled");
10
- tiled.ready(function(map) {
11
- socket.emit("Scene_Map.load", map);
12
- });
13
- tiled.load("map2.json");
14
-
15
- }
16
- });