Search the Community
Showing results for tags 'line'.
-
Hey all, I have a PIXI.Graphics line with about 500k points. Draws fine, I added PIXI-Viewport for zoom and pan. When I zoom in the line resolution is not good. 2 questions. Main Question, how to fix the sharpness of the line on zoom-in Second question, how can I limit the zoom and pan to the min and max of this line I've drawn? Thanks! pixi-graph.mp4
-
I think I'm missing something very basic about how Phaser Tweens operate but I just can't get this simple thing to work. Imagine a very simple scene: canvas of 800x640 red circle in the center two blue lines in a 9:00 position private create(): void { const circ = this.add.circle( 400, 320, 200, 0xff0000 ); const l1 = this.add.line( 0, 0, 400, 320, 400, 100, 0x0000ff ).setOrigin(0); const l2 = this.add.line( 0, 0, 400, 320, 200, 320, 0x0000ff ).setOrigin(0); } So far so good. Now I want to scale this simple figure, same config 1.5x its current size: private create(): void { const circ = this.add.circle( 400, 320, 200, 0xff0000 ); const l1 = this.add.line( 0, 0, 400, 320, 400, 100, 0x0000ff ).setOrigin(0); const l2 = this.add.line( 0, 0, 400, 320, 200, 320, 0x0000ff ).setOrigin(0); this.tweens.add({ targets: [circ, l1, l2], scale: 1.5, yoyo: false, duration: 2000, ease: 'Sine.easeInOut' }); } Expected behavior: the circle expands from the center the lines expand as well, ideally where they meet Actual behavior: As things stand, only #1 fit my expectations. The lines, however, translate as opposed to merely scaling. And the translation seems affected by the scale parameter passed to tweens.add. What gives? What am I missing here? Given the various configurations for "origin" wrt lines in Phaser 3, the worst I was expecting was that the lines would emanate/grow differently than the circle (which emanates from the center/origin). But I definitely expect the lines to stay still/keep their intersection at the circle's center. Can you explain what exactly Phaser is doing here and what might I do to get my desired effect?
-
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 update the line: Xaxis = BABYLON.MeshBuilder.CreateLines("Xaxis",{points:[new BABYLON.Vector3(1000,(vy/100)*newVal,(vz/100)*newVal),new BABYLON.Vector3(-1000,(vy/100)*newVal,(vz/100)*newVal)], updateable:true,instance:Xaxis}); here newVal is a variable which has the current value of the slider. What mistake am I doing?
-
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: [email protected]
- 4 replies
-
- 1
-
-
- licensing
- non-exclusive
- (and 8 more)
-
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
-
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.
-
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
-
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 : http://jerome.bousquie.fr/BJS/test/linesystem.html
- 16 replies
-
- 4
-
-
- colors
- linesystem
- (and 1 more)
-
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!
-
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.
-
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
-
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: http://www.babylonjs-playground.com/#1B1LNW#2 * 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
-
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 or image, but for graphics it wont respond. I've look into the offical example provide by phaser web http://phaser.io/examples/v2/display/graphics-input-events 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
-
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 know how to "materialize" the body and everything that should go after i declare them, which is my problem. On Phaser.io 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!)
-
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.
-
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? 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.
-
[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 : http://codepen.io/codevinsky/pen/dAjDp 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(); },
-
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(finalPosition.x, finalPosition.y); }); renderLine.start();Anyone can help on this ??
-
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.
-
Hey, Does anyone know if it's possible to make a lines end rounded using Phaser graphics? Cheers, Martin
-
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
-
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 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.
-
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
-
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!
-
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!
