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