The idea is to use Angular in a simple canvas game development. Theoretically, the project should be more systematic, manageable and scalable. This is not a sprite / tile / collision game, but PaperJS is used for drawing and interacting with canvases.
- What is the best approach to integrate Paper.js (or another canvas drawing library) into multiple NG views so that each view represents a game stage?
- Can I set up Paper once and use paper through several types?
- The game allows the user to return to previous stages / views. Do I need to reinstall Paper every time I load a view / canvas? (Shown in the example below, if only set as soon as an empty canvas appears in the second visit)
- How to pass js paper information between views? for example, captures the user drawing in the form of 1 and displays the drawing in the form of 3.
Background:
JS paper
I am working on a project to create a simple 4-stage canvas game. I decided to use PaperJS for its advantages for drawing and animating shapes. The content and ui for each stage are stored in a separate layer as part of the same paper project.
Angular js
The game becomes more complex as it develops. After some research, I decided to use Angular to organize the entire game, although I am new to Angular. Plan:
- 4 stages of the game are divided into four types, each of which has its own canvas
- Custom directives are used to set up paper on each canvas.
- Using the service to communicate between canvases. For example, allow users to draw in the first step and display the drawing in the second step
I made a layout in plunker showing basic setup and animation with Paper.js. Each canvas sits in a separate view with routing enabled.
Plunker demo: http://plnkr.co/edit/Um1jTp8xTmAzVEdzk2Oq?p=preview
For testing sake, I did
paper.project.layers[0].children
displayed at any time. After the paper is set up, the “add shapes” button launches the children of the active layer as expected.
Problem 1 (Draw1 in the demo)
In DRAW1, paper will be displayed only once on the canvas the first time the view is loaded:
drawControllers.directive('drawingBoard',['drawService',function(drawService){ function link(scope, element, attrs){ // setup Paper var canvas = element[0]; if ( scope.objectValue.count < 1){ paper = new paper.PaperScope(); paper.setup(canvas); scope.setCount( scope.objectValue.count + 1 ); with (paper) { var shape = new Shape.Circle(new Point(200, 200), 200); shape.strokeColor = 'black'; shape.fillColor = 'yellow'; // Display data in canvas var text = new PointText(new Point(20, 20)); text.justification = 'left'; text.fillColor = 'black'; var text2 = new PointText(new Point(200, 200)); text2.justification = 'center'; text2.fillColor = 'black'; text2.content = 'click to change size'; shape.onClick = function(event) { this.fillColor = 'orange'; scope.$apply(function () { scope.setWidth(Math.round((Math.random()*100)+100)); }); } view.onFrame = function(event) { if ( text.position.x > 440 ){ text.position.x = -40; } else { text.position.x = text.position.x + 3; } text.content = 'Shape width: ' + scope.objectValue.width; shape.radius = scope.objectValue.width; scope.$apply(function () { scope.setMessage(); }); } paper.view.draw(); } } else { scope.setMessage(); } } return { link: link } }]);
However, if you switch from DRAW1 to HOME and return to DRAW1, the canvas will be blank. But shooting “add shapes” at this point will still create new children for the layer.
Problem 2 (DRAW2 in demo)
Deleting this line
if ( scope.objectValue.count < 1){
Paper will be set up in DRAW2 each time it is loaded.
But this introduces a new paper project each time.
thanks
Thanks for any tips and suggestions.