pat

Members
  • Content Count

    38
  • Joined

  • Last visited

  • Days Won

    1

pat last won the day on September 21 2014

pat had the most liked content!

About pat

  • Rank
    Advanced Member

Profile Information

  • Gender
    Male
  • Location
    Paris, France

Recent Profile Visitors

899 profile views
  1. Hello all, I wrote a program in Phaser that resolves the problem with "Ghosts and GhostBusters" using the Graham algorithm. Have a look here Have a nice day Patrick
  2. Thanks a lot for your answer As a lot of users here, have a blog showing phaser examples, I was thinking that a user can give me what was the best idea to do that.
  3. hello, I want to include in my blog (wordpress), a short example in Phaser. For example. <!doctype html><html> <head> <meta charset="UTF-8" /> <title>hello phaser!</title> <script src="phaser.min.js"></script> </head> <body> <script type="text/javascript"> window.onload = function() { var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create }); function preload () { game.load.image('logo', 'phaser.png'); } function create () { var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo'); logo.anchor.setTo(0.5, 0.5); } }; </script> </body></html>What is the best place to upload the phaser library and the script ?? I was not able to find a little tutorial Perhaps, the best idea is to use a plug-in ?? Thanks a lot Patrick
  4. I change a little your code, the problem was for the move command. It is not necessary to update the bitmap data if we only move the pen. I just store the value of the move point to use it when necessary. I put your code here, in case I loose it on my computer. Thanks a lot // Phaser current version test environment// Procedurally draw a boxvar game = new Phaser.Game(500, 400, Phaser.AUTO, 'test');var BasicGame = function(game) {};BasicGame.Boot = function (game) { // nothing here};var bmd, queue = [], lastAction ={action: '', pt:new Phaser.Point(0, 0)};BasicGame.Boot.prototype = { preload: function() { game.time.advancedTiming = true; }, create: function() { // Create our bitmapData and apply it to a Sprite bmd = game.add.bitmapData(400, 400); game.add.sprite(40, 40, bmd); // Feed the drawShape function an array of points this.drawShape([ new Phaser.Point(5, 5), new Phaser.Point(275, 20), new Phaser.Point(245, 265), new Phaser.Point(25, 275) ]); }, update: function() { }, render: function() { game.debug.text(game.time.fps || '--', 2, 14, "#00ff00"); }, drawShape: function(pts) { var p; // Loop through all of the points and add 'plot' commands for (p = 0; p < pts.length; p++) { queue.push({action: "plot", pt: pts[p]}); } // Move back to the first point queue.push({action: "move", pt: pts[0]}); // Shift the array so the last point is the first, so we make a complete square with the lines that follow Phaser.Math.shift(pts); // Loop through the shifted points and add 'line' commands for (p = 0; p < pts.length; p++) { queue.push({action: "line", pt: pts[p]}); } // Begin processing the queue of commands we've created this.processQueue(); }, processQueue: function() { // Are there any commands left to process? if (queue.length == 0) { return; } //bmd.clear(); // Get the next command from the front of the queue var a = queue.shift(); // Parse our commands and perform the appropriate canvas operations switch (a.action) { case "plot": bmd.ctx.beginPath(); bmd.ctx.arc(a.pt.x, a.pt.y, 2, 0, 2 * Math.PI, false) bmd.ctx.fillStyle = '#ffffff'; bmd.ctx.fill(); // Set the bmd to dirty so it renders in WebGL properly // If dirty this BitmapData will be re-rendered. bmd.dirty = true; break; case "move": // do nothing, I save the new point in lastAction break; case "line": bmd.ctx.beginPath(); bmd.ctx.lineWidth = '2'; bmd.ctx.setLineDash([5, 5]); bmd.ctx.strokeStyle = "green"; // Green path bmd.ctx.moveTo(lastAction.pt.x, lastAction.pt.y); bmd.ctx.lineTo(a.pt.x, a.pt.y); bmd.ctx.stroke(); // Draw it // Set the bmd to dirty so it renders in WebGL properly // If dirty this BitmapData will be re-rendered. bmd.dirty = true; break; } // we save the last action with the point coord lastAction = a; // Process the next command in the queue after 400ms game.time.events.add(400, this.processQueue, this); }};game.state.add('Boot', BasicGame.Boot);game.state.start('Boot');
  5. One more time, thanks a lot If I add this line bmd.clear(); just after the beginning of function processQueue I see one point alone, then the second point alone, then the third point alone and the last point alone (that seems good) but I see the four lines at the same time ???? processQueue: function() { // Are there any commands left to process? if (queue.length == 0) { return; } bmd.clear(); …
  6. AARRGGHH exactly what I wanted. You save my day I think that there is a little problem, when you look, you can see that the first line is drew four times, the second line is drew 3 times and so on It look like the bmp data is not erased or something like that.
  7. Thanks a lot for your answer, but it is not I am waiting for. In fact my problem is this one. I calculate a lot of points and for each point, I want to be able to calculate a new bitmapData (I can do that) and to force the update/refresh of this bitmapData function create() { game.stage.backgroundColor = '#FFFFFF'; // we create and add the bitmapData bmd = game.add.bitmapData(SCREEN_WIDTH, SCREEN_HEIGHT); game.add.sprite(0, 0, bmd); // calculate 4 points for (var i = 0; i < 4; i++) { points[i] = [ [Math.random() * SCREEN_WIDTH], [Math.random() * SCREEN_HEIGHT] ]; CALCULATE A NEW BITMAP DATA (I can do it) FORCE REFRESH (is it possible ??) WAIT A SECOND (is it possible ??) } }
  8. Hello all, This short code works well. I am calculating 4 points and I connect them with a dotted line. I draw them on a bitmapData My problem is this one. I want to slow down the drawing and for example draw a point (wait 1 second), draw a second point (wait another second), draw another point (wait another second) and then draw the lines. The waiting time can be giving by a slider. And of course, during all this time, I want to be able to click on the slider to change the speed of the animation. is it possible or not, because I am drawing on the bitmapData. Thanks for your help Patrick window.onload = function () { var SCREEN_WIDTH = 800; var SCREEN_HEIGHT = 600; // array of points var points = []; // lineDashOffset var dashOffset = 1; var game = new Phaser.Game(SCREEN_WIDTH, SCREEN_HEIGHT, Phaser.AUTO, '', { create: create, update: update}); // We draw circle and lines directly on the bitmapdata bmd var bmd; function create() { game.stage.backgroundColor = '#FFFFFF'; // we create and add the bitmapData bmd = game.add.bitmapData(SCREEN_WIDTH, SCREEN_HEIGHT); game.add.sprite(0, 0, bmd); // calculate 4 points for (var i = 0; i < 4; i++) { points[i] = [ [Math.random() * SCREEN_WIDTH], [Math.random() * SCREEN_HEIGHT] ]; } } function update() { // erase bitmapData bmd.clear(); test(); } function test() { // we draw lines bmd.ctx.beginPath(); bmd.ctx.lineWidth = '1'; bmd.ctx.setLineDash([5, 5]); bmd.ctx.lineDashOffset = dashOffset; dashOffset++; bmd.ctx.strokeStyle = "green"; // Green path for (var i = 1; i < points.length; i++) { bmd.ctx.moveTo(points[i - 1][0], points[i - 1][1]); bmd.ctx.lineTo(points[i][0], points[i][1]); bmd.ctx.stroke(); // Draw it } // to remove dashed line bmd.ctx.setLineDash([0, 0]); bmd.ctx.lineDashOffset = 0; // we draw circles for (i = 0; i < points.length; i++) { bmd.ctx.beginPath(); bmd.ctx.arc(points[i][0], points[i][1], 3, 0, Math.PI * 2); bmd.ctx.fillStyle = 'Red'; bmd.ctx.fill(); bmd.ctx.lineWidth = 1; bmd.ctx.strokeStyle = 'FireBrick'; bmd.ctx.stroke(); } }}
  9. Hello all, It is a stupid question (one more) but I am trying to draw in the bitmapData For example: bmd = game.add.bitmapData(800,600);var color = 'yellow'; bmd.ctx.beginPath();bmd.ctx.lineWidth = "6";bmd.ctx.strokeStyle = color;bmd.ctx.stroke();Where is the documentation of these commands I can not find them in the documentation http://docs.phaser.io/Phaser.BitmapData.html? Where are they ?? Thanks a lot Patrick
  10. Thanks a lot for the answer
  11. Hello all, Please, I am a newbie, so excuse my question. I am looking at the code of Pixi, because I want to understand how works this code. in Stage.js, I do not understand that this.worldTransform or this.dirty are private ??? Thanks a lot PIXI.Stage = function(backgroundColor){ PIXI.DisplayObjectContainer.call( this ); /** * [read-only] Current transform of the object based on world (parent) factors * * @property worldTransform * @type Mat3 * @readOnly * @private */ this.worldTransform = new PIXI.Matrix(); /** * Whether or not the stage is interactive * * @property interactive * @type Boolean */ this.interactive = true; /** * The interaction manage for this stage, manages all interactive activity on the stage * * @property interactive * @type InteractionManager */ this.interactionManager = new PIXI.InteractionManager(this); /** * Whether the stage is dirty and needs to have interactions updated * * @property dirty * @type Boolean * @private */ this.dirty = true; //the stage is its own stage this.stage = this; //optimize hit detection a bit this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); this.setBackgroundColor(backgroundColor);};
  12. I post a new tutorial for installing TypeScript on WebStorm http://blog.mega-art.com/getting-started-with-phaser-webstorm-and-typescript/
  13. I just post another tutorial http://blog.mega-art.com/getting-started-with-phaser-webstorm-and-typescript/
  14. Thanks a lot. I understand :-)