canvasengine 1.3.0 → 2.0.1-beta.1
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.
- package/.cursorrules +0 -0
- package/.github/workflows/ci.yml +29 -0
- package/README.md +79 -0
- package/dist/compiler/vite.js +119 -0
- package/dist/compiler/vite.js.map +1 -0
- package/dist/index.d.ts +846 -0
- package/dist/index.js +3340 -0
- package/dist/index.js.map +1 -0
- package/index.d.ts +6 -0
- package/logo.png +0 -0
- package/package.json +84 -18
- package/src/compiler/grammar.pegjs +180 -0
- package/src/compiler/vite.ts +166 -0
- package/src/components/Canvas.ts +134 -0
- package/src/components/Container.ts +46 -0
- package/src/components/DisplayObject.ts +458 -0
- package/src/components/DrawMap/index.ts +65 -0
- package/src/components/Graphic.ts +147 -0
- package/src/components/NineSliceSprite.ts +46 -0
- package/src/components/ParticleEmitter.ts +39 -0
- package/src/components/Scene.ts +6 -0
- package/src/components/Sprite.ts +493 -0
- package/src/components/Text.ts +145 -0
- package/src/components/Tilemap/Tile.ts +79 -0
- package/src/components/Tilemap/TileGroup.ts +207 -0
- package/src/components/Tilemap/TileLayer.ts +163 -0
- package/src/components/Tilemap/TileSet.ts +41 -0
- package/src/components/Tilemap/index.ts +80 -0
- package/src/components/TilingSprite.ts +39 -0
- package/src/components/Viewport.ts +159 -0
- package/src/components/index.ts +12 -0
- package/src/components/types/DisplayObject.ts +68 -0
- package/src/components/types/MouseEvent.ts +3 -0
- package/src/components/types/Spritesheet.ts +389 -0
- package/src/components/types/index.ts +4 -0
- package/src/directives/Drag.ts +84 -0
- package/src/directives/KeyboardControls.ts +922 -0
- package/src/directives/Scheduler.ts +112 -0
- package/src/directives/Sound.ts +91 -0
- package/src/directives/Transition.ts +45 -0
- package/src/directives/ViewportCull.ts +40 -0
- package/src/directives/ViewportFollow.ts +26 -0
- package/src/directives/index.ts +7 -0
- package/src/engine/animation.ts +113 -0
- package/src/engine/bootstrap.ts +19 -0
- package/src/engine/directive.ts +23 -0
- package/src/engine/reactive.ts +379 -0
- package/src/engine/signal.ts +138 -0
- package/src/engine/trigger.ts +40 -0
- package/src/engine/utils.ts +135 -0
- package/src/hooks/addContext.ts +6 -0
- package/src/hooks/useProps.ts +155 -0
- package/src/hooks/useRef.ts +21 -0
- package/src/index.ts +14 -0
- package/src/presets/Bar.ts +89 -0
- package/src/presets/Button.ts +0 -0
- package/src/presets/Joystick.ts +286 -0
- package/src/presets/NightAmbiant.ts +122 -0
- package/src/presets/Particle.ts +53 -0
- package/src/utils/Ease.ts +33 -0
- package/src/utils/RadialGradient.ts +86 -0
- package/starter/assets/logo.png +0 -0
- package/starter/components/app.ce +18 -0
- package/starter/components/hello.ce +35 -0
- package/starter/index.html +21 -0
- package/starter/main.ts +6 -0
- package/starter/package.json +20 -0
- package/starter/tsconfig.json +32 -0
- package/starter/vite.config.ts +12 -0
- package/tsconfig.json +32 -0
- package/tsconfig.node.json +10 -0
- package/tsup.config.ts +28 -0
- package/vitest.config.ts +12 -0
- package/.gitattributes +0 -22
- package/.npmignore +0 -163
- package/canvasengine-1.3.0.all.min.js +0 -21
- package/canvasengine.js +0 -5802
- package/core/DB.js +0 -24
- package/core/ModelServer.js +0 -348
- package/core/Users.js +0 -190
- package/core/engine-common.js +0 -952
- package/doc/cocoonjs.md +0 -36
- package/doc/doc-lang.yml +0 -43
- package/doc/doc-router.yml +0 -14
- package/doc/doc-tuto.yml +0 -9
- package/doc/doc.yml +0 -39
- package/doc/element.md +0 -37
- package/doc/entity.md +0 -90
- package/doc/extend.md +0 -47
- package/doc/get_started.md +0 -19
- package/doc/images/entity.png +0 -0
- package/doc/multitouch.md +0 -58
- package/doc/nodejs.md +0 -142
- package/doc/scene.md +0 -44
- package/doc/text.md +0 -156
- package/examples/server/client.html +0 -31
- package/examples/server/server.js +0 -16
- package/examples/tiled_server/client.html +0 -52
- package/examples/tiled_server/images/tiles_spritesheet.png +0 -0
- package/examples/tiled_server/server/map.json +0 -50
- package/examples/tiled_server/server/map.tmx +0 -16
- package/examples/tiled_server/server/server.js +0 -16
- package/extends/Animation.js +0 -910
- package/extends/Effect.js +0 -252
- package/extends/Gleed2d.js +0 -252
- package/extends/Hit.js +0 -1509
- package/extends/Input.js +0 -699
- package/extends/Marshal.js +0 -716
- package/extends/Scrolling.js +0 -388
- package/extends/Soundmanager2.js +0 -5466
- package/extends/Spritesheet.js +0 -196
- package/extends/Text.js +0 -366
- package/extends/Tiled.js +0 -403
- package/extends/Window.js +0 -575
- package/extends/gamepad.js +0 -397
- package/extends/socket.io.min.js +0 -2
- package/extends/swf/soundmanager2.swf +0 -0
- package/extends/swf/soundmanager2_debug.swf +0 -0
- package/extends/swf/soundmanager2_flash9.swf +0 -0
- package/extends/swf/soundmanager2_flash9_debug.swf +0 -0
- package/extends/swf/soundmanager2_flash_xdomain.zip +0 -0
- package/extends/workers/transition.js +0 -43
- package/index.js +0 -46
- package/license.txt +0 -19
- 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
|
-
|
package/extends/Gleed2d.js
DELETED
|
@@ -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
|
-
};
|