Search the Community

Showing results for tags 'line'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 24 results

  1. I am trying to following this example and I want to create multiple lines in a path using lineTo instead of circleTo, but instead the particle treats it like two points. var path = new Phaser.Curves.Path(0,0).lineTo(100, 200); Any help is appreciated.
  2. How to color line ? I tried to use the option colors of CreateLines, but it doesn't seem to work. Maybe, I forgot something
  3. Hi people, Based on the internal initial code from @JCPalmer, here are the per point colors for LineMesh and LineSystem var points = [arrayVector3]; var lineColors = [arrayColor4]; var line = BABYLON.MeshBuilder.CreateLines("l", {points: points, colors: lineColors}, scene); // same for LineSystems var lines = [arrayVector3[] ]; var colors = [arrayColor4[] ]; var lineSystem = BABYLON.MeshBuilder.CreateLineSystem("ls", {lines: lines, colors: colors}, scene); Note1 : this works also with updatable LineMesh or LineSystem objects as the colors array can be updated live. Note2 : when set at construction time, the parameter colors overwrite the hypothetical line or lineSystem .color property. If colors is passed but undefined, the object color falls back to the .color property value. [EDITED]Note3 : if you need to enable the alpha blending (line or segment transparency), just set the parameter "useVertexAlpha" to true at construction time : [EDITED 2] the alpha blending is now enabled by default. So when you don't need it, just set "useVertexAlpha" to false instead : var lineSystem = BABYLON.MeshBuilder.CreateLineSystem("ls", {lines: lines, colors: colors, useVertexAlpha: true}, scene); var line = BABYLON.MeshBuilder.CreateLines("l", {points: points, colors: colors, useVertexAlpha: true}, scene); This will allow you to create rulers, axes, graduation systems with multiple colors and to draw them in a single draw call. As usual, documentation and PG examples coming soon ... meanwhile :
  4. Hey guys, I'd like to know if there is a way to represent an animated polyline moving from point A to point B on a mountainous terrain. The idea would be to show a track like this: , you can see it in the demo video. I understand that this functionality does not exist in Babylon, and from what I've read, the Babylon.Ribbon only allows for vertices to change position but not for adding new vertices. But anyways, what would be the steps for me to implement it from scratch? Thanks!
  5. How can I set the color of a Phaser Line? var line = new Phaser.Line(0, 0, 100, 100); I did not find any info how to change the color from green to anything else. Official example: Thx PS: Same problem with line width.
  6. I'm new here. I got samples from babylonjs for drawing lines in 3D. It looks fine. I want to know how we can extend lines with new points at runtime? Could anyone please help me out? Source:
  7. Hi All I am trying to create an algorithm that dynamically draws a line (connector) that links a label to a shape. At the moment I have a function for rendering a label at the location a shape resides. Prior to rendeirng the connectors I wanted to resolve the issue of overlapping labels - i.e. dependent on the orientation of the camera the labels will overlap because the 2D X/Y screen coordinates projection occupies the same space. In my attempt to fix this problem I wanted to obtain the X/Y screen coordinate for the shapes in my scene - I am using the following code: var p = BABYLON.Vector3.Project(mesh.position, BABYLON.Matrix.Identity(), scene.getTransformMatrix(), camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight())); The problem I am finding is that the position returned has an X and Y coordinate of NaN. I dont understand why this is happening and was hoping someone could kindly take a quick peak at my code to determine whats up: * See lines 154 ~ 158 for the above code snipplet Beyond fixing the bug as reported above, if anyone can provide pointers as to how best resolve the overlapping labels issue that would be great. Ideally I want all connectors to follow a uniform pattern / pathlinking labels to their corresponding shape. Anyway, any pointers would be appreciated. Thanks
  8. Xylops

    Clickable graphics line

    Sorry guys, I've just start using phaser, i wonder if it is possible for to create a line which is clickable? Here's the code function create(){ graphics =; graphics.lineStyle(20, 0x33FF00); graphics.moveTo(100,200); graphics.lineTo(300, 200); graphics.inputEnabled = true; graphics.input.useHandCursor = true;{ console.log('Clicked'); }); } When i use inputEnabled method, it works on most of other things like sprite or image, but for graphics it wont respond. I've look into the offical example provide by phaser web i saw them adding graphics.input.useHandCursor = true; However for some reason it doesn't work like the example? Thank You so much for the time
  9. omediadon

    p2 complex ground shape

    Hey there So, this is my first post in here, i hope everybody is good out there, let's go straight into the issue. I'm new to, and I'm intending to use it to create a hill climber clone. I have successfully create car like shapes (following a couple of online tutos) but still very confused about how to create the land on which the car will run. To make it clearer, here's an illustration of what i exactly want: So basically, the original game introduces 2+ types of ground, that are the bridges, land, water, ... I need to implement only two types. I know how to "materialize" the body and everything that should go after i declare them, which is my problem. On examples page there's quiet half the solution to my problem but uses Box2D which is paid (and i can afford it right now, else, i would love to get it!)
  10. zzelbrujo

    Help with Phaser.Line

    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.
  11. txusinho

    Mask with lines in canvas renderer

    Hi there, I'm using pixi 3.0.3, and I'm creating a mask using a line Copying that code in the examples page runs great in every browser supporting webGL. The expected result is shown in the followingimage But if I force the renderer to canvas (or disabling webGL in the browser), the result is the one seen in the attached image Line mask pixi 3.0.3 canvas. The mask isn't shown. Can anyone point me out if this is a bug of pixi? Thank you PS: I'd prefer not moving the mask to a polygon, since the mask evolves with the time and will make the geometry too complex.
  12. [SOLVED] line end (pointer position) must be relative to bitmapdata so : bitmapdata center +( pointer.pos - sprite.pos): this.bmd.ctx.lineTo(148+this.input.worldX-this.sprite.x,148+this.input.worldY-this.sprite.y); How does phaser handle such relative positions ? drawLine: function(){ this.sprite.x= player.body.position.x; this.sprite.y=player.body.position.y; this.bmd.clear(); this.bmd.ctx.beginPath(); this.bmd.ctx.moveTo(148,148); this.bmd.ctx.lineTo(148+this.input.worldX-this.sprite.x,148+this.input.worldY-this.sprite.y); //this.input.x-this.sprite.x , this.input.y-this.sprite.y); //this.input.activePointer.position.x+this.sprite.x,this.input.activePointer.position.y+this.sprite.y); //this.input.activePointer.position.x,this.input.activePointer.position.y); console.log(this.sprite.x-this.input.worldX,this.sprite.y-this.input.worldY); //this.sprite.x+this.input.activePointer.position.x,this.sprite.y+this.input.activePointer.position.y); this.bmd.ctx.lineWidth = 4; this.bmd.ctx.stroke(); this.bmd.ctx.closePath(); this.bmd.render(); //this.bmd.refreshBuffer(); this.bmd.update(); } [WAS] -larger than canvas map scrolling - I am struggling to get a simple mouse pointer / player line behaving properly on a 2516x2146 map inside a 960x640 canvas . Looks like mouse pointer position is wrong , not calculating map scroll somehow. I am using this example , which doesn't work as expected in my code : create: this.bmd = game.add.bitmapData(296, 296); var color = 'white'; this.bmd.ctx.beginPath(); this.bmd.ctx.lineWidth = "4"; this.bmd.ctx.strokeStyle = color; this.bmd.ctx.stroke(); this.sprite = game.add.sprite(player.body.position.x, player.body.position.y, this.bmd); this.sprite.anchor.set(0.5); update: drawLine: function(){ this.sprite.x= player.body.position.x; this.sprite.y=player.body.position.y; this.bmd.clear(); this.bmd.ctx.beginPath(); this.bmd.ctx.moveTo(148,148); this.bmd.ctx.lineTo( this.input.activePointer.position.x,this.input.activePointer.position.y); this.bmd.ctx.lineWidth = 4; this.bmd.ctx.stroke(); this.bmd.ctx.closePath(); this.bmd.render(); //this.bmd.refreshBuffer(); this.bmd.update(); },
  13. Hi, I want to animate line without using sprite sheet. This is what I want. Currently I tried to implement it using Graphics class but cannot achieve it. This is what I tried. var graphics =,100); graphics.lineStyle(4, 0xffffff, 1); var finalPosition = { x: 200, y: 0 }; graphics.moveTo(finalPosition.x, finalPosition.y); var renderLine = game.add.tween(finalPosition) .to({ x: 800, y: 0 }, 3000); renderLine.onUpdateCallback(function() { graphics.lineTo(finalPosition.x, finalPosition.y); graphics.moveTo(finalPosition.x, finalPosition.y); }); renderLine.start();Anyone can help on this ??
  14. Take a look at the WebGL rendering in this fiddle: Note the extension of the polygon beyond the 200px width it is defined to be. Is this a bug or a feature? If it's a bug, I'll file an issue. For reference, the fiddle includes a PIXI Canvas rendering and a ProcessingJS rendering. Thanks.
  15. mtburdon

    Line rounded end

    Hey, Does anyone know if it's possible to make a lines end rounded using Phaser graphics? Cheers, Martin
  16. Hi guys! One question... Is possible to do the following in phaser? I see that it have a timeline for the animations (translation, rotation and scale) and I would like do the same from a json. What do you recommend? Regards, Nicholls
  17. MichaelD

    Create a line with fill and stroke

    Hello, I have created a line to immitate lightning as shown in the this is my code that creates the line var ctx = reg.lightningBitmap.context; var width = reg.lightningBitmap.width; var height = reg.lightningBitmap.height; // Our lightning will be made up of several line segments starting at // the center of the top edge of the bitmap and ending at the bottom edge // of the bitmap. // Clear the canvas ctx.clearRect(0, 0, width, height); ctx.lineCap = "round"; ctx.lineJoin = "mitter"; // Set the starting position and number of line segments var x = 0; var y = 0; var segments = game.rnd.integerInRange(20, 100); // Draw each of the segments for (var i = 0; i < segments; i++) { // Set the lightning color and bolt width ctx.strokeStyle = 'rgb(0, 174, 239)'; ctx.fillStyle = 'rgb(255,255,255)'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x, y); // Calculate an x offset from the end of the last line segment and // keep it within the bounds of the bitmap y += game.rnd.integerInRange(-50, 50); if (y <= 10) y = 10; if (y >= width - 10) y = width - 10; // Calculate a y offset from the end of the last line segment. // When we've reached the ground or there are no more segments left, // set the y position to the height of the bitmap. x += game.rnd.integerInRange(20, width / segments); if (i == segments - 1 || x > width) { x = width; } // Draw the line segment ctx.lineTo(x, y); ctx.stroke(); // Quit when we've reached the ground if (x >= width) break; } // This just tells the engine it should update the texture cache reg.lightningBitmap.dirty = true;Now what I want to achieve is to have a white fill for the line and blue stroke as it is. How could I achieve this? Thanks guys.
  18. Hi all, I dont know if this has been answered already but can you help me in this. I want to create an effect something like in this game using PhaserJS The existing example of texture trail seems to be jittery and NOT SMOOTH http://localhost/phaser-master/phaser-master/examples/_site/view_full.html?d=display&f=render+texture+trail.js&t=render%20texture%20trail do tell me is there any lightweight way. A worked out sample would be really helpful thanks
  19. MorpheusZ

    Graphics lineWidth

    When increasing the graphics lineWidth and lowering its alpha, the outcome seems weird. See attached. This is a part of some blue filled shape drawn on a green background (the line's blue is a bit darker than the fill's blue). Notice how the line spans both the filled shape and the background, creating the illusion of 2 drawn lines. The problem is, the line is centered on the boundary of the filled shape. Is there an option to have it grow on its inside instead (so that it is touching, not centered on, the boundary)? It not, any ideas for a work around? Thanks!
  20. BenClarkson

    Checking collisions for a LASER

    Hi, I am new to phaser and I am programming a version of asteroids to get my sealegs. I wanted to take advantage of the bitmap data to create colorful gradient sprites for the ships lasers but I'm discovering the limits of arcade physics pretty quickly. I right now have a group of lasers which are bmd generated sprites. When the ship fires it grabs a random child and revives it, prints it, checks for bounds with the asteroid then is killed the next cycle. It looks great but with how the bounding box collision tests work — checking for collisions without physics — the laser collision test tells me true even when the laser clearly doesn't hit because of the ol' a^2 + b^2 = C^2. I eventually want to turn the asteroid's physics bounds into polygons too for less hilariously random player deaths. I've read a bit about SAT.js but I can't find documentation for the support in PHASER and I'm unclear about the limits of arcade physics. What would checking phaser lines, or angled sprites for collision with a polygon look like? Do I have to switch to PS to do line/ rectangle collision? Is this just a really silly way of doing this? Should I switch to an emitter (I might do that anyway for, like, really sweet machine gun effects). Thanks!
  21. yegorf1

    Dotted line

    Hi again! Is there any way to draw dotted line, except sprite and many small lines?
  22. Anny

    Connecting Sprites

    Hey guys! I have asked about this in different topics but I haven't been able to find a good way to do it. What I need is to connect sprites dragging and dropping a point of one of them (like a button) to connect it to another sprite. I have tried to do this creating lines with a bitmap and using new Phaser.line but I don't want any diagonal line and when I use bitmap I haven't been able to create multiple lines. I thought of adding a sprite with the draw of the line but that wouldn't follow the player's movement ): I wan't it to be whatever the player draws on the field that connects the two sprites (but with straigth lines, like if they were cables that connect 2 electronic pieces) I add an image to illustrate what i'm trying to do Thank you so much in advance PD: Ignore B's position haha
  23. Zaidar

    Line moving

    Hi, I'd like to know how can I draw a line moving from a point on the canvas to my moving my moving pointer. I've already tried with graphics, but it doesn't seems to clear the canvas, which make not a line but a big shape with all the line. What is the solution for it ? If I use a sprite, it will look scaled and not really nice, and with the Line renderer, I've seen Rich saying it shouldn't be used in production. Thx in advance !
  24. rosancoderian

    How to collide between line and sprite?

    How to collide between line and sprite? something like var w = 320;var h = 640;var line;var sprite;var game = new Phaser.Game(w, h, Phaser.AUTO, '', { 'preload': preload, 'create': create, 'update': update });function preload() { game.load.spritesheet('sprite', 'enemy.png', 8, 8);}function create() { sprite = game.add.sprite(0, 0, 'sprite'); sprite.body.collideWorldBounds=true; sprite.body.gravity.y = 9.8; line =, 0); line.beginFill(0xffffff); line.lineStyle(1, 0xffffff, 1); line.moveTo(0, h/2-1); line.lineTo(w, h/2-1); line.endFill();}function update() { game.physics.collide(sprite, line, collHandler, null, this);}function collHandler(obj1, obj2) { console.log('collision!!!!');}but it's not working