Hi gamedev, recently I started a project with a couple of friends, we are trying to develop a game for ouya console, since we all are really noobs developing games, we are programmers, designers etc. but never tried to make a game before, well we only have experience with Game Maker and that kind of basic stuff, but we are having trouble on the art of the game.
Our game it's a simple 2d platform game, and our main problem is the art, we tried vector (inkscape) raster (gimp) but we are not sure what's the best option to go for it. It is hard to decide for a few reasons:
1.- Does having an raster game (gimp) it's bad for the resolution of the game on the different screens of the players/users?
2.- Is vector (inkscape) graphics the best choice?
The difficult about vector graphics is that making a sprite for me can be really hard, and at the end of the sprite it looks like a cartoon. (I want to achieve a castlevania or metroid sprites type of art that is used on gameboy series). So I'm trying right now to use gimp as pixel art tool, and I think it is way easier to make the sprites, but I don't know if it is the best way to do it because I don't want that the sprite looks blury at the end.
And finally at the end I think that no matter what the game (in this case with AndEngine) will show the graphics a raster, is that true?
So can anyone please tell me what is the proper way for making sprites, and if my firends do the backgrounds in inkscape and I do the sprites in gimo it would be a problem? If someone has a tutorial that would be great! (insert meme here)
Basically that it doesn't look bad in any resolution and doesn't look like a cartoon.
Sorry for my bad english, it is not my mother tongue.
Thanks.
2d game art for ouya
Dealing with resolution is difficult if you want pixel-accurate results like you're accustomed to seeing on a Gameboy or one of the older consoles.
There are a few approaches --
Firstly, if you absolutely have to have pixel-perfect results between effective resolutions, then you'll need to create two distinct sets of sprites (EDIT -- that is, if you also want highest-available resolution, or a smaller resolution that isn't a common denominator of 1080p and 720p) -- One designed for 720p, and another designed for 1080p. I would either derive both from the same source image at 2x 1080p scale (scaling down by half for 1080p, and by 2/3rds for 720p), that will give you good-quality output from the same source. Alternatively, you can create both sets by hand at each resolution -- that'll look best, but be essentially 2x the work through production and all subsequent revisions. Keep in mind that you'll need to adjust for logical pixels of 2x2-4x4 real pixels if you want that pixelated look, but full-resolution, hand-drawn raster art is nice too, and still looks very distinct from vector-art a'la flash.
Secondly, you could just create high-res, 2x-1080p artwork like in the first version, but let your engine do the scaling at run-time, either by direct-scaling in your projection matrix, or by rendering to a smaller back-buffer that uses the logical resolution (the one that matches the blocky pixels naturally) and then up-scaling it for output. The later approach can give better results since you can apply your own scaling method, rather than relying on the GPU to do it (probably a box-filter), and optionally can apply algorithms like scale-2x if you like.
Finally, if the desired amount of pixelation lines up, certain lower-resolutions scale up perfectly to both 720p and 1080p -- for example, if designed for a logical resolution of 640x360, then it scales perfectly by a factor of two to 720p and by a factor of three to 1080p. If that's a good match for the desired amount of pixelation, this is definately the way to go because it gives pixel-perfect results in both cases, with no additional work, without starting from over-size sprites, and the scaling can be done in-engine. 640x360 is probably the only practical resolution if you want to use every pixel on the screen in both modes (320x180 is the next one down, and that's really pixelated already). Others are decent candidates if you can accept some letterboxing (say, 420x240 -- although that's not perfectly 16:9 either).
Then, there's the whole other issue of whether or not the game could simply be made to adapt to different resolution using the same art -- basically, you just see more of the world at once. This is a viable approach too, you just have to be aware of how it can impact competitive (especially) and cooperative play, as well as how it impacts level design.
Finally, if the desired amount of pixelation lines up, certain lower-resolutions scale up perfectly to both 720p and 1080p -- for example, if designed for a logical resolution of 640x360, then it scales perfectly by a factor of two to 720p and by a factor of three to 1080p. If that's a good match for the desired amount of pixelation, this is definately the way to go because it gives pixel-perfect results in both cases, with no additional work, without starting from over-size sprites, and the scaling can be done in-engine. 640x360 is probably the only practical resolution if you want to use every pixel on the screen in both modes (320x180 is the next one down, and that's really pixelated already). Others are decent candidates if you can accept some letterboxing (say, 420x240 -- although that's not perfectly 16:9 either).
I agree with this third point. Aim for a fixed widescreen resolution, up\down scale to the display settings later, in real time.
Make a style-guide with your team where you choose the best fixed resolution that gives you enough detail for pretty graphics while still following with your capacity to generate content for that resolution (that is, your art and animation budget), and finally what general visual style you want your game to have.
What I mean is, making a "pixel-art" style game is a very strong thematical decision; Making a high-resolution (almost vector-like) style game is another.
One final note, is that some of the less-expensive "720p" televisions you can find are actually 1366x768 panels that internally upscale the 720p signal, and there's very little you can do about it. I suggest you just write those off, as they're relatively uncommon anyway.
Also, 720p televisions themselves are getting scarcer, enough people still have them that it matters, but there are very few new production 720p televisions. If you absolutely cannot do with 640x360 *AND* you absolutely do not have the budget or means to do 2x oversize art or separate hand-drawn assets, design first for 1080p, and provide a simple fallback for 720p -- either accepting non-perfect scaling, or letterboxing in 720p with an active screen area of 960x540.
Ravyne, Kryzon, thanks a lot for the reply you opened my eyes a little.
I was trying to make pixel art (like Castlevania Order of Ecclesia) and I found tutorials where is recommended to draw the sprites in higher resolutions than the final product, for example: if the sprite is 64x64 do it at 128x128 and so on. But I dont really understand this, like you Ravyne said I could make that the engnie do the work and other people said that scale the images etc.
About the final result on TV, the game so far doesn't have the change resolution option, we are making a demo maybe I could work in that later, and the game is for one player, so the camera is going to focus on the player's sprite, so I could program the window (or screen) on the game that only show certain area around the character, I will try the advice you gave me to fit in all without problems.
Thanks again both of you, I'll keep you posted about the game, we actually plan to do a development diary and release it for free on Ouya.
Greetings.
Since you are still figuring out what resolution and style to go to, do a lot of tests - place-holder graphics that follow the direction you're going for.
Try recording the game footage and playing it on a TV, etc.
Hi fmdr,
Working in higher resolutions than needed just refers to the design of the sprites. Shrinking raster graphics is no problem, whereas enlarging them afterwards will result in messy sprites.
I highly recommend inkscape to do everything in vector format. If you do it right, it doesn't necessarily look like a cartoon.
I am also working with vector graphics and I'm open to game art commissions.
And I am offering some animated 2D game characters on my blog:
www.2dee-art.blogspot.com
Regards and good luck with your game!
Thanks again.
Kryzon I agree I have to run some tests to look how the game is looking in different resolutions.
Deeee I visited your blog it is great, i would give it a shot again to inkscape, but I'm not really sure about vectors.
Here's an example of the graphics I'll like to achieve:
http://goo.gl/uX0XIF for raster, and if I got to go with vectorial I'll would try this http://goo.gl/ClSjn
But if I make the sprites in vector graphics in the end the game engine will transform the sprites in raster isn't it?
It would be a challenge anyway.
If some have techniques to share that would be awsome.
Regards.
Yes, normally the game engine will transform everything to raster. There are some approaches to really use vector graphics in games, but normally (even in games like Angry Birds that extremely look like everything is vector, the sprites are just so big and cleverly scaled down to make it smoother) you use raster sprites.
I still suggest Inkscape. I bet you can achieve something similar to the first picture you posted with vectorized body parts combined in a skeletal animation tool that will produce the raster sprites for you.
But in the end it doesn't matter what program you use for creating the parts, they will be raster after exporting anyways.
Just be sure to export dem in a higher resolution than needed, because there will be some quality loss when resizing, rotating and moving the body parts.
If you use clear shapes and bold outlines, you can simulate "Pixel Art" with that technique.
The only thing is, when you use skeletal animation, you won't be able to animate things like fluttering hair or a cape in motion.
But you have to do the hard work only once, and for animating you just have to move the body parts where you need them.
Deeee thanks a lot! I heard about the "skeletal" animation before, I though it was complicated, but doing some research it is not that hard, what I'm doing right now is to draw the sprites and use the bezier tool to work in inkscape, and finally add some details.
For the hair and the cape animation, I think it can be possible to achieve, but it will require more effort, I'll play with the nodes in inkscape.
Thanks to all I'll post the sprites as .gif for all of you to look the result.
Greetings.
(by the way, I found this tutorial http://goo.gl/eGwrn)
