npm - canvasengine - Versions diffs - 1.3.0 → 2.0.0-beta.2 - Mend

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

package/package.json +51 -17
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 +13 -0
package/src/components/types/DisplayObject.ts +69 -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 +101 -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 +13 -0
package/src/utils/Ease.ts +33 -0
package/src/utils/RadialGradient.ts +86 -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/doc/cocoonjs.md DELETED Viewed

@@ -1,36 +0,0 @@
-# Export natively game on iOS and Android
-CocoonJS technology allows you to export your game natively on iOS and Android and accelerate the performance of HTML5 Canvas
-You explanations on the following link : [Documentation](http://wiki.ludei.com/).
-## Use with Canvas Engine
-Create a file `index.html` including the lastest version of Canvas Engine :
-    <!DOCTYPE html>
-	<script src="js/canvasengine-X.Y.Z.all.min.js"></script>
-	<script src="js/main.js"></script>
-* The main code of your game is in `main.js`
-* It is normal not to have the `canvas` tag in HTML
-During initialization of the canvas (in `main.js`), use the property `cocoonjs` and specify the width and height:
-    var canvas = CE.defines("canvas_id", {
-                    cocoonjs: {width: 640, height: 480}
-                }).
-                ready(function() {
-                     // start game
-                });
-## Start using CocoonJS
-The best way to start using CocoonJS is by following these easy steps:
-1. Download the CocoonJS Launcher App to your device (iOS or Android). Read how to install and use it for each platform.
-2. [Register as a CocoonJS developer](http://cocoonjsservice.ludei.com/cocoonjslaunchersvr/). It is a very simple process and you will get a registration code that will grant you access to the launcher and the cloud compilation system as well.
-3. Try your application in the CocoonJS Launcher App to see how it runs. Check if CocoonJS supports all your code, and check the messages in our debug console. You can either ZIP you application and upload it to the launcher or access the same ZIP file through a URL to a web service. The CocoonJS Launcher App also allows you to access your application directly from a remote URL, so you can also specify the URL to the folder where your code is or to the common index.html file. Check the CocoonJS Launcher App tutorial for more information.
-4. Once you see that your application runs correctly in the CocoonJS Launcher App, go to our Cloud Compilation System to get the final files that you will be able to upload to the markets.
-> Source : [Documentation](http://wiki.ludei.com/)

package/doc/doc-lang.yml DELETED Viewed

@@ -1,43 +0,0 @@
-engine: Engine
-core: Core
-editor: Editors
-element: Element
-canvas: Canvas
-scene: Scene
-server: Server
-traversing: Traversing
-draw: Draw
-manipulate: Manipulate
-events: Events
-materials: Materials
-sound: Sound
-extends: Extends
-utilities: Utilities
-class: Class
-ajax: Ajax
-animation: Animation
-spritesheet: SpriteSheet
-timeline: Timeline
-scrolling: Scrolling
-save: Save/Load
-input: Input
-collision: Collision
-box: Window
-text: Text
-effect: Effect
-hit: Entity
-entity: Entity Model
-grid: Grid
-keyboard: Keyboard
-gamepad: Gamepad
-accelerometer: Accelerometer
-window: Dialog Box
-cursor: Cursor
-tiled: Tiled Map Editor
-gleed2d: Gleed2D

package/doc/doc-router.yml DELETED Viewed

@@ -1,14 +0,0 @@
-- canvasengine.js
-- core/engine-common.js
-- core/ModelServer.js
-- extends/Animation.js
-- extends/Gleed2d.js
-- extends/Input.js
-- extends/Marshal.js
-- extends/Scrolling.js
-- extends/Spritesheet.js
-- extends/Tiled.js
-- extends/Hit.js
-- extends/Window.js
-- extends/Text.js
-- extends/Effect.js

package/doc/doc-tuto.yml DELETED Viewed

@@ -1,9 +0,0 @@
-- get_started: Get Started
-- scene: Create Scene
-- element: Create Element
-- extend: Extend Features
-- entity: Collision and Entities
-- text: Text and fonts
-- multitouch: MultiTouch with Hammer.js
-- nodejs: Multiplayer Model
-- cocoonjs: Export natively

package/doc/doc.yml DELETED Viewed

@@ -1,39 +0,0 @@
-core:
-    class:
-    engine:
-    server:
-    scene:
-    canvas:
-    element:
-     traversing:
-     draw:
-     manipulate:
-     events:
-    materials:
-    sound:
-    ajax:
-    utilities:
-extends:
-   animation:
-   timeline:
-   spritesheet:
-   scrolling:
-   collision:
-    hit:
-    entity:
-    grid:
-   save:
-   input:
-    keyboard:
-    gamepad:
-    accelerometer:
-   box:
-    window:
-    cursor:
-   text:
-   effect:
-editor:
-   tiled:
-   gleed2d:

package/doc/element.md DELETED Viewed

@@ -1,37 +0,0 @@
-# Create an element
-Elements are created in the scene :
-    var canvas = CE.defines("canvas_id").
-	ready(function() {
-		canvas.Scene.call("MyScene");
-	});
-    canvas.Scene.new({
-	  name: "MyScene", // Obligatory
-	  materials: {
-		images: {
-			img_id: "path/to/img.png"
-		}
-	  },
-	  ready: function(stage) {
-		 this.element = this.createElement();
-		 this.element.drawImage("img_id");
-		 stage.append(this.element);
-	  },
-	  render: function(stage) {
-		 this.element.x += 1;
-		 stage.refresh();
-	  }
-    });
-In the `ready` method :
-1. We create an element with the `createElement` method of this scene
-2. `drawImage` method displays an image in the element. We assign the identifier of preloaded image of the `materials` property
-3. We add to the `append` method in the main element
-In the `render` method :
-1. We manipulate the element (here, we move it `x`)
-2. We refresh the main element (`stage`) with the `refresh` method

package/doc/entity.md DELETED Viewed

@@ -1,90 +0,0 @@
-# Collision and Entities
-You must distinguish between entity and element but if the concept is very similar.
-* Element for the visual.
-* An entity is only used to calculate the positions or collisions in the background
-![](images/entity.png)
-1. The entity called model to know the positions or collisions
-2. Model returns the data
-3. The entity displays the element based on the data model
-## Code ##
-First, initialize
-    var canvas = CE.defines("canvas_id").
-        extend(Hit).
-        ready(function() {
-            canvas.Scene.call("MyScene");
-        });
-Create the scene :
-    canvas.Scene.new({
-      name: "MyScene",
-      ready: function(stage) {
-    	 function addEntities(x, y) {
-    		var entity = Class.New("Entity", [stage]);
-    		entity.rect(100); // square
-    		entity.position(x, y);
-    		entity.el.fillStyle = "red";
-    		entity.el.fillRect(0, 0, 100, 100);
-    		stage.append(entity.el);
-    		return entity;
-    	 }
-    	 this.entityA = addEntities(0, 10);
-    	 this.entityB = addEntities(300, 10);
-      },
-      render: function(stage) {
-    	this.entityA.move(5); // x += 5;
-    	this.entityA.hit([this.entityB], function(state, el) {
-            if (state == "over") {
-    		  el.fillStyle = "green";
-    		  el.fillRect(0, 0, 100, 100);
-            }
-    	});
-    	stage.refresh();
-      }
-    });
-1. Create an entity (#1 on the diagram)
-        Class.New("Entity", [stage]);
-2. Assign it a polygon (here, a square 100px)
-        entity.rect(100);
-3. Assign him his position
-        entity.position(x, y);
-4. Change its appearance (element) and place it on the stage
-        entity.el.fillStyle = "red";
-        entity.el.fillRect(0, 0, 100, 100);
-        stage.append(entity.el);
-In the `render` method :
-1. Moving entity 5px in the right
-        this.entityA.move(5);
-2. Test the collision between two entities.
-       this.entityA.hit([this.entityB], function(state, el) {
-            if (state == "over") {
-    		  el.fillStyle = "green";
-    		  el.fillRect(0, 0, 100, 100);
-            }
-    	});
-> You also have to test `out` if the entity is no longer in collision

package/doc/extend.md DELETED Viewed

@@ -1,47 +0,0 @@
-# Extend Canvas Engine
-Canvas Engine can be extended to have more features :
-    var canvas = CE.defines("canvas_id").
-	    extend(Input).
-		ready(function() {
-			canvas.Scene.call("MyScene");
-		});
-	canvas.Scene.new({
-	  name: "MyScene", // Obligatory
-	  ready: function(stage) {
-		 canvas.Input.keyDown(Input.A, function(e) {
-			console.log("A is pressed");
-		 });
-	  },
-	  render: function(stage) {
-		 stage.refresh();
-	  }
-    });
-1. Use the `extend` method to add class. If multiple, create a chain :
-	    var canvas = CE.defines("canvas_id").
-	      extend(Input).
-	      extend(Animation).
-		  ready(function() {
-		  });
-2. If the class is not static, use the initialized variable (`canvas` here) and the name of the class then
-3. In the menu of this documentation, click functionality extended to read more details on its use
----
-> Note: For editors, add the JS file, presents in the folder `extends`, in your page
-     <script src="extends/Tiled.js"></script>
-     <script>
-	   var canvas = CE.defines("canvas_id").
-	    extend(Tiled).
-		ready(function() {
-		});
-     </script>

package/doc/get_started.md DELETED Viewed

@@ -1,19 +0,0 @@
-# Get Started
-Follow the steps below to start:
-1. Download the code `canvasengine-X.Y.Z.all.min.js` on Github or this website
-2. Add this code in your page :
-		<!DOCTYPE html>
-		<script src="canvasengine-X.Y.Z.all.min.js"></script>
-		<canvas id="canvas_id" width="640" height="480"></canvas>
-3. Initialize the canvas in your JS file :
-        var canvas = CE.defines("canvas_id").ready(function() {
-        });
-Method `ready` is called when the canvas is ready (DOM loaded)

package/doc/images/entity.png DELETED Viewed

Binary file

package/doc/multitouch.md DELETED Viewed

@@ -1,58 +0,0 @@
-# MultiTouch with Hammer.js #
-HammerJS is a javascript library for multi-touch gestures : http://eightmedia.github.com/hammer.js
-It has been implemented in CanvasEngine for a greater experience of touchpads and smartphones
-The use is very simple, you must use the method `on` an element
-    var el = this.createElement();
-    el.fillStyle = "red";
-    el.fillRect(0, 0, 100, 100);
-    el.on("drag", function(e, mouse) {
-        console.log("is drag");
-    });
-Of course, this code is in the `ready` method of scene. Here, when the element is moved with the mouse, the callback function is called
-Here are all the possibilities :
-* hold
-* tap
-* doubletap
-* drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
-* swipe, swipeup, swipedown, swipeleft, swiperight
-* transform, transformstart, transformend
-* rotate
-* pinch, pinchin, pinchout
-* touch (gesture detection starts)
-* release (gesture detection ends)
-> Notice that `touch` is equivalent to the `click` event
-See [https://github.com/EightMedia/hammer.js/wiki/Getting-Started](https://github.com/EightMedia/hammer.js/wiki/Getting-Started)
-## Full example ##
-    var canvas = CE.defines("canvas_id").
-		ready(function() {
-			canvas.Scene.call("MyScene");
-		});
-	canvas.Scene.new({
-		name: "MyScene",
-		ready: function(stage) {
-			var el = this.createElement();
-			el.fillStyle = "red";
-			el.fillRect(0, 0, 100, 100);
-			el.on("dragright", function(e, mouse) {
-				this.x = e.gesture.deltaX;
-				this.y = e.gesture.deltaY;
-			});
-			stage.append(el);
-		}
-	});

package/doc/nodejs.md DELETED Viewed

@@ -1,142 +0,0 @@
-# Multiplayer
-CanvasEngine implements a multiplayer game using NodeJS and Socket.io
-1. Install [Node.js](http://nodejs.org) and [NPM](https://npmjs.org/)
-2. Open the Shell :
-       npm install canvasengine
-3. Create a. Js file in your project for the server
-## Example
-Here is an example of a client code :
-    <!DOCTYPE html>
-    <html>
-    <head>
-	<script src="canvasengine-X.Y.Z.all.min.js"></script>
-	<script src="extends/Socket.js"></script>
-	<script>
-		var canvas = CE.defines("canvas").
-			ready(function() {
-			canvas.Scene.call("MyScene");
-		 });
-		canvas.Scene.new({
-		  name: "MyScene",
-		  events: ["load"],
-		  ready: function(stage) {
-		       CE.connectServer('http://127.0.0.1', 8333);
-               this.loadEvents();
-               CE.io.emit("load");
-		  },
-		  load: function(text) {
-			 console.log(text);
-		  }
-		});
-	</script>
-    </head>
-     <body>
-	    <canvas id="canvas" width="675px" height="506px"></canvas>
-     </body>
-    </html>
-And server code :
-    var CE = require("canvasengine").listen(8333);
-	CE.Model.init("Main", ["start"], {
-	  initialize: function(socket) {
-	  },
-	  start: function() {
-		 this.socket.emit("MyScene.load", "Hello");
-	  }
-    });
-1. We make a connection with `connectServer()` method
-2. Since the scene is already loaded and the connection after,  load events with
-1. The client sends data to the server with the `emit` of `CE.io` property `loadEvents()`. If we connect before the opening of the scene, no need to call this method:
-        CE.connectServer('http://127.0.0.1', 8333);
-        canvas.Scene.new({
-		  name: "MyScene",
-		  events: ["load"],
-		  ready: function(stage) {
-               CE.io.emit("load");
-		  },
-		  load: function(text) {
-			 console.log(text);
-		  }
-		});
-3. Conversely, data is sent to the scene with the `emit` method `CE.Core.io` property. Note that you can call methods of a particular scene, by prefixing the name of the event by the name of the scene
-4. Here, the `load` method is executed and defined in the `events` property
-> `CE.io` and `CE.Core.io` methods are the same as Socket.io
-## Create a module
-Server side, create a JS file
-    var CE = require("canvasengine").listen(),
-	    Class = CE.Class;
-    CE.Model.create("Player", ["start"], {
-        initialize: function(user_id, username) {
-        },
-        start: function() {
-        }
-    });
-    exports.New = function(socket, user_id, username) {
-       return CE.Model.new("Player", [user_id, username], socket);
-    };
-1. Load CanvasEngine. No need to put the port.
-2. Create a class with events
-3. The function of `export.New()` created a new instance of the `Player` class with two parameters.
-4. The socket parameter is essential if you want the user invokes events class. Because here we have a player, we assign the socket of the user class
-Our main class :
-    var CE = require("canvasengine").listen(8333),
-	    Class = CE.Class;
-    CE.Model.init("Main", {
-	  initialize: function(socket) {
-		 var player = require("./player").New(1, "Foo", socket);
-	  },
-   });
-If the class is common to all the world (a map by example)
-    var Map = require("./map").New(null); // socket is null. It indicates that not assign an event to sockets
-    CE.Model.init("Main", {
-         enterMap: function() {
-    		 CE.Model.assignEvents(Map, this.socket);
-    	 }
-    });
-Here we take into account that the `Map` object is global. In addition, it refers to a previously instantiated class (not written in the code above, imagine). Since the class has already been instantiated, we assign events to the user of the class when he gets on the map

package/doc/scene.md DELETED Viewed

@@ -1,44 +0,0 @@
-# Create a scene
-Scenes can prepare the elements and display them on the screen
-    var canvas = CE.defines("canvas_id").
-	ready(function() {
-		canvas.Scene.call("MyScene");
-	});
-    canvas.Scene.new({
-	  name: "MyScene", // Obligatory
-	  materials: {
-		images: {
-			img_id: "path/to/img.png"
-		}
-	  },
-	  preload: function(stage, pourcent) {
-	  },
-	  ready: function(stage) {
-	  },
-	  render: function(stage) {
-	  },
-	  exit: function(stage) {
-	  }
-    });
-The scene is composed of several methods. All methods are optional.
-* `preload` : Method called at each resource loaded  in the `materials` property
-* `ready`: Method called when resources are loaded
-* `render` : Method called at each render (60 FPS)
-* `exit` :Method called when this scene is quitted (or another scene is called)
-To call the scene:
-    canvas.Scene.call("MyScene");
-The name of the scene is set in the `name` parameter.
-The `stage` parameter is the main element. Child elements will be added to the `stage` element