Making sprites in PS and the lines

This forum is currently in read-only mode.
From the Asset Store
Make your own platformer for both the web and mobile easy with this Santas Platformer Template, FULLY DOCUMENTED
  • Well like maybe most of the users here, I also use Photoshop to create sprites and other graphical materials for the game though I consider myself to be still a newbie.

    So I;ve got a question concerning making the sprites. I am trying to make the sprite look smooth(vector-like) however i see a problem that might arise from the anti aliasing of the outside line of the sprite and I know that in COnstruct I might get same weird whith gray surrounding the sprite.

    So what's the most efficient way of doing this? I could use hard line in PS and maybe use the smooth plugin(but how would that affect the game's performance if I would have sprites moving around with all the construct effect applied to them.)

    I could also think of making the sprite size in PS twice the size i itend it to be then put it on consturct then just decrease the sprite object with that sprite texture. I believe it smoothens it but still I'm not sure how it is compared to the effect plugin performance-wise.

    Hmm, what do you guys think?

  • Well like maybe most of the users here, I also use Photoshop to create sprites and other graphical materials for the game though I consider myself to be still a newbie.

    So I;ve got a question concerning making the sprites. I am trying to make the sprite look smooth(vector-like) however i see a problem that might arise from the anti aliasing of the outside line of the sprite and I know that in COnstruct I might get same weird whith gray surrounding the sprite.

    So what's the most efficient way of doing this? I could use hard line in PS and maybe use the smooth plugin(but how would that affect the game's performance if I would have sprites moving around with all the construct effect applied to them.)

    I could also think of making the sprite size in PS twice the size i itend it to be then put it on consturct then just decrease the sprite object with that sprite texture. I believe it smoothens it but still I'm not sure how it is compared to the effect plugin performance-wise.

    Hmm, what do you guys think?

    I'm not sure wheter i got your question right. But if i did i would first drow the outlines of the sprite in the size you want to display it in game or bigger, than i would export it as JPG (or bmp, whatever), import to Inkscape, used TRACK BITMAP feature, corect the new created vector gfx if nessecery, set the size you want it to be in your game, export is as png, import to PS, and coloured it. You will get perfectly smooth looking spite. If you want it to be perfectly coloured as well, you could fill it with colours within Inkscape. Thats the fastest and best way i can think of.

  • So I;ve got a question concerning making the sprites. I am trying to make the sprite look smooth(vector-like) however i see a problem that might arise from the anti aliasing of the outside line of the sprite and I know that in COnstruct I might get same weird whith gray surrounding the sprite.

    You should never get gray surrounding the sprite: Construct uses premultiplied alphablending, which avoids this. The best way is to take advantage of the alpha channel and use soft edges to your sprite. If done right you can do a lot of scaling before it becomes noticable. Don't forget to leave a 1-pixel transparent border around the sprite (shift+crop) to prevent "hard edges".

    [quote:28jrftlt]I could also think of making the sprite size in PS twice the size i itend it to be then put it on consturct then just decrease the sprite object with that sprite texture. I believe it smoothens it but still I'm not sure how it is compared to the effect plugin performance-wise.

    Shaders can affect performance quite badly, and not all graphics cards support them, so you should avoid them wherever possible. Your first idea, however, could work: large textures scaled down use mipmapping for high quality resizing, and if you zoom in or scale up, you actually increase the detail, which is nice. Still, if it looks similar to just using alpha blended edges, you may as well use that, because drawing images larger uses more VRAM.

    Just a quick technical note: it is wrong to call Construct's smooth rotations/scaling anti-aliasing. It's not, that's a different algorithm which improves resolution. It's actually called bilinear filtering, and it's a lot faster than anti-aliasing, but it doesn't improve resolution - it basically just smooths over hard edges.

  • if it's transparent in ps

    with the grey and white checkerboarded background

    save as PNG and it should look the same in construct

  • make an alpha channel then save for web?

    first you draw your sprite and everything thats not part of him (BG) be the color of the outside of your sprite. (ex, black if it has a black outline, green if its green or wtv )

    then use that same sprite in completely white on a black BG and use that as your alpha channel

    the AA should be preserved as opacity now, instead of being raw non alpha fake AA

  • in PS you should use a vector shape so that it will look always sharp at whatever resolution you go.

    Trim, then enlarge canvas by 1 pixel in each direction (to avoid hard-edges). Save for web, export as PNG-24.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I still think doing my way would save you a lot of hastle:

    1. you can draw the way you can and the way you like

    2. after track bitmap function you can do fixes

    I think that vector gfx in PS is not to good and it's hard to came up with a decent shape strait away.

  • When ever I make graphics in PS to go into Construct, I just make all layers invisible except the layer I want to import. Then go 'save for web and devices' then save it as PNG. Then I just load that image with a sprite, and it's as it should be.

  • When ever I make graphics in PS to go into Construct, I just make all layers invisible except the layer I want to import. Then go 'save for web and devices' then save it as PNG. Then I just load that image with a sprite, and it's as it should be.

    Step into the magical world of Photoshop scripting, my man:

    http://www.kirupa.com/motiongraphics/scripting6_2.htm

    You need script support! Run a script, and export all of your layers to separate .png files in a tidy little folder and numbered for your convenience. It's a GODSEND... trust me, you won't know why you went for so long without it

    I think CS and above comes with scripting capability already, but if you need the scripting plugin for PS7 you can grab it here.

  • you are amazing...

    this will save so much time!

  • Wow thanks for those methods, and damn Construct is cool with that something alpha blending.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)