Search the Community
Showing results for tags 'drawing'.
-
Hi Everyone, I want to create same thing like this in phaser 3 using graphics library or by any other way. I cannot find compatible code for replacement in graphics library. Any help will be highly apprecited https://codepen.io/kangax/pen/dajwE Many Thanks
-
I'm using Phaser2 to make a simple game. When I set the game width and height to these: var Screen_Width = window.innerWidth * window.devicePixelRatio; var Screen_Height = window.innerHeight * window.devicePixelRatio; The game runs really slow on my iPhone. What is the problem?
-
Hi, I'm a relative noob to javascript and Phaser, and I'm having an issue coding my first proper game. I'm using Phaser version 2.6.2 and the latest version of Chrome browser. I'm asking the user a basic maths question, but when I draw the buttons for the user to click they appear but aren't clickable. Here is the console error: And here is the code I believe to be causing the error: game.add.button(50, 250 + i * 75, "buttons", this.checkAnswer).frame = i; And there is also this bit of code to draw the button mask: this.buttonMask = game.add.graphics(50, 250); this.buttonMask.beginFill(0xffffff); this.buttonMask.drawRect(0, 0, 400, 200); this.buttonMask.endFill(); numberTimer.mask = this.buttonMask; Any help would be appreciated, if you need any extra information to help me I'll gladly provide it. Been staring at this problem for over a week and I just can't figure out what's wrong, I hope it's something simple I'm doing wrong. Thanks
-
Hi, I have been working on my first full game and decided to try a snake clone. I haven't followed any kind of tutorial and have just been trying to get to grips with the framework. I am however having a few issues and have been stuck for a couple of hours to try and fix a couple of annoying bugs. The first main issue I have with my game is that collisions don't seem to be firing correctly. I have tried to set one up when the head of the snake collides with any of the tail elements which just restarts the game state for testing purposes. This seems to however try to trigger another function which should only happen when a player collides with food. I am guessing I need to setup my collision handlers differently in order to fix this. The other bug is that when a bit of food has been eaten a new sprite it created but just before it does it gets added randomly to somewhere on the screen then disappears but I can't work out why that would be. I setup a git repo of my project so far on github and it can be found here: https://github.com/jaymeh/phaser-snake If someone could offer some advice as to what I can do to fix this I would be very grateful. Thanks
-
Hi this is my demo for bitmap drawing. But my problem is it is pixelated. Please help me to get it smooth. Sample image below. thanks in advance.
-
If your old like me you remember spending lots of time with the Spin-Art toy. Spinning, painting and mess making. Here is a simulation of that fun on the web. Written using HTML/javascript, Knockout.js, Bootstrap and Paper.js Check it out at http://whirlart.com
-
Hi everyone! Phaser version: 2.4.3. My intention was to render the cellular automata generated map on the screen. To do this I created a BitmapData object and used a basic set of setPixel(...) loops. Everything works but it took 8 seconds when the 'immediate' flag is true. And when the 'immediate' flag is false the map image just won't be visible at all while the console.log(...) says everything is finished so there's no freezing. Thus, the problem is in bmd.update(...) in the end that has no effect at all. Tried filling the entire bitmap with the white color before the loops: the entire bitmap is white but there's no trace of setPixel calls. create: function this.bmd = this.game.make.bitmapData(automata.width, automata.height);for (var i = 0; i < automata.width; i++) { for (var j = 0; j < automata.height; j++) { if (automata.cellmap[i][j]) this.bmd.setPixel(i, j, 255, 255, 255, false); }}this.bmd.update(0, 0, automata.width, automata.height);var img = this.bmd.addToWorld();img.smoothed = false;img.scale.set(2);
- 1 reply
-
- 1
-
-
- bitmapdata
- update
- (and 2 more)
-
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
-
I am using this code: var sp = new phaser.Point(frmX, frmY + halfCupboardDepth + thickness), mp = new phaser.Point(frmX, frmY), ep = new phaser.Point(leftWallShiftX, frmY); frnConstr.Utility.drawBezierCurve(graphics, sp, mp, ep, 1, borderColor, 1); ep = new phaser.Point(frmX, frmX, frmY + halfCupboardDepth + thickness * 2); mp = new phaser.Point(frmX, frmY + thickness); ep = new phaser.Point(leftWallShiftX, frmY + thickness); frnConstr.Utility.drawBezierCurve(graphics, sp, mp, ep, 1, borderColor, 1); where: drawBezierCurve() is: drawBezierCurve: function (graphics, sp, mp, ep, borderWidth, borderColor, borderAlpha) { graphics.lineStyle(borderWidth, borderColor, borderAlpha); graphics.moveTo(sp.x, sp.y); graphics.bezierCurveTo(sp.x, sp.y, mp.x, mp.y, ep.x, ep.y); } An it is drawing this drawing: Yes the green areas were drawn by other code but the above code draws just curved lines. I would like to fill the area between those two curves and the area below the second curve in-between the green area and the second curve. How can I do that? Should I draw first rectangle and then call bezierCurveTo() to make it curved. Well tried with polygon but it didn't do the trick. What do i miss?
-
I was wondering how does bezier cureve drawing works. I know there is function bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY) → {PIXI.Graphics} and probably (cpX, cpY) is the start point, (cpX2, cpY2) is the middle control point and (toX, toY) is the ending point. but I got something like: Which is the polygon I drew just before the bezierCurveTo() call. Should I create first polygon and add fill/border to it or what do I do? Are there some official Phaser examples for drawing bezier curves?
-
1. How can I draw closed polygon like the image above but without the diagonal black line that creates/finishes the polygon? 2. Or should I use Phaser.Polygon function at all? Is there some better solution? 3. Is it possible to create rectangle with mask smaller than the rectangle creating the image above? How would I apply border to this solution?
-
Hi guys, I´m working on simple Connect-the-dots game (there are dots on the screen and you have to join them with mouse in order to get some image) and I´m trying to implement pencil, which will draw on canvas. I also need functionality where all what I´ve previously drawn will change the color when the image is complete, that means I need to preserve created data somehow. I´ve already tried multiple solutions I found here and around the internet, but nothing seems to work as I need. I´ve tried this: 1) Drawing with bitmapdata Basically this solution: http://phaser.io/examples/v2/bitmapdata/copy-bitmapdata, the problem is dots aren´t close enough each other when you move mouse fast and also I cannot access previously drawn data in order to change their color. 2) Drawing with Phaser.graphics this.game.input.onDown.add(this.startDrawing, this); this.game.input.onUp.add(this.stopDrawing, this); startDrawing: function(pointer) { this.drawing = true; this.graphics = this.game.add.graphics(); this.graphics.beginFill(); this.graphics.lineStyle(4, 0xFFFFFF); this.graphics.moveTo(pointer.x, pointer.y); this.game.input.addMoveCallback(this.onDraw, this); }, onDraw: function(pointer, x, y) { if (this.drawing) this.graphics.lineTo(x,y); }, stopDrawing: function(pointer, x, y) { this.drawing = false; this.graphics.endFill(); this.game.input.deleteMoveCallback(this.onDraw, this); }, Here I`ve experienced some serious drawbacks. First, this solution doesn`t work at all in Opera (also I`ve noticed weird behaviour of this example in my browser - the shapes are just blinking or you cannot see them at all) and in other browsers it looks like shapes are closing themselves automatically - that means shape is after each step closed (it is always polygon) and I cannot make path just from the lines - is it correct behaviour of the graphics class? 2) Drawing directly to canvas context through bitmapdata Currently I ended up with this: this.bmd = this.game.make.bitmapData(this.game.width, this.game.height); this.bmd.addToWorld(); this.game.input.onDown.add(this.startDrawing, this); this.game.input.onUp.add(this.stopDrawing, this); startDrawing: function(pointer) { this.drawing = true; this.bmd.ctx.beginPath(); this.bmd.ctx.lineWidth = 10; this.bmd.ctx.moveTo(pointer.x, pointer.y); this.game.input.addMoveCallback(this.onDraw, this); }, onDraw: function(pointer, x, y) { if (this.drawing){ this.bmd.ctx.lineTo(x, y); this.bmd.ctx.stroke(); } }, stopDrawing: function(pointer, x, y) { this.drawing = false; this.bmd.ctx.closePath(); this.game.input.deleteMoveCallback(this.onDraw, this); }, This solution seems to work only in IE, in Firefox and Opera nothing is shown. Could you please provide me some advices how to solve my situation? What is the best way to implement pencil-like behaviour in Phaser? I`ve already spent whole afternoon on this - without usable solution. Thanks in advance!
-
Hi, Recently, I was working on this artificial neural network that read emotion from human drawing in real time. Here is an interactive demo link. http://www.enteractive.space/alice/ It evolves everyday. You can also teach her, currently over 10,000 people have their drawings to teach her. I made a small library of it. http://www.enteractive.space/alice-gallery/- 4 replies
-
- 2
-
-
- artificial intelligence
- artificial neural network
- (and 5 more)
-
Hello to all Phaser Lover, Would you mind guiding me the way to fill the red color inside the image shape. Thanks you in advance!
-
I try to create a painting tool that makes it possible to paint on a bitmapData texture. So far that works quite well. But I also want to have soft-edged tools like airbrushes. For that I use a tinted image that uses a radial alpha-gradient. (middle solid, going transparent to the outside) This works quite well, but with a few colors I get weird effects on the borders. When drawing multiple images over each other (like forming a line or filling an area), the borders seem to be darker. This is not visible with primary colors, but pastels make it quite visible. I tried futzing around with pixel rgba values, blending modes and a few other things, but nothing fixes it. Does anybody have any idea what causes this? Attached image for demonstration
-
Hi, We are looking for developers who have similar or would like to develop the following games. These games will be played on a multi-touch table of more than 32 touches. Number of players will range from 2 to 8. The game needs to incooperate our API. Game 1: players will compete in drawing simple shapes with both hands concurrently. Game 2: players will fill up shapes with body parts print. After printing, the players can enlarge, reduce or rotate the body prints to fill up as much of the shapes given as possible. Players who fill up the most percentage of the shape will win. Game 3: Selected player will draw something, the others will replicate including the player who drew it. The one who drew the most alike will be first and so on so forth. Game 4: The players will play an instrument each and ochestrate a song/songs. The one who play the best will win. All these games would have to be on HTML5. If you are interested in the above or similar games, feel free to contact me. Lets have a chat. Please also provide sample of games that you developed before.
-
Hello everyone! In my aplication i have done phaser game wich is cooperate with droopable and draggable gui. When i dropped element from equipment div to div with phaser game screen, console allert me element id from data base. Now i want to draw element in phaser game screen when i dropped it on screen div but dont have ide how. How to add elements to phaser game from java script function? Anyone have idea? How it work You can see on page http://lifetime.cba.pl when You login Login: test, password test, and them klick "graj" Maybe anyone can help Greets.
-
I'm a 2d Game Artist available for pretty much any 2d art job that you have available. You can find some examples of my work here:www.behance.net/stonewolfgraphics I'm interested in paid work for lump sum payments on a milestones or per-asset basis. If you would like to discuss a project with me please feel free to email me at [email protected] Thanks for taking a look!
-
Hello, I'm beginner at PIXI framework but I've worked with flash before, so it's relatively familiar syntax to me. I've been googling for some snippet on how to draw lines and shapes freehand. Example: http://www.wanaplan.com/en/plan/ Basically I want to click on canvas and create points for polygons. Also is it possible to draw a rectangle like it's done in photoshop and resize them by dragging them for the edge? I would be eternally grateful if someone help me learn this. Thank you.
-
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!
-
Overriding default drawing for a Roguelike FOV calculation
YardGnomeNinja posted a topic in Phaser 2
To start, I'll say, there may be a better way than what I'm thinking, so I'm very open to suggestions. I'm making a Roguelike. I have rooms with attaching tunnels, a player that can move to free spaces, the VERY basics. I've reached the point of implementing an FOV (Field of View). I've got it in place for the most part. When the map is drawn, only the visible spaces within the player's FOV display their tiles, however when it comes to updating the display I'm getting nowhere, very...very... slowly. I've tried calling my "recalculateFOV" function in the Phaser "update" state, only to be fired when the player moves, then redrawing the entire map based on the results. This is agonizingly slow for some reason I can't quite decipher and just doesn't work properly. Then I thought maybe I needed to overwrite how Phaser handles drawing to get the job done. I Googled for any help on how to go about that and came up empty. I've read a couple of Phaser tutorials on creating a Roguelike, however the ones I've found left out handling FOV. Any help or suggestions would be greatly appreciated. Thanks! -
Hi! I'm working on HTML5 drawing game. Maybe someone will be interested... It’s an online game that includes drawing and guessing certain phrases. You can play in real-time mode or send puzzles like messages. It is also integrated with most popullar social netowrks and Dogecoins payments. game page: http://puns.mobi
-
Hey guys, my name is Rick and I have been playing around with Phaser for the past few days. I am looking to build a lotto scratcher type game. I need to be able to draw directly to the mask layer. I have found a few different things on the forums that should be able to help me. Alpha Mask - Makes sense.BitmapData - Not sure how to add to this based on user input. To my knowledge, this IS my mask. Right..?globalCompositeOperation - No idea what this even is.I dont want to it be blocky like this.... http://examples.phaser.io/_site/view_full.html?d=display&f=bitmapdata+draw.js&t=bitmapdata%20draw I don't want to add circles, I want to add a stroke.I want to be able to take the path the finger, give it a width (like how you could control the brush thickness in Photoshop), and then add it directly to the mask. How would I go upon doing this, have people done this before?
-
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');
