How to Develop These Basic Artwork Effects? [closed]

Question

Quick background, I'm a visual designer specializing in web and branding currently engaged in my first Android project doing UI design for a commercial app with a friend. After this project we're going to try tackling a cross-platform mobile game concept and I have some questions concerning how best to go about creating the artwork for specific effects. I have only static design experience, no animation whatsoever. I was briefly a CS major in college so I have a basic understanding of programming concepts, if that matters. I have no idea what game engine we would be using, but just Googling around I would assume something like Corona. My friend is primarily a Java/.Net developer.

Level Design - Say you have a 2D scrolling platform game, where at any given time only one frame of a very large level is visible. Do I design the entire level as one large file in say Illustrator? How would the level map be implemented programmatically? Would a view window be designated that simply scrolls around a large background image, centered on your character? Or would background tiles be stitched together seamlessly as movement occurs?

Layers & Parallax - I understand parallax for depth illusion, but am wondering how it's implemented in mobile games. In the following example there appear to be three layers on which movement occurs independently, the topmost of which being where gameplay actually happens. So are the middle and background layers just some sort of animated movies that loop? I assume games can therefore have multiple transparent layers of background content.

Layers & Parallax Example Image

Animation Workflow & Autonomy - In the following example there are numerous tentacles each with their own specific animations. Considering that over the course of a game there may be 100 or more specifically shaped/sized tentacles, it seems unlikely that each is manually redrawn for each frame of an animation. Because they're relatively simple shapes I would assume there are tools/techniques for automating transitions between various states? Also the eyeballs in this scene operate/animate independently from one another...since they are non-interactive as far as gameplay, would this simply be a video layer of some sort or is each eyeball given game behavior?

Animation Workflow & Autonomy Example Image

Thanks anyone/everyone!!

Answer 1

even tough your question is kind of ambiguous and not really how we do things on this site, let me answer some of it real quick:

1. Level Design: Most levels are either based on a tile-system(that is, they are built from re-using small images over and over again), or they indeed use the level as one big drawn file.

2. Parallax: Indeed, you will have multiple layers with transparency. In general, in games the back-most layer stays still, while the layers more in front move faster, in the opposite direction the player moves in, with the actual level moving equally fast as the player. This is what you see. How it is implemented behind the scene varies (i.e. using cameras or not.)

3. Animation: Probably the different parts are animated on their own. Also, it is possible to do easy rotation and translation effects at runtime in many engines, further enabling the animation-variety.

Answer 2

Okay, so you picked Insanely Twisted Shadow Planet as an example - probably not the best example to visualize "how to" implement levels or anything, but it's an interesting approach.

The following points are just assumptions based on my observations playing the game myself. They might have implemented things a bit different, but this would be one way to do it.

• Their levels (and most likely almost everything else) consist of simple shapes and images clipped together. There's no huge image for the whole map (this would be wasting lots of memory both on disk as well as in memory at runtime).
• The tentacles are one perfect example for this, where they most likely just have simple shapes that are transformed to resemble tentacles. They could have added some more detail, like suckers drawn on top of the tentacles, but they decided to use this specific simplified art style.
• Graphical things you see, the eyes for example, are just small images (sprites) drawn on top of other elements as decoration. They're not part of any gigantic image. In fact, I think the eyes consist of two sprites: One drawing the eye and a second one drawing the pupil. This way you can get thousands of eyes, all looking at different things, while only using two small and static images.
• Parallax scrolling is usually done in a simple way: The game draws layer after layer (only limitation is your machine (performance wise) and your imagination) applying different offsets to them. If the engine supports videos (like Flash), it's possible to use videos here, but usually offsets are applied "by hand" based on the camera's position.
• Animations are usually done using one of to ways: Things are transformed at runtime (e.g. the tentacles) or there are some frames played one after the other (e.g. classic 2D console games.