Search the Community

Showing results for tags 'graphics'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 153 results

  1. Hello to everyone, I'm currently developing a fan-made, retro-style and non-profit game with Phaser based on the TV show Stranger Things. The main idea is to do a Point and Click game like old classics (Monkey Island saga, Indiana Jones and the fate of atlantis, etc...) with retro pixel-art graphics and chiptune music. I'm looking for GFX and Music artists If you are interested to collaborate with this project please contact with me and I'll send you a link to see the work in progress. (Sorry if there are some grammar errors, I'm Spanish).
  2. Free Open Source Game Art App & Editor

    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 Kenney.nl, 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 https://www.kwippe.com/app.html#upgrade_beta - 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.
  3. var graphics = this.add.graphics(); var color = 0xffff00; var thickness = 2; var alpha = 1; graphics.lineStyle(thickness, color, alpha); graphics.strokeRect(32, 32, 256, 256);
  4. 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
  5. Replacing a Graphics sprite

    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.sprite.click = this.click.bind(this); 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; } });
  6. 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 = this.game.add.graphics(100,100); circle.lineStyle(2, 0xffff00); var ping = circle.drawCircle(0, 0, 10); ping.anchor.set(0.5, 0.5); var circleTween = this.game.add.tween(ping) .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?
  7. 2D Artist for Hire

    Hello, I'm Emily and I'm a freelance artist looking for paid projects, small or part-time. I'm currently booked up on revenue share projects, so I'm only available for gigs that pay as I work. I specialize in 2D game graphics, including: - UI - backgrounds - 2D animations - illustrations/concept art I'm also open to doing anything else 2D animated or fully illustrated (cover art, comics...) For samples of my portfolio, please visit: http://emilyso.com/portfolio/game-artgraphics/ http://emilyso.com/portfolio/concept-art/ http://emilyso.com/portfolio/2d-animations/ If you feel my style of art would be suitable for your project, please contact me at: emilyso321@gmail.com Otherwise, please feel free to check out/play some games I've worked on: http://emilyso.com/games/ Thank you for your time and consideration. I hope you enjoy my work
  8. 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 = this.player.game.add.graphics( 0, 0 ); this.shadowTexture.blendMode = Phaser.blendModes.MULTIPLY; this.sprite = this.player.game.add.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
  9. Hi!, I’m a independent game programmer, and I have started a multiplayer RPG game, here a link to it: https://multionline.herokuapp.com/ 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.
  10. 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.
  11. 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.
  12. 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
  13. 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
  14. 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?
  15. Graphics scale and linewidth

    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.
  16. I'm trying to draw a graph incrementally, one line segment every second. I start with this: graphics = game.add.graphics(50, 50); window.graphics = 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]); game.time.events.repeat(1000, 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 game.time.events.repeat like this: game.time.events.repeat(1, 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?
  17. 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!
  18. 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 cachethis.game.cache.addRenderTexture('starRT', renderTexture );// check starRT is in cacheconsole.log(this.game.cache.checkRenderTextureKey('starRT')) // true// Error: Phaser.Cache.getImage: Key "[object Object]" not found in Cache.var sprite = this.game.add.sprite(0,0,this.game.cache.getRenderTexture('starRT'));sprite.x=128;this works fine though, but obviously it's not being pulled from the cache var sprite2 = this.game.add.sprite(0,0,renderTexture);
  19. 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.
  20. 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!
  21. Free game assets available

    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: https://www.gamedeveloperstudio.com/graphics/ I've also included a preview image of the assets. donuts.zip
  22. 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!
  23. 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 = this.game.add.graphics(); graphics.lineStyle(2, 0x0000FF, 1); graphics.drawRect(0, 0, 32, 32); let sprite = this.game.add.sprite(center.x, center.y); sprite.addChild(graphics); this.game.add.existing(sprite); 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 this.game.debug.spriteInfo(). 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.
  24. Can't clear mask in canvas

    Hi! I'm using a drawn rectangle as a mask and I need to delete it after a tween, so I'm using onComplete and then in the callback function 'this.mask.clear()'. Seems to work fine in WebGL, but testing in some browsers using canvas it seems the mask is still there after the animation (other stuff in the function is working, just clear() not working on the mask). Is there any workaround for this? Or any other way to get rid of a mask? Any help is appreciated, thank you.