Jump to content

Search the Community

Showing results for tags 'line'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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





  1. I have just started learning Babylon.js and am trying to create a line that moves with moving of a html slider. I am using CreateLines function of Babylon for create a line. I have set update boolean to true. But even after updating the vertices, the new line is not rendered. When I print the vertices after changing, their value is changed, but the line displayed remains same. Here is my code for creating the line: Xaxis = BABYLON.MeshBuilder.CreateLines("Xaxis",{points:[new BABYLON.Vector3(1000,0,0),new BABYLON.Vector3(-1000,0,0)], updateable:true},scene); And here is my code to upda
  2. Link It Up! is a casual, puzzle platforming game. In this game you need to link up the line to make your way through the level. Link It Up! features 30 levels that include interesting puzzles as well as cool platforming challenges. You can Play it here: https://www.newgrounds.com/portal/view/729389 Link It Up! is available for non-exclusive licensing so if you're interested in licensing it contact me via email: alienplay44@gmail.com
  3. Refer to the demo below, a GUI line can connect a mesh & a control at the same time by using: line.linkWithMesh(sphere); line.connectedControl = rect1; However, what I want to achieve is that let GUI line link with 2 meshes, each at the end of the line. (eg. line.linkWithMesh(sphere1, sphere2); Is there any way to achieve this? https://www.babylonjs-playground.com/#XCPP9Y#39
  4. 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.
  5. How to color line ? I tried to use the option colors of CreateLines, but it doesn't seem to work. Maybe, I forgot something https://www.babylonjs-playground.com/#165IV6#228
  6. 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 liv
  7. 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: https://www.relive.cc/ , 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!
  8. 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: https://phaser.io/examples/v2/geometry/line Thx PS: Same problem with line width.
  9. 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: http://www.babylonjs-playground.com/#165IV6#8
  10. 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:
  11. 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 = this.add.graphics(); graphics.lineStyle(20, 0x33FF00); graphics.moveTo(100,200); graphics.lineTo(300, 200); graphics.inputEnabled = true; graphics.input.useHandCursor = true; graphics.events.onInputDown.add(function(){ console.log('Clicked'); }); } When i use inputEnabled method, it works on most of other things like sprite
  12. 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 Phaser.io, 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
  13. 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.
  14. Hi there, I'm using pixi 3.0.3, and I'm creating a mask using a line https://jsfiddle.net/4b2v1amy/ Copying that code in the examples page http://pixijs.github.io/examples/index.html?s=demos&f=masking.js&title=Masking&v=v3.0.3 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?
  15. [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
  16. 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 = game.add.graphics(100,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(fi
  17. Take a look at the WebGL rendering in this fiddle: http://jsfiddle.net/intrinsica/L9z655jy/ 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.
  18. Hey, Does anyone know if it's possible to make a lines end rounded using Phaser graphics? Cheers, Martin
  19. Hi guys! One question... Is possible to do the following in phaser? http://flashvhtml.com/ 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
  20. Hello, I have created a line to immitate lightning as shown in the http://gamemechanicexplorer.com/ 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 l
  21. 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 http://coil.clay.io/ 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
  22. 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!
  23. 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 t
  24. yegorf1

    Dotted line

    Hi again! Is there any way to draw dotted line, except sprite and many small lines?
  25. 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 tw
  • Create New...