canvasengine 1.3.0 → 2.0.0-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.
Files changed (122) hide show
  1. package/.cursorrules +0 -0
  2. package/README.md +71 -0
  3. package/dist/compiler/vite.js +119 -0
  4. package/dist/compiler/vite.js.map +1 -0
  5. package/dist/index.d.ts +846 -0
  6. package/dist/index.js +3340 -0
  7. package/dist/index.js.map +1 -0
  8. package/logo.png +0 -0
  9. package/package.json +88 -18
  10. package/src/compiler/grammar.pegjs +180 -0
  11. package/src/compiler/vite.ts +166 -0
  12. package/src/components/Canvas.ts +134 -0
  13. package/src/components/Container.ts +46 -0
  14. package/src/components/DisplayObject.ts +458 -0
  15. package/src/components/DrawMap/index.ts +65 -0
  16. package/src/components/Graphic.ts +147 -0
  17. package/src/components/NineSliceSprite.ts +46 -0
  18. package/src/components/ParticleEmitter.ts +39 -0
  19. package/src/components/Scene.ts +6 -0
  20. package/src/components/Sprite.ts +493 -0
  21. package/src/components/Text.ts +145 -0
  22. package/src/components/Tilemap/Tile.ts +79 -0
  23. package/src/components/Tilemap/TileGroup.ts +207 -0
  24. package/src/components/Tilemap/TileLayer.ts +163 -0
  25. package/src/components/Tilemap/TileSet.ts +41 -0
  26. package/src/components/Tilemap/index.ts +80 -0
  27. package/src/components/TilingSprite.ts +39 -0
  28. package/src/components/Viewport.ts +159 -0
  29. package/src/components/index.ts +12 -0
  30. package/src/components/types/DisplayObject.ts +68 -0
  31. package/src/components/types/MouseEvent.ts +3 -0
  32. package/src/components/types/Spritesheet.ts +389 -0
  33. package/src/components/types/index.ts +4 -0
  34. package/src/directives/Drag.ts +84 -0
  35. package/src/directives/KeyboardControls.ts +922 -0
  36. package/src/directives/Scheduler.ts +112 -0
  37. package/src/directives/Sound.ts +91 -0
  38. package/src/directives/Transition.ts +45 -0
  39. package/src/directives/ViewportCull.ts +40 -0
  40. package/src/directives/ViewportFollow.ts +26 -0
  41. package/src/directives/index.ts +7 -0
  42. package/src/engine/animation.ts +113 -0
  43. package/src/engine/bootstrap.ts +19 -0
  44. package/src/engine/directive.ts +23 -0
  45. package/src/engine/reactive.ts +379 -0
  46. package/src/engine/signal.ts +138 -0
  47. package/src/engine/trigger.ts +40 -0
  48. package/src/engine/utils.ts +135 -0
  49. package/src/hooks/addContext.ts +6 -0
  50. package/src/hooks/useProps.ts +155 -0
  51. package/src/hooks/useRef.ts +21 -0
  52. package/src/index.ts +14 -0
  53. package/src/presets/Bar.ts +89 -0
  54. package/src/presets/Button.ts +0 -0
  55. package/src/presets/Joystick.ts +286 -0
  56. package/src/presets/NightAmbiant.ts +122 -0
  57. package/src/presets/Particle.ts +53 -0
  58. package/src/utils/Ease.ts +33 -0
  59. package/src/utils/RadialGradient.ts +86 -0
  60. package/starter/assets/logo.png +0 -0
  61. package/starter/components/app.ce +18 -0
  62. package/starter/components/hello.ce +34 -0
  63. package/starter/index.html +21 -0
  64. package/starter/main.ts +4 -0
  65. package/starter/package.json +16 -0
  66. package/starter/vite.config.ts +12 -0
  67. package/tsconfig.json +32 -0
  68. package/tsconfig.node.json +10 -0
  69. package/tsup.config.ts +28 -0
  70. package/vitest.config.ts +12 -0
  71. package/.gitattributes +0 -22
  72. package/.npmignore +0 -163
  73. package/canvasengine-1.3.0.all.min.js +0 -21
  74. package/canvasengine.js +0 -5802
  75. package/core/DB.js +0 -24
  76. package/core/ModelServer.js +0 -348
  77. package/core/Users.js +0 -190
  78. package/core/engine-common.js +0 -952
  79. package/doc/cocoonjs.md +0 -36
  80. package/doc/doc-lang.yml +0 -43
  81. package/doc/doc-router.yml +0 -14
  82. package/doc/doc-tuto.yml +0 -9
  83. package/doc/doc.yml +0 -39
  84. package/doc/element.md +0 -37
  85. package/doc/entity.md +0 -90
  86. package/doc/extend.md +0 -47
  87. package/doc/get_started.md +0 -19
  88. package/doc/images/entity.png +0 -0
  89. package/doc/multitouch.md +0 -58
  90. package/doc/nodejs.md +0 -142
  91. package/doc/scene.md +0 -44
  92. package/doc/text.md +0 -156
  93. package/examples/server/client.html +0 -31
  94. package/examples/server/server.js +0 -16
  95. package/examples/tiled_server/client.html +0 -52
  96. package/examples/tiled_server/images/tiles_spritesheet.png +0 -0
  97. package/examples/tiled_server/server/map.json +0 -50
  98. package/examples/tiled_server/server/map.tmx +0 -16
  99. package/examples/tiled_server/server/server.js +0 -16
  100. package/extends/Animation.js +0 -910
  101. package/extends/Effect.js +0 -252
  102. package/extends/Gleed2d.js +0 -252
  103. package/extends/Hit.js +0 -1509
  104. package/extends/Input.js +0 -699
  105. package/extends/Marshal.js +0 -716
  106. package/extends/Scrolling.js +0 -388
  107. package/extends/Soundmanager2.js +0 -5466
  108. package/extends/Spritesheet.js +0 -196
  109. package/extends/Text.js +0 -366
  110. package/extends/Tiled.js +0 -403
  111. package/extends/Window.js +0 -575
  112. package/extends/gamepad.js +0 -397
  113. package/extends/socket.io.min.js +0 -2
  114. package/extends/swf/soundmanager2.swf +0 -0
  115. package/extends/swf/soundmanager2_debug.swf +0 -0
  116. package/extends/swf/soundmanager2_flash9.swf +0 -0
  117. package/extends/swf/soundmanager2_flash9_debug.swf +0 -0
  118. package/extends/swf/soundmanager2_flash_xdomain.zip +0 -0
  119. package/extends/workers/transition.js +0 -43
  120. package/index.js +0 -46
  121. package/license.txt +0 -19
  122. 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
- });