The idea is to make use of Angular in a simple canvas game development. In theory the project should benefit from being more systematic, manageable and scalable. This is not a sprite/tile/collision game and PaperJS is used to do most canvas drawing and interactions.
- What is the best approach to integrate Paper.js (or other canvas drawing library) into multiple NG views, in order to have each view representing a game stage?
- Is it possible to setup Paper once and use paper across multiple views?
- The game allows user to revisit previous stages/views. Do I have to re-setup Paper every time the view/canvas loads? (Shown in example below, if only setup once a blank canvas will appear on view's second visit)
- How do I transfer Paper js information between views? e.g. captures user drawing in view 1, and display drawing in view 3.
Background:
Paper JS
I'm working on a project to create a simple canvas game with 4 stages. I decided to use PaperJS for its advantage for drawing and animating shapes. Content and ui for each stage is kept in a separate layer within the same paper project.
Angular JS
The game has become more complicated as it develops. After some research, I decided to use Angular to organise the whole game, although I'm new to Angular. The plan:
- The 4 game stages are split into four views, each has its own canvas
- Custom directives are used to setup paper on each canvas
- Using service for communication between canvases. For example allow users to draw in stage one and display drawing in stage two
I have made a mock up in plunker showing the 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 have made
paper.project.layers[0].children
visible anytime. After a paper is setup, firing "add shapes" button would introduce children to the active layer as expected.
Problem 1 (Draw1 in demo)
In DRAW1, paper will only setup once on the canvas when the view first loads:
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 navigate from DRAW1 to HOME and back to DRAW1, the canvas would appear blank. But firing "add shapes" at this point would still create new children to the layer.
Problem 2 (DRAW2 in demo)
By removing this line
if ( scope.objectValue.count < 1){
// ... paper setup ...
}
Paper will setup in DRAW2 every time it loads.
But that introduces a new paper project every time.
Thank you
Thank you for any advice and suggestions.