Making sprites in PS and the lines

New releases and general discussions.

Post » Sun May 10, 2009 1:40 pm

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?
B
16
S
10
G
5
Posts: 255
Reputation: 3,934

Post » Sun May 10, 2009 2:18 pm

[quote="hero_bash":td2hw76i]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?[/quote:td2hw76i]

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.
My professional Royalty Free Music at Scirra Assets Store
--------------------------------
Specs: i5 2500, 16gb of ram, gtx 770, win 7, Focusrite Scarlett 8i6, Mackie mr8mk2, Alesis 320, browsing the net on chrome.
B
71
S
19
G
19
Posts: 1,919
Reputation: 16,910

Post » Sun May 10, 2009 3:02 pm

[quote="hero_bash":28jrftlt]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.[/quote:28jrftlt]
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.[/quote:28jrftlt]
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.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600

Post » Sun May 10, 2009 4:31 pm

if it's transparent in ps
with the grey and white checkerboarded background
save as PNG and it should look the same in construct
Spriter Dev
B
87
S
21
G
12
Posts: 3,240
Reputation: 16,461

Post » Sun May 10, 2009 5:34 pm

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
B
52
S
7
G
6
Posts: 1,945
Reputation: 7,610

Post » Sun May 10, 2009 8:37 pm

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.
B
3
S
2
G
4
Posts: 1,445
Reputation: 4,665

Post » Sun May 10, 2009 9:13 pm

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.
My professional Royalty Free Music at Scirra Assets Store
--------------------------------
Specs: i5 2500, 16gb of ram, gtx 770, win 7, Focusrite Scarlett 8i6, Mackie mr8mk2, Alesis 320, browsing the net on chrome.
B
71
S
19
G
19
Posts: 1,919
Reputation: 16,910

Post » Mon May 11, 2009 4:18 am

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.
B
134
S
65
G
16
Posts: 1,766
Reputation: 19,190

Post » Mon May 11, 2009 5:05 am

[quote="alspal":1gjikyo0]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.[/quote:1gjikyo0]

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.
Moderator
B
5
S
2
G
6
Posts: 4,348
Reputation: 10,971

Post » Mon May 11, 2009 5:16 am

you are amazing... :shock:

this will save so much time!
B
134
S
65
G
16
Posts: 1,766
Reputation: 19,190

Next

Return to Construct Classic Discussion

Who is online

Users browsing this forum: No registered users and 2 guests