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/extends/Effect.js DELETED
@@ -1,252 +0,0 @@
1
- /*
2
- Copyright (C) 2013 by Samuel Ronce
3
-
4
- Permission is hereby granted, free of charge, to any person obtaining a copy
5
- of this software and associated documentation files (the "Software"), to deal
6
- in the Software without restriction, including without limitation the rights
7
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8
- copies of the Software, and to permit persons to whom the Software is
9
- furnished to do so, subject to the following conditions:
10
-
11
- The above copyright notice and this permission notice shall be included in
12
- all copies or substantial portions of the Software.
13
-
14
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20
- THE SOFTWARE.
21
- */
22
-
23
- Class.create("Effect", {
24
- scene: null,
25
- el: null,
26
- canvas: null,
27
- initialize: function(scene, el) {
28
- this.scene = scene;
29
- this.el = el;
30
- this.canvas = this.scene.getCanvas();
31
- if (!Global_CE.Timeline) {
32
- throw "Add Timeline class to use effects";
33
- }
34
- return this;
35
- },
36
-
37
- /**
38
- @doc effect/
39
- @method screenFlash Perform a flash on the screen
40
- @param {String} color Hexadecimal color value. Example : ff0000 for red
41
- @param {Integer} speed Speed of the flash.
42
- @param {Function} callback (optional) Callback when the flash is completed
43
- */
44
- screenFlash: function(color, speed, callback) {
45
- var flash = this.scene.createElement(),
46
- canvas = this.scene.getCanvas();
47
-
48
- flash.fillStyle = color;
49
- flash.fillRect(0, 0, canvas.width, canvas.height);
50
- flash.opacity = .8;
51
-
52
- this.scene.getStage().append(flash);
53
-
54
- flash.zIndex(-1);
55
-
56
- var timeline = Global_CE.Timeline['new'](flash);
57
- timeline.to({opacity: "0"}, speed).call(function() {
58
- flash.remove();
59
- if (callback) callback();
60
- });
61
-
62
- },
63
-
64
- /**
65
- @doc effect/
66
- @method blink Blink element on a period with a specified frequency
67
- @param {Integer} duration Duration in frames
68
- @param {Integer} frequence Blinking frequency (the higher the frequency is High, more the blinking is low)
69
- @param {Function} callback (optional) Callback when the blink is completed
70
- */
71
- blink: function(duration, frequence, callback) {
72
-
73
- var current_freq = 0;
74
-
75
- var render = function() {
76
-
77
- duration--;
78
-
79
- current_freq++;
80
-
81
- if (current_freq >= frequence) {
82
- current_freq = 0;
83
- this.toggle();
84
- }
85
-
86
- if (duration <= 0) {
87
-
88
- this.off("canvas:render", render);
89
- this.show();
90
- if (callback) callback();
91
- }
92
- };
93
-
94
- this.el.on("canvas:render", render);
95
-
96
- },
97
-
98
- /**
99
- @doc effect/
100
- @method shake Shakes the screen
101
- @param {Integer} power Intensity of the shake. The higher the value, the greater the shaking is strong
102
- @param {Integer} speed Speed of the shake.
103
- @param {Integer} duration Duration of shake in frame
104
- @param {String} axis (optional) The axis where there will shake : "x", "y" or "xy". "x" by default
105
- @param {Function} callback (optional) Callback when the shake is completed
106
- @example
107
-
108
- canvas.Scene.new({
109
- name: "MyScene",
110
-
111
- materials: {
112
- images: {
113
- "img": "images/foo.png"
114
- }
115
- },
116
-
117
- ready: function(stage) {
118
- var el = this.createElement();
119
- el.drawImage("img");
120
-
121
- stage.append(el);
122
-
123
- var effect = canvas.Effect.new(this, el);
124
- effect.shake(3, 5, 24);
125
- }
126
- });
127
-
128
- Other example :
129
-
130
- effect.shake(3, 5, 24, "xy");
131
-
132
- or :
133
-
134
- effect.shake(3, 5, 24, "xy", function() { // You can omit the parameter "axis" if you do a shake on the X axis
135
- alert("finish");
136
- });
137
- */
138
- shake: function(power, speed, duration, axis, callback) {
139
-
140
- if (typeof axis == "function") {
141
- callback = axis;
142
- axis = false;
143
- }
144
-
145
- var current = 0, direction = 1;
146
- axis = axis || "x";
147
-
148
- var render = function() {
149
-
150
- var delta = (power * speed * direction) / 10.0;
151
- if (duration <= 1 && current * (current + delta) < 0) {
152
- current = 0;
153
- }
154
- else {
155
- current += delta;
156
- }
157
- if (current > power * 2) {
158
- direction = -1;
159
- }
160
- if (current < -power * 2) {
161
- direction = 1;
162
- }
163
- if (duration >= 1) {
164
- duration -= 1;
165
- }
166
- if (/x/.test(axis)) {
167
- this.x = current;
168
- }
169
- if (/y/.test(axis)) {
170
- this.y = current;
171
- }
172
- if (duration == 0) {
173
- this.off("canvas:render", render);
174
- if (callback) callback();
175
- }
176
-
177
- console.log(delta);
178
-
179
- };
180
-
181
- this.el.on("canvas:render", render);
182
-
183
- },
184
-
185
- /**
186
- @doc effect/
187
- @method changeScreenColorTone Change the tone of the screen
188
- @param {String} color Hexadecimal color value. Example : 000000 for black. You can put "reset" to reset the tone of the screen :
189
-
190
- var effect = canvas.Effect.new(this, el);
191
- effect.changeScreenColorTone("reset");
192
-
193
- @param {Integer} speed Speed of the tone color.
194
- @param {String} composite lighter|darker Darken or lighten the screen
195
- @param {Integer} opacity Change the tone to the opacity assigned. Value between 0 and 1
196
- @param {Function} callback (optional) Callback when the tone color is completed
197
- */
198
- changeScreenColorTone: function(color, speed, composite, opacity, callback) {
199
-
200
- var exist_tone = false;
201
-
202
- if (this.tone) {
203
- this.tone.remove();
204
- delete this.tone;
205
- exist_tone = true;
206
- if (color == 'reset') return;
207
- }
208
-
209
- this.tone = this.scene.createElement(),
210
- canvas = this.scene.getCanvas();
211
-
212
- this.tone.fillStyle = color;
213
- this.tone.fillRect(0, 0, canvas.width, canvas.height);
214
-
215
- this.tone.opacity = 0;
216
- this.tone.globalCompositeOperation = composite;
217
-
218
- this.scene.getStage().append(this.tone);
219
-
220
- this.tone.zIndex(-1);
221
-
222
- if (!exist_tone) {
223
- this.tone.opacity = 0;
224
- if (speed > 0) {
225
- Global_CE.Timeline['new'](this.tone).to({opacity: opacity}, speed).call(callback);
226
- }
227
- else {
228
- this.tone.opacity = opacity;
229
- }
230
- }
231
- }
232
-
233
- });
234
-
235
- /**
236
- @doc effect
237
- @class Effect Performs effects on the screen or an element
238
- @example
239
-
240
- <jsfiddle>WebCreative5/FmuvM</jsfiddle>
241
-
242
- */
243
- var Effect = {
244
- Effect: {
245
- New: function() { return this["new"].apply(this, arguments); },
246
- "new": function(scene, el) {
247
- return Class["new"]("Effect", [scene, el]);
248
- }
249
- }
250
- };
251
-
252
-
@@ -1,252 +0,0 @@
1
- /*
2
- Copyright (C) 2012 by Samuel Ronce
3
-
4
- Permission is hereby granted, free of charge, to any person obtaining a copy
5
- of this software and associated documentation files (the "Software"), to deal
6
- in the Software without restriction, including without limitation the rights
7
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8
- copies of the Software, and to permit persons to whom the Software is
9
- furnished to do so, subject to the following conditions:
10
-
11
- The above copyright notice and this permission notice shall be included in
12
- all copies or substantial portions of the Software.
13
-
14
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20
- THE SOFTWARE.
21
- */
22
-
23
- Class.create("Gleed2d", {
24
- _onReady: null,
25
- _layers: {},
26
- initialize: function() {
27
-
28
- },
29
- /**
30
- @doc gleed2d/
31
- @method load Load an XML file and builds layers of the elements. Calls the method "ready" of this clas after the construction of the elements.
32
- @param {CanvasEngine.Scene} scene Scene
33
- @param {CanvasEngine.Element} el Layers are displayed on this element
34
- @param {String} url Path to the XML file Gleed2d (without extension)
35
- */
36
- load: function(scene, el, url) {
37
- var self = this;
38
- this.el = el;
39
- this.url = url;
40
- this.scene = scene;
41
- CanvasEngine.ajax({
42
- url: url + ".xml",
43
- dataType: "xml",
44
- success: function(data) {
45
- self._draw(data);
46
- }
47
- });
48
- },
49
- /**
50
- @doc gleed2d/
51
- @method change Allows you to change the parameters of an element in the construction layers
52
- @param {Function} callback Callback function called before the introduction of an element. Returns the same object with different values ??to change the element. Two parameters :
53
-
54
- * {CanvasEngine.Element} The element is created and ready to be displayed on the layer
55
- * {Object} the parameters of the element :
56
-
57
- {
58
- id: {String} (filename),
59
- regX: {Integer},
60
- regY: {Integer},
61
- x: {Integer},
62
- y: {Integer},
63
- rotate: {Integer},
64
- scaleX: {Float},
65
- scaleY: {Float}
66
- }
67
-
68
- @example
69
- In the method "ready" of current scene :
70
-
71
- var gleed = canvas.Gleed2d.new();
72
- gleed.ready(function() {
73
-
74
- });
75
- gleed.change(function(el, params) {
76
- console.log(params.x, params.y); // Change Position X and Position Y
77
- return {
78
- x: params.x + 5 // Change the position x of the element.
79
- };
80
- });
81
- gleed.load(this, element, "data");
82
-
83
-
84
- Dividing the image of the element :
85
-
86
- var gleed = canvas.Gleed2d.new();
87
- gleed.ready(function() {
88
-
89
- });
90
- gleed.change(function(el, params) {
91
- return {
92
- img: [0, 0, 42, 42, 0, 0, 42, 42] // == drawImage(image, 0, 0, 42, 42, 0, 0, 42, 42);
93
- };
94
- });
95
- gleed.load(this, element, "data");
96
-
97
-
98
- Not allow drawing on the element
99
-
100
- var gleed = canvas.Gleed2d.new();
101
- gleed.ready(function() {
102
-
103
- });
104
- gleed.change(function(el, params) {
105
- el.drawImage("other_img");
106
- return {
107
- draw: false
108
- };
109
- });
110
- gleed.load(this, element, "data");
111
-
112
- */
113
- change: function(callback) {
114
- this._set = callback;
115
- },
116
- /**
117
- @doc gleed2d/
118
- @method ready Calls the callback function at the end of the construction elements (loading and layers)
119
- @param {Function} callback Callback function. "this" refers to the class Gleed2d
120
- */
121
- ready: function(callback) {
122
- this._onReady = callback;
123
- },
124
- _draw: function(data) {
125
- var scene = this.scene, match;
126
- var layers = data.getElementsByTagName('Layer');
127
- this.map = scene.createElement();
128
-
129
- function getValue(item, type, attr) {
130
- var node = item.getElementsByTagName(type)[0];
131
- if (attr) {
132
- node = node.getElementsByTagName(attr)[0];
133
- }
134
- return node.childNodes[0].nodeValue;
135
- }
136
-
137
- for (var i=0 ; i < layers.length ; i++) {
138
- var items = layers[i].getElementsByTagName('Item');
139
- var name = layers[i].getAttribute('Name');
140
- var el = scene.createElement();
141
- for (var j=0 ; j < items.length ; j++) {
142
- var item = items[j];
143
- var asset = getValue(item, "asset_name");
144
- if (match = asset.match(/\\([^\\]+$)/)) {
145
- asset = match[1];
146
- }
147
- var origin_x = getValue(item, "Origin", "X"),
148
- origin_y = getValue(item, "Origin", "Y");
149
- var el_item = scene.createElement();
150
- var params = {
151
- id: asset,
152
- draw: true,
153
- img: [],
154
- regX: origin_x,
155
- regY: origin_y,
156
- x: getValue(item, "Position", "X") - origin_x,
157
- y: getValue(item, "Position", "Y") - origin_y,
158
- rotate: getValue(item, "Rotation"),
159
- scaleX: getValue(item, "Scale", "X"),
160
- scaleY: getValue(item, "Scale", "Y")
161
- };
162
- if (this._set) {
163
- var ret = this._set.call(this, el_item, params);
164
- if (ret) {
165
- for (var p in ret) {
166
- params[p] = ret[p];
167
- }
168
- }
169
- }
170
- if (params.draw) {
171
- el_item.drawImage(params.id, params.img[0], params.img[1], params.img[2], params.img[3], params.img[4], params.img[5], params.img[6], params.img[7]);
172
- }
173
- el_item.setOriginPoint(params.regX, params.regY);
174
- el_item.x = params.x;
175
- el_item.y = params.y;
176
- el_item.rotateTo(params.rotate + "rad");
177
- el_item.scaleX = params.scaleX;
178
- el_item.scaleY = params.scaleY;
179
- el.append(el_item);
180
- }
181
- this._layers[name] = el;
182
- this.map.append(el);
183
- }
184
- this.el.append(this.map);
185
- if (this._onReady) this._onReady.call(this);
186
- },
187
- /**
188
- @doc gleed2d/
189
- @method getLayer Retrieve a layer according to its name
190
- @param {String} name Layer name
191
- @return CanvasEngine.Element
192
- */
193
- getLayer: function(name) {
194
- return this._layers[name];
195
- }
196
- });
197
-
198
-
199
- /**
200
- @doc gleed2d
201
- @class Gleed2d GLEED2D (Generic LEvel EDitor 2D) is a general purpose, non tile-based Level Editor for 2D games of any genre that allows arbitrary placement of textures and other items in 2D space. Levels are saved in XML format. Custom Properties can be added to the items in order to represent game-specific data/events/associations between items etc.
202
-
203
- http://gleed2d.codeplex.com
204
-
205
- This class reads the XML file generated by Gleed2d to insert into CanvasEngine
206
- @example
207
-
208
- var canvas = CE.defines("canvas_id").
209
- extend(Gleed2d).
210
- ready(function() {
211
- canvas.Scene.call("MyScene");
212
- });
213
-
214
- canvas.Scene.new({
215
- name: "MyScene",
216
- materials: {
217
- images: {
218
- img1_id: "path/to/img1.png",
219
- img2_id: "path/to/img2.png"
220
- }
221
- },
222
- ready: function(stage) {
223
- var self = this;
224
- this.layer = null;
225
- this.element = this.createElement();
226
-
227
- // -- Gleed2d Level
228
- var gleed = canvas.Gleed2d.new();
229
- gleed.ready(function() {
230
- self.layer = this.getLayer("background");
231
- });
232
- gleed.load(this, element, "data");
233
- // --
234
-
235
- stage.append(this.element);
236
- },
237
- render: function(stage) {
238
- this.layer.x -= 2;
239
- stage.refresh();
240
- }
241
- });
242
-
243
-
244
- */
245
- var Gleed2d = {
246
- Gleed2d: {
247
- New: function() { return this["new"].apply(this, arguments); },
248
- "new": function() {
249
- return Class["new"]("Gleed2d");
250
- }
251
- }
252
- };