Best size for game assests

[Arlefreak]

I will start making the resources for my game, and I wanted to know what is the best size to make my sprites, or my backgrounds? is it better to make a large asset and scale it, or make several sizes and load them depending on the resolution of the screen.

[rich]

What platform do you want/need to target? And what sort of game is it?

 

If this is desktop only, then draw big. If you need it to run really well on mobile then I'd say draw smaller and scale-up, but it depends on the type of game, i.e. how much stuff you need to fly around the screen at once.

[mwatt]

This is an interesting question and I would like to ask some follow on questions as well as try to get some of my own assumptions validated - but I don't want to steal the thread from Arlefreak.  On the other hand, I don't want to open a new thread for the same topic.  So, I am going to throw some things in here and hope that Arlefreak will forgive me - possibly some of it may serve him as well.

 

I have one game proto-typed in Enchant.js that I might switch over to Phaser and another on the drawing board that WILL be a Phaser game.  Both of these games are targetted for the phone, so that is the context of my comments.  From what I have found out on my own so far, I have come to the following conclusions - I hope Rich or someone else can comment on them.

 

• It is perhaps ideal to create vector graphics (for example via Inkscape) and then "freeze" them at the desired target sprite/tile size(s) by exporting them to PNG or some other pixel-based format.  This allows you to adjust your target graphics size at will during development and results in far less pixelation (unless you are going for that style, in which case don't do vector of course).  Naturally these need to go into sprite sheets and tile maps.  I'm still trying to work out the specifics of using an atlas for these things, though I understand the basic concept - but I digress.

 

• For my initial prototypes, I skipped the vector stage and created pixel-type graphics.  I noticed that scaling images up, ended up with worse-looking images than scaling down (they got a bit blurry when scaled up, and not so much when scaling down).  So I am thinking that once you have pixel-based sprites/tiles at hand that are about the right size, and want to scale them a bit up or down in a mobile environment, it would be best  if the size of the graphics were appropriate for the common denominator of the a large phone size, although I haven't decided what this is yet (I guess not 320 x 480 though).

 

• I have decided that 16x16 images are too small and that even 32 x 32 is limiting in some respects.  I therefore am thinking that I will go for 64x64 and used these without scaling on phones with high pixel density and scale down to around 32x32 on less endowed phones.

 

Summary of my thoughts so far (and please please please pick this all apart if it is warranted).

 

1. Start with vector based graphics.

 

2. Translate this into two sets of graphics, one BIG set for the browser (if I want that) and single, "one size fits all" small set to be used for phones.

 

3. The "one size fits all" will be sprites and tiles of 64x64.  I will dynamically scale these down as necessary for some phones.

 

 

Addendum: It strikes me that this post might belong more in the 2D forum than the Phaser one.  If a moderator wants to move it, I'm personally ok with that.

[Arlefreak]

I was thinking it does belong to the 2D forum so if everyone is on ok with moving I'm to, I'm working in a school project, and my first videogame, I have expirience with web develop and Android develop, so something based on java script sounded good,  the idea is to make a plataformer with movil phones in the end, with the posibiliti to play them in a browser.

 

PD: sorry for the bad english I'm from México

[Arlefreak]

So this two links helped me http://kotiro.petermichaud.com/visual/resolution/  http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/ so based on this i would consider two sizes 2048x1536 and 1136x640 px that are the iphone and the ipad resolutions and for my character 410px (1/5 of the ipad) and 227px for iphone, what do you think ? alse here is my main character  imgur.com/kpvomj8 

[rich]

I think at that resolution your game will run like a snail stuck in a tar pit.

[Arlefreak]

Damn any suggestion?

[rich]

I would start at half those resolutions and then work your way down based on the game type.

[Arlefreak]

Will do that, thanks i will update soon

[mwatt]

Those are a couple of interesting links you turned up Arlefreak.  For the first link, I enjoyed the observations and data but I can't agree with the article writer's association of size changes with human emotional resonance.  The second link is a nice link for understanding the issues with targetting Apple devices.

 

In regard to sizing your char, I now understand that I had a bias towards a certain kind of game when I gave my input.  I was thinking along the lines of a "top down" angled view look at a character who moves around in any direction in two dimensional space.  I think you may be targetting a side scroller environment, where characters can probably be a bit bigger in relation to their environment.

 

I hope some of the more experienced heads weigh in on this topic soon, as we clearly could use some guidance.

[mwatt]

I see that while I was writing my response, Rich did reply and thus my post is out of place (I got called away from the KB).

[Arlefreak]

I'm making a plataformer runner so I would try like Rich said and see how it works out

[rich]

For a runner game you need large scrolling areas and lots of motion going on - so once you start hitting tablet resolutions lots of mobiles will begin to choke. Try starting with 1024 x 768 and see how it performs, but honestly you may need to drop a bit lower than this for performance.