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 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 166 results

  1. wclarkson

    Rounded Rectangle

    I'm finding the graphics examples very impressive, but it is the simple things that are tripping me up. I know I must be missing something simple, but is there a simple way to draw a rounded rectangle in Phaser 3?
  2. Hi everyone, Cube City Wars is 2 players isometric game which I made for twoplayergames with Construct 2. This game is classic 1 vs 1 shooter game which has additional enemies to kill and get extra score. Collect pickups to get powerful weapons such as minigun,laser gun,sniper rifle and more! Play here : http://www.twoplayergames.org/Cube-City-Wars/1312.html
  3. I'm at my wit's end. I've tried across several game engines and drawing programs now, tried every little setting and have really read everything there is to read. I just cannot get a sharp appearance on any asset as soon as they are rendered in an HTML Canvas or WebGL. In desktop applications, they look fine. Here, for example, is a good asset - it's sharp and clear and as it as a PNG, it should scale down nicely (I need it about 25% of this size): As soon as I load it as a sprite via Phaser, I get a result like this (don't mind the money-man): It's blurry and it's even worse when scaled down (here scaled to 0.1x, 0.1y): I'm on an iMac, so maybe it has to do with the retina display, but I am getting similar results on lower quality monitors as well. What am I doing wrong? When I load other assets in, such as the ones used in the Phaser 2 tutorial, they look crystal clear. I feel like there's something really simple that I am missing. :-( My old (finished) build was in Unity 2D, and I was having the exact same issue. This is why I swapped to Phaser instead of using the Unity WebGL build. I've tested on both engines, and some assets render perfectly (particularly, pixel art renders perfectly. Other, more vector-like assets render poorly). Really hope there's somebody here who can help. :-( Yolanda
  4. jorge nunez

    pacman shape (drawn with arc)

    i'm trying to draw pacman shapes, or slices of pie, they are basically the same what i want is something like this: i know it's an example i can copy and paste from the webpage but it only works on phaser 2, i'm using phaser 3 rather than getting a pie shape i get this: as you can see, it fills the arc with a straight line, but what i want is to complete the shape taking the center of the circle into account, here is the code: style = { font: "bold 14px Arial", fill: "#FFF", boundsAlignH: "center", boundsAlignV: "middle", wordWrap: true, wordWrapWidth: 80 }; graphics1 = game.add.graphics(game.width/2, game.height/2); graphics1.beginFill(0x0000FF); graphics1.arc(0, 0, 200, game.math.degToRad(360-90-45/2), game.math.degToRad(360-90+45/2), false); graphics1.endFill(); text1 = game.add.text(game.width/2-40, game.height/4-40, "phaser 2.4 text bounds", style); text1.align = 'center'; //text1.setTextBounds(game.width/3, 0, game.width/3, game.height/2); sprite1 = game.add.sprite(game.width/2,game.height/2); sprite1.addChild(graphics1); sprite1.addChild(text1); sprite1.pivot.x = game.width/2; sprite1.pivot.y = game.height/2; sprite1.angle += 0*45;
  5. Kacper Pietrzak

    Applying multiple masks to single sprite

    Question is pretty straightforward, how can I apply multiple masks to one sprite. Let's say I have a sprite and I want it to be displayed only in particular places. In my case I want zombies to be visible only in light, having only flashlight it's pretty easy to implement since there is only one source of light and I can do something like that: this.zombies.setAll('mask', this.flashlightGraphics); But what do I do when I want to apply multiple masks, is there a way to combine graphics objects ? Thanks
  6. emilyso321

    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
  7. arun

    Inkscape Graphics

    Hi friends, I am a new Phaser game developer but I am facing the problems with graphics. Where can i find the graphics of my game or how to do it better. Can I use Inkscape for the graphics. Please help me.
  8. JcKairos

    Make Graphic into Sprite

    Hi, I am trying to create generate a texture for my graphic so I can use it as a sprite. However I have a problem when using the following code: sprite = game.add.sprite(400, 300, graphics.generateTexture()); as the graphic which I want to create is done by the player, so I have no idea how to set the x axis and y axis so that the generated sprite literally takes over the place of the graphic. Is there a way to add the sprite right above the graphic?
  9. Hi guys, I think I have problem how masking in PIXIjs works. I have this image of black horse And I would like to use masking in order to give it the color. Here is my code so far: const app = new PIXI.Application({backgroundColor: 0xFFFFFF}) document.body.appendChild(app.view) PIXI.loader.add('assets/horse.png').load(() => { const horse_sprite = new PIXI.Sprite(PIXI.loader.resources['assets/horse.png'].texture) const horse_mask = new PIXI.Graphics() horse_square.beginFill(0xFFaaFF) horse_square.drawRect(0, 0, 130, 130) horse_square.endFill() horse_mask.mask = horse // I can see the horse and the square if I comment this out app.stage.addChild(horse_mask) app.stage.addChild(horse_sprite) }) It's not working, I can't see anything, not a horse nor the square. Thanks
  10. I'm building a tile based game, and I'm generating a lot of tiles with drawShape and polygon data and then adding them all to a container. Every tile is generated. Right now if I go larger than about 150 x 150 the app crashes with a webGL failure. Do I need to convert these to sprites or something else? Any suggestions? Also, even though there are many tiles there are a much smaller amount of variations, is there a way to copy and reuse already generated tiles? I might want to change the colour so they can't be of the same instance.
  11. waechtertroll

    Distorting textured objects - ideas required

    Hello, although I don't have enough spare time to create games at the moment, I'm playing a bit around with code to understand game mechanics. At the moment I'm teaching myself soft body dynamics. I can create an entity consisting just of cordinates (say a sphere) and play around with their shape, wobbling, squishing etc. But I'm at a loss at how to bind a texture to them that actually distorts according to the coord changes; preferrably in a way performant enough to use it in a game, and most preferrably done in Pixijs. Maybe I'll have to cut the texture into a mesh, bind UV coordinates to them and then use something like three.js to render it? I see that e.g. Dragonbone has some way to add meshes to characters - plus it can be used from pixi. Will it distort textures properly when I modify mesh coordinates, or is this information only used when exporting animations? What other approaches can you think of?
  12. 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).
  13. matthen

    Antialiased Circle

    Hi everyone, I'm using the Graphics stuff from the dev version of Pixi.js. I can draw a circle by doing this: var graphics = new PIXI.Graphics();graphics.lineStyle ( 2 , 0x000000, 1);graphics.beginFill(this.colour);graphics.drawCircle(this.position[0], this.position[1], this.radius); But I was wondering if it is possible to draw it with antialiasing? I note it looks like the webgl contexts are created with {antialias:true} by Pixi. Do I need to make a PNG of a circle? That's less ideal for changing the colours. Thanks, Matt
  14. 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!
  15. sHAYM4N

    Realtime winline effect

    Hi all, just after a bit of advice on how best to handle something like the realtime winlines below for a slot game... https://prnt.sc/hpfo74 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!
  16. AndrewTidey

    Free 2D Art For Your Games

    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 - https://andrewtidey.blogspot.co.uk/ I'll be regularly updating with more art. Open to ideas/requests Cheers, Andrew
  17. mspanish

    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.
  18. 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);
  19. 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
  20. juliogomez7

    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; } });
  21. 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 = 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?
  22. 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
  23. 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: https://youtu.be/M-idTMGYvsw 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: https://github.com/PiGames/Project-Nostradamus/blob/dynamic-lightning/src/objects/Flashlight.js Does anyone have an idea how to make this light soft ? Thanks
  24. 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.
  25. 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.