Search the Community
Showing results for tags 'Draw'.
Found 22 results
-
Hi all I'm CodingButter I have been developing a 2d game engine from scratch. I wanted to get some opinions about the tick and render loops. I currently have my render loop executing as fast as requestAnimationframes will let me. And I've also trigger my ticks with setTimeout. I've noticed by doing this I am consistently getting 200 ticks per second. I was wondering what the drawbacks would be for using setTimeout in this way. I personally don't seem to see anything but improvement to my game behavior. but I'm sure there is something big i'm overlooking performance wise. Any thoughts. Also Excited to find a community to chat with. Codesandbox.io Link Twitch Discord
-
I couldn't seem to find a clear solution online that would apply to me anywhere but if this has been discussed elsewhere feel free to link me there. My game's fps dips after running for only a few minutes. Shortly after my os slows down because my game uses up all the memory of the browser. I suspect the culprit is how I currently draw sprites because my "game" currently only involves placing a few sprites/text on the screen. I have my custom game framework setup to only really use Pixi.js primitives like PIXI.Texture, PIXI.Sprite, PIXI.Text, etc. My Spritesheet class currently contains a single texture attribute that refers to the texture of the entire spritesheet. When it's time to take a single sprite from the Spritesheet, the Spritesheet object creates a copy of its texture attribute and creates a new PIXI.Sprite object using that copy. I create a copy of the texture because changing rect of the Spritesheet's texture attribute would affect all sprites that use that Spritesheet. Drawing involves only adding the PIXI.Sprite object to the stage and clearing just removes all children from the app stage (I don't currently use containers). Here's the method that creates a sprite from the Spritesheet: SpriteSheet.prototype.getSprite = function(index_X, index_Y){ let rect = this._getRectFromIndex(index_X, index_Y); let texture = new PIXI.Texture(this.texture); texture.frame = rect; return new PIXI.Sprite(texture); }; this._getRectFromIndex is just an internal calculation that returns the PIXI.Rectangle object for the frame Here's the draw method: Renderer.prototype.draw = function(child){ this.app.stage.addChild(child); }; And here's the clear method: Renderer.prototype.clear = function(){ this.app.stage.removeChildren(); }; I'm pretty sure creating new Textures/Sprites every frame and only clearing the stage is the cause so I'm wondering what's the best way to improve performance with what I've given. Would just iterating and destroying these textures in clear every frame suffice? -
Hi there, I have had a good look in the forums for this before asking, but I cannot seem to get my simple HTML canvas to run properly on my iPhoneX. My URL is here: http://lindsay.thefusion.works/ Initially I was trying to build a kaleidoscope (8 triangles making a square) but setting one triangle and then using the _cacheContext.rotate for the other 7 triangles meant that my iPhoneX was struggling to hit 3 frames per second. My old Galaxy S6 phone will render it flawlessly. The iPhone X will get really hot within a minute so it is definitely working overtime to try and keep up with a 3 year old Galaxy phone. This is in both Safari and Chrome on the iPhoneX. I have tried various optimisations and caching tricks but still cannot get the iPhone X to better than 3 frames per second. Does anybody have any hints or ideas on anything I can try to get my kaliedoscope working on iPhones? Thanks in advance, Lindsay.
-
Hello, what i try to do is that my user will be able to draw on the game a figure, such as a rectangle, then I use the coordinates of the rectangle that he draw and when some sprite enter to that area send a message. How can i make that my user whit the mouse can draw over the game?
-
Hello. I was curious about the system implemented in some games, in this case applied to 2d only. I am talking about the creation a character body by drawing. Can that be applied to Phaser? An simple example would be something like simply drawing a 2D polygon with a "virtual marker" and then that draw would become a phyics body ( probably getting the borders of the draw and setting making a sprite out of it). I suppose I had to implement a way for the user to draw, then get the draw as image, somehow set its borders as I previously said and then load the sprite to the game. Am I thinking correctly? Can someone clarify me?
-
I was wondering is there a Phaser visual subtype on which I can manipulate its alpha/transparency without redrawing it? Phaser.Graphics is ok but I need to redraw it and currently I am lost in my own code I have the graphics already drawn, it would be a lot easier to just change its alpha value. Sprite/Image does not seem to have alpha value. Is there some plug-in or perhaps some known hack?
-
Hello, I've been following a Phaser spring example and I've been trying to remove the overlay sprite it draws on my circular physics body (I assume it adds this when I call body.setCircle(5)). Does anyone know how to remove this? I don't want to remove the body, I still want the physics, I just don't want the extra debug drawn sprite. Thanks
-
Hello guys, I got an issue when I want to implement a drawing tool, if I move the pointer slow, it can draw a linear line, but if I move the point fast, it will have the gap between my 'brush' dot. I have attached a screenshot for this issue. My planning solution is: when the pointer isDown or is dragging, start drawing. However, it seems there are not 'dragging' or 'moving' method for input.pointer. Is there any other ways that can solve this problem? Thank you very much.
-
Hey guys, I just start to phaser. I tried to develop a game that allow user using their fingers to draw/paint on some particular area of the mobile screen. So my solution is to create two layers, one is the background tile sprite, and the other one is sprite that allow user to draw on it. Here is my code: background = game.add.tileSprite(0, 0, 1080, 1920, 'background'); game.add.sprite(x/2, y/2, 'tree'); bmd = game.add.bitmapData(game.width, game.height); bmd.addToWorld(); game.input.addMoveCallback(paint, this); However, when I tried to draw. I cannot particularly draw on the area of sprite. So, is there any ways that can make the bitmapdata only apear on the sprite instead of the whole background?
-
Is there some plugin or some tool inside Phaser that can help me draw a table of data. I have this image: As you can see I have two arrays of data and they are drawn in Phaser text field as string, but since the numbers inside are of different string length points array is longer than errors array and therefore cut if over the screen boundaires. How can I draw a table with this data, 3 rows by 15 columns? Also could I possibly create such plugin for Phaser?
-
I have a game in flash that uses vector rectangles with different colors and sizes. The rectangles have round corners and white outline stroke of 4 pixels. What is the best way to implement these rectangles in a Phaser game? I might have to use 6 different colors and 10 different sizes (both horizontal and vertical). Is there anything like 9-Slice-Scaling, that we have in Adobe Flash? In case I'm not clear in explaining the round rectangle, I'm talking about the shape you get by using this css style in html: div { width:300px; height:100px; background:#00CC00; border:3px solid #FFF; border-radius:20px; }
-
Hello everyone, in my application, I normally only need to render the 3D view after the user has changed some settings of the confugration or the view is being used (with either the mouse , finger or keyboard) the rest of the time no rendering is needed. But how can I know if Babylon is doing something that needs? For example: Can I look somewhere if the camera has stopped moving? (Especially when it's deaccelerating) Or an animation is running? Thanks for your answer! Kevin
-
Yello, newbie here. My short story: I've been (re)watching tutorial series on web development and programming for.... about 4 years...I end up quitting due to distraction/preoccupation with other games, then find myself grinding tutorials when I have the urge to re learn(which is once a month or so). Now, since I'm out of school and no longer addicted to any particular games, I've been getting some hands on experience for the past couple days(FINALLY). I still struggle with wondering what to write but that's not the point. -End of story- Something I've always struggled with is counting/drawing/placing/calculating pixels in sprites/images whether it would be trying to design/positioning a webpage using css or drawing/calculating x&y of movement and sprite drawing. What do I mean by counting/drawing/placing/calculating pixels? Pixels are really/extremely small.. I don't understand how developers can estimate/count/place them. Saying things like "hmmm, 30 pixels down and 100px right should be right about here(pointing with their cursors)", knowing a relatively close position of where their image is going to be placed. How is this possible? I really really can't imagine counting 30 pixels across and 100 down... I'd probably end up being off by a lot... (From a tutorial video) Another example is moving a sprite 5 pixels right when a player press the right arrow key.(I know how the function works) but..... what does 5px left, look like? How do developers know what 5px left looks like? Again, I can't imagine counting 5px to the left... I don't think I could keep track of counting 5 pixes (microdots) to the left... Anyways, you get the point. I'm not asking for a specific answer of " Well, 5px left or 100px down is about (x) inches" . I'm asking, How do I count pixels? Sorry if this is somewhat confusing.
-
What is the best way to draw multiple times into a PIXI.Graphics and being able to apply alpha or blend mode to the result and have a unique shape? This shows the issue: http://codepen.io/anon/pen/zGLyEW This is a failed attempt: http://codepen.io/anon/pen/mJjaGd Thanks! chr
-
What's the right way to draw an image pixel by pixel with bitmapdata? Assuming I'm getting the data from a matrix. var image = [['rgb( 0, 0, 0)', 'rgb( 0, 0, 0)', 'rgb(255,255,255)', 'rgb( 0, 0, 0)', 'rgb( 0, 0, 0)'], ['rgb( 0, 0, 0)', 'rgb( 0, 0, 0)', 'rgb(255,255,255)', 'rgb( 0, 0, 0)', 'rgb( 0, 0, 0)'], ['rgb( 0, 0, 0)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb( 0, 0, 0)'], ['rgb( 0, 0, 0)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb( 0, 0, 0)'], ['rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)', 'rgb(255,255,255)']];var bmd = game.make.bitmapData(game.width, game.height);for (var x = 0; x < image.length; x++) { for (var y = 0; y < image[x].length; y++) { bmd.?????????? }}bmd.addToWorld();
-
Hello, I'm wrapping up a realtime multi-user drawing app using elements from an example joshcamas posted recently. I'm not including the GUI and much of the server calls in my example below, so running this script wil provide errors, but the whole script is 3x as large. However, if someone might help me to accomplish 2 things, I would be grateful. 1. Draw on a plane using a dynamic texture. 2. The base color of the plane is a color3 white (or other.) Here's the example: Thanks, DB
-
Hey, I was wondering if it's possible to use either CSS, Canvas, HTML or JavaScript to draw elements for a game (like blocks, characters, etc..) or would I have to use a pre-made image. If this has already been answered, please direct me to the proper thread/website. I'm self-taught so a lot of examples and "dumbing down" is greatly appreciated! Thanks again in advance.
-
Hi, I have been using Pixi.js for a few months now and I am wondering if it is possible to erase lines drawn on a PIXI.Graphics object. Basically I have some functionality where I am able to draw on a Graphics object on a Sprite using mouse and touch events. My issue is that the sprite has a texture which is not just 1 color. If the texture was blue I would just draw with blue color to "erase" the lines i had drawn earlier with another color. If I was not using Pixi.js I could use the functionality shown here: http://cssdeck.com/labs/jwvajze4/ This eraser functionality is excactly what I need, but I need it in Pixi.js. Is it possible to adapt this same functionality in Pixi.js? Any suggestions or tips would be great. -
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.
-
Hello. I am currently developing a game with Phaser. What is the best way to draw a sprite in multiple places at the same time. Let say, I want to create a Snake-clone. My usual approach is to have a spritesheet which represents a head, body, and tail. I will then draw the part dynamically, depending on the current position, state, and length of the snake. How do I achieve this in Phaser? Creating tons of sprite might instantly solve the problems (create one sprite everytime the snake eat, and make it follow the head movement). However, I suspect the multiple sprites approach will mess up game performance. Is there any way I can create a sprite or game object with customized rendering logic? (not just draw this sprite here with given scale, position, and rotation angle). Another note : The sprite won't need any physics feature, so if the solution will messed up physics, it is fine. Thank you.
-
I have one of these things @pathGraphic = @add.graphics 0, 0And I drew lines on it @pathGraphic.lineStyle 1, 0xddd000, [email protected] 2, [email protected] 22, 55I need to clear it out and draw new lines on it. How do I do that? I don't want to delete it and create a new one, that's probably a waste of memory. Am I using the right thing to be drawing lines? Most of the methods I'm using aren't even in the documentation for Graphics http://docs.phaser.io/Phaser.Graphics.html Why is that? (Sorry for the code not being Javascript, but I think you get the point)
-
Space Flight Hi! We just finished up another game, this one is called Space Flight. Use your finger to trace a path from incoming ships to the appropriate colored stations. As the game progresses, you will get more ships, stations, and unique upgrades that make managing your space port easier, but more challenging at the same time! Manage the universe's busiest space station! Help Mr. Warply figure out how to land all the ships coming to land at his stations. Several different stations, ship colors and additional challenges await you as you progress! Can you master this skill? Please let us know your thoughts! Play Space Flight Right Here! Play Space Flight Right Here!
