Search the Community

Hello, I'm a completely rookie trying to render a simple line, so I have this: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create, update: update, render: render }); var line; function create() { game.stage.backgroundColor = '#011052'; line = new Phaser.Line(0, 100, 800, 100); } But it's not working, I mean I can not see the line. Please advice.

I need phaser.js function for dynamic rendering primitives, circle, triangle, filled with broken line. I am writing here, because there are several options for drawing primitives. Which one to choose? The game itself will be out of these primitives (no sprites) that will be dynamically changed. An example of what to draw primitives I fasten. I also need a text entry field p.s. Translation using Google Translator, try to understand

Hi, I'm trying to make simple joystick (yes i know there is a plugin ) for my game. the problem is onDragStart is not working and even if I dont use this event I get error every time I'm starting dragging. everything else is working fine. Even onDragStop is ok. error: Uncaught TypeError: undefined is not a function phaser.js:31216Phaser.InputHandler.startDrag phaser.js:31216Phaser.InputHandler._touchedHandler phaser.js:30885Phaser.Pointer.start phaser.js:29001Phaser.Input.startPointer phaser.js:27272Phaser.Touch.onTouchStart phaser.js:29757_onTouchStart phaser.js:29677// the last line in phaser.js is: if (this.game.device.touch) { this._onTouchStart = function (event) { return _this.onTouchStart(event); };//the first one: if (this.sprite.fixedToCamera) { if (this.dragFromCenter) { this.sprite.centerOn(pointer.x, pointer.y); this._dragPoint.setTo(this.sprite.cameraOffset.x - pointer.x, this.sprite.cameraOffset.y - pointer.y); } else { this._dragPoint.setTo(this.sprite.cameraOffset.x - pointer.x, this.sprite.cameraOffset.y - pointer.y); } }and there is my code: addJoystick = function(x,y,r, show_level){ var boundries = new Phaser.Rectangle(x-(r/2),y-(r/2),r,r); var bottom = game.add.graphics(x,y); bottom.beginFill(0xFF3300,0.3); bottom.lineStyle(2, 0xffd900, 1); bottom.drawCircle(0,0, r); bottom.fixedToCamera = true; var stick_r = r/2.5; var stick = game.add.graphics(x,y); stick.base_r = r; stick.beginFill(0xFFcc00,0.3); stick.lineStyle(2, 0xffd900, 1); stick.drawCircle(0,0, stick_r); stick.base_cameraOffset = [stick.cameraOffset.x,stick.cameraOffset.y] ; stick.inputEnabled = true; stick.level =0; stick.level_start=false; if(typeof(show_level)!='undefined'){ var level_bar = game.add.graphics(x,y); level_bar.beginFill(0xFF0000,0.8); level_bar.lineStyle(2, 0xffcccc, 1); level_bar.drawCircle(0,0, 1); level_bar.max_r = r; level_bar.fixedToCamera = true; stick.level_bar = level_bar; stick.update = function(){ if(this.level_start){ console.log(this.level_bar); } } } // enableDrag parameters = (lockCenter, bringToTop, pixelPerfect, alphaThreshold, boundsRect, boundsSprite) stick.input.enableDrag(true, true, false, 255, boundries ); stick.fixedToCamera = true; stick.get_x = function(){ var offset = this.base_cameraOffset[0] - this.cameraOffset.x; return (offset/this.base_r)*200; }; stick.get_y = function(){ var offset = this.base_cameraOffset[1] - this.cameraOffset.y; return (offset/this.base_r)*200; }; stick.events.onDragStart.add(function(item){ item.level_start=true; item.level =0; }, this); stick.events.onDragStop.add(function(item){ item.cameraOffset.x = item.base_cameraOffset[0]; item.cameraOffset.y = item.base_cameraOffset[1]; item.level =0; item.level_start=false; }, this); return stick;};

Hi! I'm David, co-founder and front end of Arpic Games, a startup in Valencia (spain). We are making Starriser, an MMO of space strategy in real time. We are talking hundreds of thousands of players in real time in a giant world steering huge fleets of ships and managing planets, waging wars and trading with other players. A snapshot of the Starriser's galaxy: https://www.dropbox.com/s/sqro8ylbdkzqgfk/Starriser%20Galaxy.png?dl=0 This is a little one. Basically, the map is a graph. Nowadays Starriser uses Canvas 2D natively. I'm researching for graphic libraries and Pixi seems to be the best. The only problem is the primitives draw system. Pixi makes polygons from lines to have nice corners. The problem here is that its computation is slow. Well, not slow in general, slow if you put 5.000 lines and need to change their thickness every time the user zooms in. Even more if you smooth the zoom. Basically, I need to change the thickness of 5.000 lines without affecting performance. Computing every frame's line's polygons in a zoom animation its too much. A possible solution I thought is to use native webgl primitives. They don't have nice corners, but I don't need then. Is there any way to use native webGL lines in pixi? Finally, in my research I've noticed that pixi is a great solid library. Great work! Thanks! David.

I need these features if I'm to use Pixi to be able to finish a js library I'm making, which uses primitives allot (e.x. Pixi Graphics). a ) or "dashed strokes" is straight forward, I just need to be able to created dashed strokes on PIXI Graphics objects (see here: http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html ) b ) or "complex shapes" is just complex shapes as refered to here: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png , which would be nice to have but is not as important as the others. c ) or "gradient fill", especially radient gradient fill, as seen here: http://www.html5canvastutorials.com/tutorials/html5-canvas-radial-gradients/ d ) or "compositing" (globalCompositeOperation), as explained here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing And I'm wondering about three things: 1. Is any of this built into Pixi right now? 2. If not built in, is there a hack I can use? 3. If neither, will it be supported eventually? Thanks

Hello everyone! I just pushed a big fat pixi.js update on to the dev branch on github. Todays new feature is the PIXI.Graphics object. Its very similar to the flash graphics object and allows you to draw primitive shapes and lines. The cool thing is, is the webGL and Canvas implementations should both look exactly the same (not the easiest task thats for sure!) More info on how the graphics object was made can be found here if ya fancy: http://www.goodboydigital.com/pixi-webgl-primitives/ I hope you find the new feature useful! Mat