Search the Community
Showing results for tags 'Lines'.
Found 24 results
-
Hey, I'm trying to create a draggable line point much like in this post I was hoping that a solution was created since then, but haven't been able to find it if so.
-
for v4, this works: Also: https://stackoverflow.com/questions/50221078/how-to-change-style-of-lines-using-pixi-js-graphics But for PIXI v5, there is no PIXI.Graphics().graphicsData (it is undefined). Does someone know how to update line style using PIXI v5? Best and cheers, R.
-
Hi there folks! It's been a while since I posted something in here, glad to be back! I have a fair amount of experience in game development using JS Canvas, but recently I decided I had move on - so I went with Pixi. I figured out the basics of how to add sprites, do filters and such, but I just can't seem to figure out how to do simple lines and then manipulate them afterwards. What I mean is something like this: https://jsfiddle.net/gustavgb/anxcjfof/5/ I noticed that PIXI.Graphics has an object attached to it called "graphicsData" in which I can find the points that make up the line - great - but when changing the value of these variables, nothing happens to the appearance of my line. I'd appreciate any help, as I'm quite new to Pixi Thank you!
-
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.
-
Number 7 is a fun, and addictive new brain puzzle free download game. As a classic game Lines is popular at all over the world but this game have a new great features so it is even better! Both adult and kids can enjoy the game Number 7. Number 7 is a port of my game for Android https://play.google.com/store/apps/details?id=com.zielok.number7 and iOS https://itunes.apple.com/pl/app/number-7-innovative-fast-puzzle/id1148718041?l=pl&mt=8 HTML5 version have more visual effect. Play https://www.kongregate.com/games/twohandslab/number-7 Features - Dynamic gameplay (this game isn’t boring!!) - Easy to learn - Hard to master - New and interesting way of playing classic game - Good sound effects
- 3 replies
-
- 1
-
-
- colorballs
- lines
- (and 3 more)
-
Hi all, just after a bit of advice on how best to handle something like the realtime winlines below for a slot game... https://prnt.sc/hpfo74 I currently have it working with PIXI Graphics line to based on the grid which works fine - but leaves little for styling. I've used the glow effect from PIXI-Filters, but that only seems to work on iOS and desktop (Android chrome on a Note 8 refuses to render the lines when the filter is enabled). In previous games I've used simple 9 sliced sprites rotated with different widths to join the sections - but not sure what other methods I could try out here? and which would be the best performance wise too? Thanks in advance!
-
Hi kids! Wow, Wingnut's 2nd Q&A thread-starter IN A SINGLE DAY! Okay, I got this playground thing... https://www.babylonjs-playground.com/#BFM7EX#9 It started as @adam's demo... making a bounding box from an empty mesh. Tilt the camera up/down... notice that the standard bounding box LINES... can be seen THROUGH the ground, and THROUGH the pyramid, too. I need that to remain the same. This is NOT TRUE with the yellow linesMesh. They cannot be seen thru mesh. Solve Option #1: Using the boundingbox.vectors or .vectorsWorld crap in lines 49-59, I would like to "taper" the top of the bounding box... so that it matches the pyramid contours/angles. In other words, CAN the boundingbox.vectors be adjusted... so that they match the yellow linesMesh lines? In lines 52/53, I make position adjustments to the vectors, but I can't get the bb to update (in lines 58/59). Solve Option #2: Can someone/anyone make the yellow linesMesh... ACT-LIKE the boundingBox lines? (Make yellow lines be seen THRU mesh... in some/any color.) I am working on a physics "applyImpulse location/direction indicator/icon". (huh?) This little pyramid arrow... shows users the impulsingObjects that they have created earlier. This is part of a system that can be used to put MANY pre-made points-of-impulsing into a physics scene - great for testing angle constraints and limitMotors, etc. Ideally, the pyramid arrows are clickable, too... firing the impulse that is associated-with/bound-to THAT particular "impulsing arrow". Often, the applyImpulse contact point... happens at mesh.getAbsolutePosition()... which is INSIDE-of the mesh. I would like my 4-sided pyramid "impulsing arrow" to be seen by users... even when it is inside-of a mesh. RARELY are impulse contact points set to apply force on/at the outer surfaces of a mesh/impostor. Almost always... the contact point is somewhere inside the mesh volume. I prefer NOT NEEDING-TO make the physics mesh semi-transparent. This is going to be a physics helper - part of a physics "impulse builder", so it needs to work on ANY physics-active mesh... no matter the transparency. In this version, we can see that lines from BABYLON.BoundingBoxRenderer are visible, even when "within" full-alpha mesh volumes. I just need it to be an arrow, not a box. Ideas/help greatly welcomed and appreciated! Party on!
-
Hello, I am creating a tilesprite, but its causing black lines to appear right at edges, i have ensured that when used as just sprite there is no black line, i have tried adding extra padding in texture packer didnt, work, tried making the tilesprite size in PoT didnt work. Can anyone suggest anything else I can do? Thanks
-
Hello, I noticed some jagged edges on the diagonal lines. Is there any way to get rid of them? I have tried using the ffxa post processing, but it still does not remove them completely. Why do they even occur? It's just a straight line. Sorry if I can't give any more input in this issue, but my knowledge of graphics is limited. Here's a babylonjs playground example. https://playground.babylonjs.com/#G3JCQ6#1 Attached is a screenshot of how it looks in the scene of my project. The diagonal lines don't look very appealing for a production ready project.
-
Hi, I wonder what would be the most efficient (performance) strategy of dynamic drawing. I get every x timestep new coordinates from an external controller over the network where my "pencil" currently is. To simplify, it is like the mousepointer drawing something. When the mouse button is released, I have to store my line/circle/whatever to be able to change the position at any time: 1. draw form A 2. draw form B 3. move form A 4. draw form C ... In addition, there will be some pictures "flying" over the drawings. Pixi has some great features I want to use for this project, but I don't know how to "draw" fluently and in "real-time". Paper.js has a path-feature, which could work. Maybe I have to draw in paper.js and send every finished drawing to the pixi canvas? Thank you for your help, Steffen
-
How can we define a hitArea for a quadraticCurve line? is that even possible?Afaik, you got:PIXI.RectanglePIXI.CirclePIXI.Polygonfor defining hitArea,It seems that it's not possible, right? from https://github.com/pixijs/pixi.js/issues/3296 http://codepen.io/mohammad-ahmadi/pen/pNKOZQ?editors=0010
-
Hello please help me to draw lines between spheres http://babylonjs-playground.com/#VNE2Z#1 @aWeirdo you had a pretty good particel system knowledge, your fireball pg was impressive.
-
Hello, I want to update the vertices of a lines mesh after it has been created. On a sphere, by contrast, I can do so fairly simply: mySphere.position.x = myX; mySphere.position.z = myZ; But there does not appear to be anything like that for lines mesh: // myLines.positions is undefined ???? myLines.positions[0].x = myPositions[0].x; myLines.positions[0].z = myPositions[0].z; myLines.positions[1].x = myPositions[1].x; myLines.positions[1].z = myPositions[1].z; // myLines._positions is null ???? myLines._positions[0].x = myPositions[0].x; myLines._positions[0].z = myPositions[0].z; myLines._positions[1].x = myPositions[1].x; myLines._positions[1].z = myPositions[1].z; Is the only way to make the mesh updatable and send a new array of points in via the options? Doable, but it's more of a pain, IMO. Insight appreciated. Thanks!
-
Hello I have a problem with "enableEdgesRendering" from "createLines". When I activate the function several imaginary line connects to the middle of my ground. When this function is not activate lines are displayed correctly. See attached files, I have print screen. Have a nice day. Germain
-
Hi people, It was expected for a long time, so here is it : the brand new LineSystem. This allow you to create a single mesh with as many lines you want. Just pass an array populated with lines, each line being an array of successive Vector3. var nbLines = 30; var nbPoints = 100; var lines = []; for (var l = 0; l < nbLines; l++) { var points = []; for (var p = 0; p < nbPoints; p++) { points.push(new BABYLON.Vector3(p - nbPoints/2, Math.sin(p), l - nbLines/2)); } lines.push(points); } var lineSystem = BABYLON.MeshBuilder.CreateLineSystem("ls", {lines: lines, updatable: true}, scene); http://www.babylonjs-playground.com/#2K1IS4 Is this updatable/morphable ? Yes sir ! As usual with the parameter instance : lineSystem = BABYLON.MeshBuilder.CreateLineSystem(null, {lines: lines, instance: lineSystem}); http://www.babylonjs-playground.com/#2K1IS4#1 Have fun :-)
-
Hey all, My first problem I am trying to address is drawing a curved line through a set of points. I cannot seem to find this feature anywhere in the documentation (graphics or bitmapData). I am trying to use this curve as the top part of a polygon, which I intend to fill with a texture. Can anyone point me in the right direction here? Thanks!
-
Hi guys, I need draw some lines, they need be drawed instead of images because it's for an education game, so I need draw triangles dynamically (different angles,sizes,etc)..I'd like some retro effect for fun but I'm not sure if it's possible achieve this... is it possible?..any clue about how achieve it?, thank you guys!
-
Hello everybody, I'm sorry if this has already been asked (I searched the forum and did not find). What is the best approach to dynamically draw lines between two sprites? What I need is that when you click the sprite ( b ), the starting point the line is set and clicking the sprite ( a ), the end point is set ...
-
I have created a coordinate grid and am now trying to create the origin lines for the x and y axis, but there seems to be no way to increase the stroke of a line to make it thicker. Is there a way to do this?
-
I want to create a web app that will allow you to draw pictures. I have tried using PIXI's graphics library and it sort of works, but there are some issues. I was attempting to use LineTo which basically draws a line between two points. The issue I have come across is if I increase the line thickness, any rotation causes gaps and weird edges. I have also tried creating circles instead of lines. For slow movements this looks great, but with quick mouse swipes, there are gaps between the circles. Does anyone know of a better way to code this using PIXI? Maybe PIXI is not the best library for this sort of thing? Let me know if you need more details. I have attached a screenshot showing the problem I am experiencing. Thanks!
-
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.
-
Hello all. I've been trying to create a simple line drawing 'game' using a bitmapData object and the CanvasRenderingContext2d object it contains. I've been successful, but it wouldn't support drawing two seperate line segments, preferring instead to make a line from the endpoint of the last line to the starting place of the new one. I wrote up some new code to try to fix that, (and I am probably missing something very obvious) but it does not work. No error is thrown, but nothing shows up onscreen. update: function() { if(this.game.input.activePointer.isDown && !this.game.scale.incorrectOrientation) { if(!this.hasMoved) { this.ctx.moveTo(this.game.input.activePointer.x,this.game.input.activePointer.y); this.hasMoved=true; } else { this.ctx.lineTo(this.game.input.activePointer.x,this.game.input.activePointer.y); this.ctx.stroke(); } } if(this.game.input.activePointer.justReleased) this.hasMoved=false; }
-
I'm trying to make it to where the user can draw lines on the screen, with a bitmapData object. When I try to draw on the screen, I get a 404 error, and I'm not sure why. Any help is appreciated! Here's my code: var game= new Phaser.Game(720,1000,Phaser.CANVAS, 'game_div');var play={ preload: function() { this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.setShowAll(); game.scale.refresh(); this.game.load.image('nope','assets/wrong.png'); }, create: function() { this.bmd=this.game.add.bitmapData(720,1000); this.ctx=this.bmd.context; this.ctx.setLineWidth(5.0); this.ctx.setFillColor(255,0,0,0); this.game.add.sprite(0,0,this.bmd); this.game.stage.backgroundColor='#ab54c1'; this.game.scale.forceOrientation(false, true, 'nope'); }, update: function() { if(this.game.input.activePointer.isDown) { this.ctx.lineTo(this.game.input.activePointer.x,this.game.input.activePointer.y); } }}game.state.add('play', play);game.state.start('play');
-
Hello, I'm trying to make a simple game based on tilemaps and I have a problem. When I move my character (to the right for example), I can see black lines on the border of the game ( link here ). Same thing happens on the Sci Fly example ( link here ). My tilemap has a size of 100x100 tiles and a tile size is 16x16px. You can move the "player" with arrows. Here is my code that create the level : Level.prototype.preload = function() { console.log("Level - preload"); this.game.load.tilemap('zelda_tilemap', 'images/game/zelda_tilemap.json', null, Phaser.Tilemap.TILED_JSON); this.game.load.tileset('zelda_tileset', 'images/game/zelda_tileset.png', 16, 16); this.background.preload(); this.player.preload();}Level.prototype.create = function() { console.log("Level - create"); this.map = this.game.add.tilemap('zelda_tilemap'); this.tileset = this.game.add.tileset('zelda_tileset'); var layerBackground = this.game.add.tilemapLayer(0, 0, this.game.camera.width, this.game.camera.height, this.tileset, this.map, 0); this.background.create(layerBackground); this.player.create(); this.game.camera.follow(this.player.sprite); this.game.camera.deadzone = new Phaser.Rectangle(120, 80, 400, 200); this.game.camera.focusOnXY(0, 0);}Level.prototype.update = function() { this.player.update();}Thank you.
