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
    • 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 173 results

  1. Hi Myself and my friend are currently working on a game using Phaser 2.8.4 and have noticed an odd graphical glitch that we can't seem to diagnose or get rid of. As you can see in the attached GIFs when a sprite gets near to the left or top edge of the viewport it compresses and when it moves away it extends back to its original form. Those are static sprites but it seems to affect all sprites. This does not occur at the right or bottom edges of the viewport. Does anyone have any insight as to what is going on here? Thanks!
  2. Hi all, just after a bit of advice on how best to handle something like the realtime winlines below for a slot game... 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!
  3. Hi all, Just wanted to share some of my art that never got used, hope someone finds it useful, you're allowed to use it in anyways you like, commercially or not, no credit is needed, but it is appreciated haha Just made a simple blog where you can download it - I'll be regularly updating with more art. Open to ideas/requests Cheers, Andrew
  4. Greetings all - I've been working on an SVG editor and variations generator for some time, and I finally launched the beta this week - we have some really beautiful game art - over 500 of the CC0 pieces from, and 400 of the best Glitch game art pieces - and more. The editor has over 33,000 graphics including a bunch of icons and emojis - and right now I'm offering a free upgrade to pro for game developers - the upgrade URL is - with the code betauser I would love any feedback or suggestions about how to make this app BETTER for game developers! I am a long time flash dev who morphed to JS about 5 years ago, and spent a while working on my first all gamified app using Pixijs last year. I've tried to add ways to edit SVGs as painlessly as possible, as working in Illustrator for hours on end tends to make my hand hurt! But there are many fixes and upgrades I plan to make to the app, so please realize it's just a beta.
  5. var graphics =; var color = 0xffff00; var thickness = 2; var alpha = 1; graphics.lineStyle(thickness, color, alpha); graphics.strokeRect(32, 32, 256, 256);
  6. Very new to Phaser and reading as much as I can before committing to using it as my game development system. My goal is to alternate views, a bit like VR, from one eye to the other. I have done this before by setting specific colours for backgrounds (x2) and Sprites (two colour versions). Person uses Red Green filters to limit view to each eye. In the past I have page flipped (RE screen drawn, then LE screen drawn) which I know is not needed in Phaser. I can just change background colour for each screen refresh which will do the job. But this introduces a potential new problem as I need to hide objects / sprites from each aye alternately as background colour changes. Am thinking I could alternate "visible" for sprites that I do not want seen in alternate cycles. Question is, will collisions be detected with an invisible object? Goal is to teach both eyes to work together but while playing a simple retro style game. Another option would be to redraw sprites to be hidden in the background colour. I saw this as an option in in the examples but don't know how resource intensive this will be. Only four colours can be used in the design process. Two for backgrounds, two for sprites. Each eye only responds to two colours. Does anyone know if this could work? A better workaround? Just thought about the depth positioning. I could place the ones to be hidden behind the background? Can I set two layers, one drawn for RE and the other for LE and then just move one forward and back as required? Thinking this might be easier to code as sprites will be children of each layer? Again will collisions be detected? Thanks
  7. I made a canvas class for a drawing app and set a white rectangle made with Graphics.drawRect() as its sprite, but I need to change its fill color when I click it. It seems that's not possible according to the few info I've found, so I want to draw another rectangle and change the container sprite but that's not working. Am I doing something wrong? How should I replace the sprite? game.createClass('Canvas', { init: function() { this.drawContainer = new game.Container(); var board = new game.Graphics(); board.visible = false; board.beginFill(0xFFFFFF); board.lineStyle(0); board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 ); board.endFill(); this.sprite = fill; this.sprite = board; this.sprite.interactive = true; =; this.drawContainer.addChild(this.sprite); game.scene.stage.addChild(this.notebookContainer); }, click: function(event) { var board = new game.Graphics(); board.visible = false; board.beginFill(0xFF0000); board.lineStyle(0); board.drawRect(0, game.system.height /3, game.system.width, 2 * game.system.height / 3 ); board.endFill(); this.sprite = board; } });
  8. Drew

    Tween on a circle

    So, I'm trying to create a pinging type effect in my game, basically I want a circle to show up in location, and get bigger. My issue is that as the circle gets bigger, so does the lineWidth of the circle (though, the actual line width value in phaser is remaining the same. circle =,100); circle.lineStyle(2, 0xffff00); var ping = circle.drawCircle(0, 0, 10); ping.anchor.set(0.5, 0.5); var circleTween = .to({height: 300, width: 300}, 1000, Phaser.Easing.Linear.None, true, 0, 0); Any thoughts as to how to keep the lineWidth an actual 2 pixels, rather than growing relative to the size of the circle?
  9. Hey guys, Recently I've noticed some strange behaviour while using blendModes on Phaser.Graphics. I am creating a flashlight by drawing dark rectangle and lighter calculated shape of light from flashlight, I draw that on Phaser.Graphics object. Then I apply this object as a texture to sprite to see the difference between rendered outcomes. this.shadowTexture = 0, 0 ); this.shadowTexture.blendMode = Phaser.blendModes.MULTIPLY; this.sprite = 200, 0, this.shadowTexture.generateTexture() ); this.sprite.blendMode = Phaser.blendModes.MULTIPLY; update(){ // draw on shadowTexture ... this.sprite.texture = this.shadowTexture.generateTexture(); // just for test purposes } this code results in such situation: As you can see, blendMode used in Phaser.Graphics resulted with darker flashlight and the one used in Phaser.Sprite in lighter. Am I getting this all totally wrong ? Or is this some kind of a bug ? What I would like to achieve is the effect that I get using Sprite just by using Phaser.Graphics. Please, help guys, I am a bit confused here Thanks
  10. Hey everyone! I've implemented simple dynamic lightning in my project, but what I'm missing is soft light edges effect. This what it looks like now: I use sprites' masks to achieve that, code looks somewhat like this: updateShowingLayer() { + this.showMaskGraphics.clear(); + this.showMaskGraphics.lineStyle( 2, 0xffffff, 1 ); + this.showMaskGraphics.beginFill( 0x00000000 ); + this.showMaskGraphics.moveTo( this.player.x, this.player.y ); + + for ( let i = 0; i < NUMBER_OF_RAYS; i++ ) { + const rayAngle = mouseAngle - ( LIGHT_ANGLE / 2 ) + ( LIGHT_ANGLE / NUMBER_OF_RAYS ) * i; + let lastX = this.player.x; + let lastY = this.player.y; + for ( let j = 1; j <= RAY_LENGTH; j++ ) { + const landingX = Math.round( this.player.x - ( 2 * j ) * Math.cos( rayAngle ) ); + const landingY = Math.round( this.player.y - ( 2 * j ) * Math.sin( rayAngle ) ); + if ( !this.isTileBlocking( landingX, landingY ) ) { + lastX = landingX; + lastY = landingY; + } else { + break; + } + } + this.showMaskGraphics.lineTo( lastX, lastY ); + } + this.showMaskGraphics.lineTo( this.player.x, this.player.y ); + this.showMaskGraphics.endFill(); } } And then I just set masks in corresponding sprites to `this.showMaskGraphics` The full code is available here: Does anyone have an idea how to make this light soft ? Thanks
  11. Hi!, I’m a independent game programmer, and I have started a multiplayer RPG game, here a link to it: And a picture to see the style of the game (not pixel art): I have make all the code for the game, and the graphics and sounds are mainly from free assets and some help from an illustrator. What I’m looking for is help with the graphics and maps of the game, so if you already have some graphics of the style or want to collaborate to make the game please contact me!. Also you can see the main story of the game in the tutorial, if you like it and have ideas to improve it I will really appreciate it. Best, Nicolás.
  12. I have a graphics issue that I cannot pinpoint. My sprite appears more blurry at some positions of the map. Does anyone have an idea what this kind of problem can depend on? Both of these pictures shows the sprite when idle on different positions - so no animation is playing - and at the first picture the sprite looks more clear than it does on the second one. I don't know what more information I can give on this that is relevant.
  13. Hello, I'm trying to draw a bunch of Graphics object from a custom font (.ttf) letters. With the help of fontface.js I now have a set of paths, like these: { "A": { "o": "m 763 0 l 660 0 l 594 361 l 247 361 l 51 0 l -49 0 l 507 1024 l 567 1024 l 763 0 m 579 449 l 508 860 l 294 449 l 579 449 " }, "B": { "o": "m 693 794 q 678 701 693 744 q 635 624 663 658 q 573 565 608 590 q 497 525 538 539 q 568 499 535 517 q 626 455 601 482 q 666 392 651 428 q 681 310 681 356 q 651 183 681 240 q 572 85 622 125 q 452 22 521 44 q 304 0 383 0 l 13 0 l 192 1014 l 428 1014 q 546 997 496 1014 q 628 951 596 981 q 677 882 661 922 q 693 794 693 842 m 594 778 q 547 889 594 850 q 403 928 500 928 l 271 928 l 206 560 l 339 560 q 447 577 399 560 q 527 625 494 594 q 577 694 560 656 q 594 778 594 733 m 582 304 q 522 429 582 385 q 358 474 461 474 l 190 474 l 124 86 l 314 86 q 422 101 372 86 q 506 143 471 115 q 562 211 542 171 q 582 304 582 251 " }, "C": { "o": "m 969 868 l 889 810 q 779 905 844 869 q 614 940 714 940 q 431 896 515 940 q 285 779 346 851 q 189 616 224 707 q 154 432 154 525 q 177 288 154 354 q 244 174 200 222 q 351 100 288 126 q 494 74 414 74 q 656 108 582 74 q 804 213 729 142 l 864 151 q 695 32 793 81 q 475 -17 597 -17 q 306 15 383 -17 q 173 104 229 47 q 85 241 117 161 q 54 417 54 321 q 103 658 54 546 q 232 853 151 769 q 417 983 313 936 q 636 1031 522 1031 q 840 984 758 1031 q 969 868 921 938 " }, ... } which is the best way to draw my letters with the Pixi Graphics API? Lately I'll need to animate those Graphics. Thanks for helping me.
  14. Hi all, I am new to game development and have been experimenting with Phaser for the last couple of days. I am trying to develop a very basic game using Phaser, I would like to draw some shape to the canvas which I would like to drag around. I came across this post which said that the Graphics objects don't have an InputHandler and so I used the resolution suggested which works totally fine. sprite = game.add.sprite(100, 100, graphics.generateTexture());My issue is that if I would like to manipulate the graphics object (i.e. change the shape) with each frame then what would be the best possible option. Since this case forces me to create a new sprite every frame. Any suggestion would be helpful, Thanks
  15. Hi I was wondering if there's a way in Pixi to map a texture to a graphics object. I would like to some warping on and distortion to images but the only way I can see this happening if I can map a texture to the graphics object. Thanks
  16. Hello. I managed to create code that draws a button along with a textfield and also with the four states that a button have, onInputUp, onInputDown, onInputOver and onInputOut. However, it is still experimental, and since I add text object as a child of Phaser.Graphics, the text is a bit blurry. But the bigger issue is, new graphical elements are added without removal, so I have a bug somewhere, or it is just not possbile to create dynamically drawn button with text and all states and to add custom click event handler. I will post another topic for the code itself, but here i just want to ask if there is a plugin for Phaser that draws buttons dynamically, or buttons on which I can change the text dynamically? Or how can I create button and be able to change its text dynamically? Should I just place Graphics object below and on top a text field both pointing to the same click listener?
  17. Is there a way to scale a Graphics without getting the linewidth scaled as well? For instance: var stage = new PIXI.Container(); var graphics = new PIXI.Graphics(); // Set a fill and line style. var linewidth = 10; graphics.beginFill(0xFF3300); graphics.lineStyle(linewidth, 0xffd900, 1); // Draw a shape. graphics.moveTo(50, 50); graphics.lineTo(250, 50); graphics.lineTo(100, 100); graphics.endFill(); // Now, scale this Graphics. var scale = 5; graphics.scale.set(scale, scale); // all lines now have width linewidth * scale In the example above, the vector "shape" gets properly scaled by a factor of 5. Unfortunately, so does the linewidth. I am trying to render Graphics vector data on top of Google Maps (typically polygons over countries), and when the map gets zoomed in, I want to rescale the data without getting enormous boundaries.
  18. I'm trying to draw a graph incrementally, one line segment every second. I start with this: graphics =, 50); = graphics; ...and draw up the graph axes etc - all works fine. Then I set the line style, plot the first data point and then create a series of calls to nextData() - one per second: graphics.lineStyle(5, 0xff0000, 1); graphics.moveTo(xData[0], yData[0]);, 159, nextData, this); The nextData() function takes x and y coordinates from arrays according to a step variable that increments each time the function is called: function nextData() { graphics.lineTo(xData[step], yData[step]); step++; } However, nothing gets drawn. The data is all fine - all the values are correct and the function is called once a second and the step function increments as it should. The only thing I have noticed is that if I put in a REALLY small value for the time interval in like this:, 159, nextData, this); e.g. 1 instead of 1000, the first data point is drawn but nothing else - no lines, nothing. I tried this with Javascript setInterval() as well and it didn't work then either so I'm thinking it has something to do with the graphics?
  19. Hello. I am very new to PIXI, so please bare with me. I have been in search of good API for my game. The game uses a map which contains tiled images as well as a bunch of path on the screen. Think Google Map, except a lot simpler. I was able to use PIXI to implement the map background where it scrolls and loads tiled map images as needed. I was also able to draw paths onto the map. Now the problem is that I cannot figure out how to interact with those paths. I used PIXI.Graphics to create and draw a path. I applied mouse events to it. But no event is fired. I was able to get the even to fire if I made the graphic into closed path will fill. But unfortunately that will not work for my purpose. Is there any way to accomplish this? Any way to interact with just a path (could be complex paths with multiple segments and/or curves) rather than enclosing shape? Thanks in advance!
  20. Hi, I'm trying to work out how to create a shape with graphics, cache it and add it to a sprite to use repeatedly I was trying to recreate the intro background on this video (see below, not the video thumbnail but the first thing you see when you actually play it). I realised drawing all the star graphics and fills directly over time would probably be too slow, so it would be better to cache the star & it's trail as a bitmap and then create multiple sprites from that. I want to create the graphic early on and pull it out of the cache later. I'm getting an error though. The key is there but it can't find the texture. Does it need longer to store before trying to pull it out again? Obviously I could use a PNG but i'd prefer to be able to generate the graphics at runtime thanks for any advice. J // draw graphics to renderTexturevar renderTexture = this.add.renderTexture(graphics.width, graphics.height);renderTexture.renderXY(graphics, 0, 0, true);// add renderTexture to'starRT', renderTexture );// check starRT is in cacheconsole.log('starRT')) // true// Error: Phaser.Cache.getImage: Key "[object Object]" not found in Cache.var sprite =,0,'starRT'));sprite.x=128;this works fine though, but obviously it's not being pulled from the cache var sprite2 =,0,renderTexture);
  21. how to add Phaser. Graphics to a group? doing some tweens to a group but the things i drawed using a graphic did not move allthogeder. i draw thing on create phase, is it any kind of problem? any guidance is welcome.
  22. Hi guys,A great and very friendly team of professional and creative guys (artists and developers) would be very happy to cooperate on creating mobile games.- Create high-quality 2d graphics: illustrations, symbols and icons, etc. – our professional artists and web designers never lack inspiration. Unique and exclusive products are spiced with a power of experience.- Code in HTML5. Our hard-working developers will provide you with fast and good results.We are open to any offers. We do have some portfolio and would be pleased to share it with you Please, don't hesitate to contact me at daria.onlygames@gmail.comLook forward to hearing from you!
  23. Hi everyone I'm currently running my own asset website where I post all my own work for developers such as yourselves to use in their games. The site's been going for over 18 months now and I've accumulated a good collection of assets already. The idea of the site is to produce useful assets at affordable prices. The site isn't just another asset store, it's kind of a personal thing and all the assets their are my own with the intention of maintaining a kind of continuity of style across all the assets I produce, although they have changed slightly over time as I've settled into a style. At the moment there is only one style of work on the site so I don't expect there to be something for everyone, but I'm trying to keep the art style universal and easy to replicate should people want to create their own assets that fit in with the style. I'd really love to hear your feed back on the site too. It is finished and fully operations but it's a work in progress and I'm continually improving it over time. I know a lot of indie developers produce games as a hobby without the expectation of turning a large profit from their work so I'm really trying to keep prices down. I also produce free assets which you can use freely in your commercial projects Which is partly why I'm writing this post, as I would like to share the free work I do with everyone who reads this and also generate interest in my asset collection. Here's the first free work I'd like to share with you all I'll post more stuff when it's completed. You can download the asset from the attachment to this post Here's a link to my asset collection website where you'll find more free assets: I've also included a preview image of the assets.
  24. this.bgGraphics.graphicsData[10].shape.width = this.btnScroll.x - 494; this.grp.graphicsData[0].shape.width = 100; - work perfect in CANVAS mode - does not work in auto (webgl) mode (width changed but not updated in game screen) please help!
  25. I think I may have stumbled across a rendering bug that occurs when graphic objects are added as children to sprite objects. This code: let graphics =; graphics.lineStyle(2, 0x0000FF, 1); graphics.drawRect(0, 0, 32, 32); let sprite =, center.y); sprite.addChild(graphics);; Results in different dimensions for the sprite in (Safari / Firefox) and Chrome. Chrome reports the sprite's dimensions relative to the graphic object (32x32), however Safari and Firefox both incorrectly render the sprite's dimensions as (1x1) from a call to It causes my tetris pieces to render differently in both browsers. In Safari / Firefox, I am forced to set the rectangle to the dimensions of (1x1) and use the sprite's width and height properties to set the dimensions correctly. However, this breaks the sprite in Chrome. EDIT: It appears the offender is this property: "sprite.texture.frame.width". In Safari it's 1 and in Chrome it's 32.