Search the Community

Showing results for tags 'graphics'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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





Found 175 results

  1. I'm using a graphics object to draw a filled polygon. The graphics is updated in "render()" since the polygon changes shape slightly each frame. I'm doing the actual drawing semi-manually since I'm applying a custom smoothing function to the polygon. When the number of vertices of the polygon increases to hundreds, fps starts to drop. Not all the points are visible to the camera, though, but phaser is not able to make use of this given that I'm specifying all the points on the smoothed polygon in render(). The solution that comes to mind is to manually intersect the polygon with the camera's view port, eliminating all the polygon parts that are not visible. Can phaser make my life easier somehow?
  2. I am trying to create hexagon grid in Pixijs, but currently I have hit strange problem. What I want to do is first create the hexagon as sprite texture and then render the tiles as sprites. This is all great and drawing hexagon works but there is some margin between the rows that causes the problem. Game.prototype.getHexagonTexture = function(cX, cY, size) { // Draw hexagon g = new PIXI.Graphics(); g.beginFill(0xAA00AA); g.lineStyle(1, 0xFFAAFF, 1);; g.moveTo(cX + size + Math.cos(0), cY + size + Math.sin(0)); for (var i = 0; i <= 6; i++) { var angle = 2 * Math.PI / 6 * i, x_i = cX + size * Math.cos(angle), y_i = cY + size * Math.sin(angle); g.lineTo(x_i, y_i); console.log(x_i, y_i); } g.endFill(); g.drawRect(-size, -size, size * 2, size * 2); g.boundsPadding = 0; console.groupEnd(); console.log('Bounds', g.getBounds()); return g.generateTexture();};
  3. 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!
  4. I am drawing a rectangle around the tile my mouse is over, but it draws a new rectangle every time I go over a new tile. How could I make it update the position of the rectangle instead of drawing a new rectangle every time? if(msX >= tileX * tileWidth && msX <= (tileX + 1) * tileWidth && msY >= tileY * tileHeight && msY <= (tileY + 1) * tileHeight) { var g =, 0); g.lineStyle(2, 0x000000, 1); g.drawRect(tileX * tileWidth, tileY * tileHeight, tileWidth, tileHeight); }
  5. This is an awesome program to make game art. Surprisingly I couldn't find it posted here before.
  6. Just a FYI: Line drawing fails if you mix it with other graphics commands. The code snippet below will draw the circles but the lines vanish. Simple fix is to draw the lines then iterate again to draw the circles, but this combined drawing should work too. graphics.lineStyle(1, 0xffffff, 1); for (var i = 0; i < c.control.length; i++) { var x = control[i].x; var y = control[i].y; if (i == 0) { graphics.moveTo(x, y); } else { graphics.lineTo(x, y); } graphics.beginFill(0xafafaf); graphics.drawEllipse(x, y, 3, 3); graphics.endFill(); }
  7. I am trying to animate drawing a line following the method here. I found out that when lineTo method is called to the same position line dissapears. graphic.lineTo(100, 100); graphic.lineTo(100, 100); Take a look at this jsbin.,js,output Is this intended behaviour or a bug?
  8. 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!
  9. I am adding Sprites dynamically by using a timed event. I can't find a way to bring a new graphics (a flooded rectangle) above the sprites generated. The sprites are always on top create() { var graphics =, 0); graphics.beginFill(0xFFFF0B); graphics.drawRect(0, 0, windowWidth, 70); graphics.endFill(); timer =, addSprite, this); } addSprite() { sprite= game.add.sprite(20, 30, 'sprite'); } Any help??
  10. Hello everyone, I am very new to phaser. I am trying to make a jigsaw puzzle with it. Firstly I wanted to use "Graphics" to draw a irregular pieces of the puzzle. But it doesn't support "graphics.quadraticCurveTo( )". So I turn to use "bitmapdata" to draw the pieces. The problem is, I can't fill in the irregular shape with image. The image is filled in the whole bitmapdata space, overpasses the shape i drew. Is there any methods that can let me draw an irregular shape and fill it with image? Thanks in advance for any help!
  11. I need these features if I'm to use Pixi to be able to finish a js library I'm making, which uses primitives allot (e.x. Pixi Graphics). a ) or "dashed strokes" is straight forward, I just need to be able to created dashed strokes on PIXI Graphics objects (see here: ) b ) or "complex shapes" is just complex shapes as refered to here: , which would be nice to have but is not as important as the others. c ) or "gradient fill", especially radient gradient fill, as seen here: d ) or "compositing" (globalCompositeOperation), as explained here: And I'm wondering about three things: 1. Is any of this built into Pixi right now? 2. If not built in, is there a hack I can use? 3. If neither, will it be supported eventually? Thanks
  12. I am adding new sprites in timed event ( I was trying to draw a filled rectangle above these sprites. I cannot figure out how. The sprites are always displayed on top Any help??
  13. Greetings, developers! I have the following situation here: I'm not using any of Phaser tools to manage game stretch logics and I have a problem with Phaser buttons right now. Guess that Phaser don't know that touch coordinates are related to old canvas style while it was stretched. The resizing logic is following: function ResizeGame(){ var Ratio = 960 / 640; var NewWidth = window.innerWidth; var NewHeight = window.innerHeight; if (NewWidth > NewHeight) // LANDSCAPE { = NewHeight + "px"; = NewHeight + "px"; NewWidth = NewHeight * Ratio; = NewWidth + "px"; = NewWidth + "px"; //GameInstance.scale.width = (960 / (NewHeight * Ratio)); //GameInstance.scale.height = (960 / (NewHeight * Ratio)); } else //PORTRAIT { NewHeight = NewWidth / Ratio; = NewHeight + "px"; = NewHeight + "px"; = NewWidth + "px"; = NewWidth + "px"; //layer.scale = 960 / NewWidth; } = window.innerWidth * 0.5 - NewWidth * 0.5 + "px"; = window.innerHeight * 0.5 - NewHeight * 0.5 + "px";}The button boundaries are offset. I don't know what to do. Changing camera view boundaries not works. Changing world boundaries also has no effect. Tried using Phaser to do that stuff but not found the way how to do it. The next question is about locking mobile swipes and touches to prevent scrolling of the page while playing. The stretched game has some parts of document body visible. And when player's finger touches that region the browser scrolls content so url bar appears.. Its awful. Tried doing that: /* Locking mobile browser non-gaming manipulations */document.body.addEventListener("touchmove", function(e){ e.preventDefault(); return false;});document.body.addEventListener("touchstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("selectstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("dragstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("contextmenu", function(e){ e.preventDefault(); return false;});But it doesn't work.
  14. hi guys, i'm Laz, artist from stellar-Ø a small indie game team, we make games and do freelance as needed. i am quite proficient on many stuff gamedev-related, quite a generalist artist, i can do various style/themes. My favorite part on game graphics are pixel art animation, GUI, character design. currently i'll just focus on GUI design. some things to make things clear: at least 30/50% front payment before start working, currently not accepting profit sharingusually i rate per screen design, including the final assets, if you prefer hourly rate, let me know.price depends on project timeframe, theme/style, compexity, budget, poke/PM me ( i'll be open for discussion. here is my GUI portfolio, for more/ better res, visit here. thanks for checking in!
  15. is it possible to use: .input.enableDrag()on a graphic shape ? what should be the best way to drag graphics ? i'm using Phaser 1.2. Thanks by advance.
  16. Hi all. I'm a beginner Phaser user and game developer. I'm working on a game where I use the Phaser.Graphics class to draw a line. At some other point in the game I need to get the lines world coordinates, which I cannot seem to get in any simple way. I have probably missed something so I'm sure my workaround is far from the best way to do this. For sprites it seems like I can do mySprite.x but not with the graphics object. After debugging in Chrome I found that the only place I could find the information I was looking for was through myLineGraphicsObject.graphicsData. I'm using TypeScript and I had to add this to the definitions file in order to access it. var gd = myGraphicsObject.graphicsData;var x1 = gd[0].points[0];var y1 = gd[0].points[1];var x2 = gd[0].points[2];var y2 = gd[0].points[3]; I would be grateful if somebody could point me in the right direction. Thanks!
  17. Hello! I need to set a graph of camera movement. I tried with this code but it does not work well this.lifeGraphics.lineStyle (10, 0x33FF00); this.lifeGraphics.moveTo (30, 460); this.lifeGraphics.lineTo (60, 460); this.lfeGraphics.fixedToCamera = true;
  18. I'm still new to Phaser and have a concern of best practice for loading up images with my main concern being performance. I understand how to load up images and sprites (for characters and such), but I'm building a game much like Scrabble and I created a spritesheet containing all of the images I would need. I was able to load up the board for the game, but now I want to load up the rest of the images in that spritesheet. The only option I can think of is to cut up the spritesheet in PS and have individual images to load up separately; I don't think a tilemap would work in my situation. I was hoping to have one spritesheet (png) to load and just tell Phaser where all of the images are in that spritesheet. I would think this would be something of a best practice instead of loading each image individually. I'm also experimenting with the Tiled app and generating the tilemap data and then loading whatever individual images I need to load; each image would need to be draggable. What other options are available to me?Is there a plug-in that can extend the functionality of the game.load.image function?What's the best practice in this kind of game scenario? Thanks in advance
  19. Hi all, I'm currently trying to learn coding and Javascript using Pixi to make a clone of Colour Flood. I am having trouble extending the Graphics class (sorry I am unsure if class is the right word) in Pixi. I have two JS files, one called game.js for the game and one called token.js for the token class. What happens is when I run the program on my web server, I get an error that says "Cannot read property 'points' of undefined." This occurs right as I try use the drawRect function. Here's the code for my token function Token (color) { this._R = Math.floor(color/0x10000); this._G = Math.floor(color/0x100-this._R*0x100); this._B = color - this._R*0x10000 - this._G*0x100;}Token.prototype = Object.create(PIXI.Graphics.prototype);Token.prototype.constructor = Token;//Find a smooth transition to the next colourToken.prototype.findTransition = function(color, steps) { this._nextR = Math.floor(color/0x10000); this._nextG = Math.floor(color/0x100-this._nextR*0x100); this._nextB = color - this._nextR*0x10000 - this._nextG*0x100; this._tranR = (this._R - this._nextR)/steps; this._tranG = (this._G - this._nextG)/steps; this._tranB = (this._B - this._nextB)/steps;};I haven't really done much with it yet. Here's the code for my game: var viewWidth = 640;var viewHeight = 420;//Make a pixi Renderervar renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);renderer.view.className = "rendererView";// add render view to DOMdocument.body.appendChild(renderer.view);//create a new instance of pxi stagevar stage = new PIXI.Stage(0x000000);//Create an Array for the Squarevar squareArray = [];var totalSquare = 100;var colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00];for (var i = 0; i < totalSquare; i++) { var color = colors[Math.floor(Math.random()*4)]; var Token = new Token(color); Token.beginFill(color); var layer = Math.floor(i/10); Token.posX = viewWidth/11*((i+1)-(layer*10)); Token.posY = viewHeight/11*(layer+1); Token.drawRect(Token.posX, Token.posY, 10, 10); stage.addChild(Token); squareArray.push(Token);}renderer.render(stage);If you need any more info let me know. Thanks for the help! Lenny
  20. jonbon

    Retina Graphics

    Hi, Does Phaser support supplying high resolution graphics (@2x) for retina displays? I cant find any information on this. If so, how do you go about implementing this? Thanks
  21. Hi, I'm new to this amazing framework and I'd like to thank Rich and every contributor for this excellent work. People loving old good Ataris can't be bad ! As I'm learning Phaser, I try to port some tiny games I formerly coded for my son without any framework. Thus, I'm working on a prototype of starwars/star raider-like game : (no framework, canvas 2D, no preloader -reload until the cannons display, CTRL = fire) My yesterday attempt with Phaser is here : (no cannon yet) As you can see, I use sprites for the starfield here whereas I used only fillRect() in the canvas 2D version. I know Phaser is very effective in sprite management but I wonder if it would be better to use graphics to draw and render the starfield. Is it more expensive to draw and animate many small rectangles or circles drawn with graphics or to set sprites and use their body physics ? Considering I will have to use graphics to draw the lasers, maybe is it a good option to draw the starfield with graphics too ? In general, do you advice to opt for sprites or for graphics rendering in case where both could be used for quite the same result ?
  22. Dear HTML5 Game Devs! My girlfriend (design and art student) is looking for design jobs for next few weeks. She can create one full set of graphics for game in around 1 week. All designs are game optimized and scaled to your desired size by me. Prices are as follow: Simple graphics - $100 prepaid (best for simple games with basic graphics - non animated games) Regular graphics - $200 prepaid (best for most simple html5 games - simple animations and/or effects) Advanced graphics - $300 prepaid (best for advanced and/or complex html5 games - animating sprites and/or many effects) We can create any style of work - all orders come with Adobe Illustrator work files (AI)! If you like graphics from some place - let us know and we will create graphics in same style for you! White Label Game creation with exclusive resell rights - extremely affordable! Please contact us for more details! (for limited time only - using Construct 2) FAQ: -Graphics are usually delivered within 7 days from order (Advanced graphics/changes can take 2-3 days extra) -There can be slight delays - you will be informed about estimated TAT on the beginning of creation process -Payments accepted by PayPal and Wire only. Prepaid offers comes with satisfaction guarantee (as many changes until customer is satisfied - changes might extend delivery time depending on complexity)! -All graphic orders contain complete sets - sprites and backgrounds! -Sorry, we accept only prepaid offers now - this is to reserve spot and keep our costs low -You own full rights to graphics - including exclusive reseller right! To order or if you have questions - contact us: contact@funkyy.comSamples of our work:
  23. Hey guys, Hopefully my last lame thread topic (getting over the noob stage...), but I was wondering what everyone's attitudes and methods are to game sprites or the characters, backgrounds, objects etc. What program do you use to create your sprites and why? I'm in two minds at the moment. I'm thinking either photoshop or Illustrator, but leaning more towards Illustrator so I can create scalable graphics cause just because you think a sprite would look good at a certain size, then you code it and demo it and eek.... Too big or too small. With the vector graphics of Illustrator, I can resize the images perfectly to any size I want and still keep a great quality. Plus with layers, I can make a base and then add different layers for different stages of movement. Or is that all wrong? Thanks in advance!
  24. I use Graphicsgale for creating pixel art. It has many cool features, but that one, that is missing for me, is object selection. Everyone, who have used flash, will understand - after drawing a simple object, like ball or more complex character, after conveting it to symbol or movieclip, whenever you click at this image, you can drag and edit it, cause it's properties are saved in memory. Is it possible to save object like this in graphicsgale or another bitmap graphics tool(free, paid)? Cause it takes much time to select area of object each time, when working with 2 or more on the scene. I'm looking for something like quick selection tool, but better are saved objects - for bitmap graphics!
  25. People say it pretty often. You have to make finished, polished games to deal with publishers. I have also seen this trend to make small, simple games, with well refined graphics. Like mini-games. Of course, there are a few big complex games, and they are the ones that people love the most. I have made a few games, but I must say what they lack is nice graphics and polish. Now, considering that I'm pretty new to making html5 games, how will I learn to make "finished and polished" games? Should I too make a lot of somewhat boring mini-games and clones before I become good at making "finished and polished" games? I have noticed that making elements unrelated to the game take much more time and code to build. I'm not even talking about the graphics. I have started to study Inkscape as people advised. Didn't use it for any game yet. I have a few dream projects at prototype stages, but I'm not sure if I should if I should work on them, since I am scared to somehow break them. What should I do? Do you recommend making any kind of game (for myself at least) to make me better at polishing and graphics?