Critique => Pixel Art => Pixel Art Feature Chest => Topic started by: cels on February 12, 2014, 01:09:12 am

Title: GR#174 Cosmos-X game Mockup - RPG view Gameart
Post by: cels on February 12, 2014, 01:09:12 am
Taking a break from some of my other stuff to do something new.

The idea is basically to make a non-violent X-com. Take everything you love about X-com and then turn it into a wholesome, positive, uplifting game about Mankind coming together and doing something wonderful. No aliens, no evil government plots, none of that. Just... X-com meets Sesame street. In space.


With that out of the way, I'd like some feedback on the general structure of this mockup, particularly in regards to perspective in the foreground and what to do with the background. Pretty much everything is just a crude placeholder, so I don't need to know if the buildings, the GUI or the space shuttle have a poor design. Those will all be rebuilt and redesigned when I'm sure that I have the right direction. In regards to the background, keep in mind that this is a space station orbiting earth. So I'm not sure if I should let the surface of the earth cover the entire background, or let the background be just empty space with stars and nebulae, or if I should keep it similar to what I have here.

Thanks in advance.

EDIT: Also, I don't speak or read Russian, so if Google Translate has fumbled me up, let me know, please!
Title: Re: Cosmos-X game mockup
Post by: astraldata on February 12, 2014, 11:19:19 pm
I would suggest a horizon line that parallaxes with the screen to indicate the roundness of earth (or whatever planet). The stars are mandatory to keep people aware that this is space and some hint of the planet below should be present, though not obscured to the point you can't tell what it is. Just because the title screen says you're in space or the story says you're above the earth, if the game doesn't say it with the visuals while you're playing, you've failed.

Looking at this objectively, I can't tell at all that these guys are in space since the blue could easily be water. There's no hint of roundness, land formations and/or clouds or anything that says this is way in the air. Without you telling me directly, a simple squiggle doesn't do enough to tell my brain that I'm in space, even if there are a few stars above the construction area.

You could add a light cast on the planet by the sun to give a bit of an indication of roundness of the sphere below. I think that would help this tremendously.

Outside of these things, I can't speak on anything else as far as the effectiveness of the GUI or anything since I've never heard of X-com before this. Hopefully what I did provide will help though.
Title: Re: Cosmos-X game mockup
Post by: Cyangmou on February 12, 2014, 11:45:02 pm
perspectivical clash of topdown square tiles and iso cubes and flat frontal seen chars/ships isn't really optimal.
Title: Re: Cosmos-X game mockup
Post by: cels on February 15, 2014, 10:01:20 am
Thanks, guys! Very helpful indeed, although I'm not sure I was able to address your criticism properly.

Just to clarify: The spaceship is a very, very crude isometric oblique mockup. A place-holder, basically.


EDIT: Oblique (http://en.wikipedia.org/wiki/File:Graphical_projection_comparison.png), not isometric. Thanks  ;)
Title: Re: Cosmos-X game mockup
Post by: Mr. Fahrenheit on February 15, 2014, 03:50:05 pm
Are you sure you mean isometric? This looks more like rpg perspective.
Title: Re: Cosmos-X game mockup
Post by: astraldata on February 15, 2014, 06:38:18 pm
Not bad, but the landmasses should have a few connected to one another instead of them all being uniformly-sized/spaced out like that. Just doesn't look natural. In addition, you should think about adding some sense of atmosphere/clouds to the planet (i.e. a glow around the outer edge of the planet where the floating dust/gas particles grab stray light and reflect it back at the observer to show there's an atmosphere, and some semi-transparent cloud striations across the surface at a smaller scale than the land masses, perhaps with shadows on the land masses to indicate some sense of their height as well). You might also want to consider adding a bright star here and there in your sky at least. Space is full of 'em.
Title: Re: Cosmos-X game mockup
Post by: Probo on February 16, 2014, 11:20:10 am
one thing ive noticed as well, to me it looks like the floor tiles are lit from the top left, whereas the sides of the platforms are lit from the bottom left. I suppose you can be creative in space though! have you thought about what the light source is?
Title: Re: Cosmos-X game mockup
Post by: cels on February 16, 2014, 11:43:17 am
@ astraldata: Thanks for the advice! To be honest though, I just put the rough outline for the background there to see if I was headed in the right direction, because I really wasn't sure what would be the best perspective. If what I have now seems reasonable, then I'll go ahead and add more realistic textures to the planet, a hint of atmosphere, different stars and nebulae in space.  I wasn't going to keep it like this  ;D

@ Probo: Well, I'm a total noob when it comes to this sort of pixel art, but my intention was to have the light source above and from top left-ish. However, we can't really see the bright side of any buildings (their "top left side"), so while that side would be brighter, we can't really see anything from this side. But I figured that the bottom left side of buildings would still be brighter than bottom right side, because bottom right is on the opposite side of the light source, and so would be darkest. Does that make sense?

@ Mr. Fahrenheit: Fixed.

Title: Re: Cosmos-X game mockup
Post by: Probo on February 16, 2014, 02:05:02 pm
yeah i do understand your thinking, but on the buildings, with the bottom-left surface being so light, and no shadows to inform us, it does read like the the lightsource comes from the bottom left to me. but also look at the side of the floor, the blue bits with windows? very little light would be getting to the head-on surface but they are the same colour as the angled surface to their right

id maybe change it so the light is coming from front-left and work from that, thatd be the path of least resistance. starting with flipping the floor tiles vertically and make the blue surface facing the light a lighter shade
Title: Re: Cosmos-X game mockup
Post by: cels on February 17, 2014, 12:55:30 pm
Thanks, I see what you're saying. I've made adjustments accordingly, although I'm now thinking that I will also need to change the background completely considering the light source. If the light source is above, then this side of the planet can't be dark. However, I wanted it to be dark in order to make it a dark contrast and a good background for the base. Anyway, here's what I've got now.


Title: Re: Cosmos-X game mockup
Post by: Probo on February 17, 2014, 07:32:01 pm
i think the space station(?) could reasonably have its own light source off-screen, and you could keep the background - the space stations floating rig of angled spotlights wouldnt illuminate the planet. yeah i think thered be a little backlighting from whatever lightsource is behind the planet, but personally with your style here i wouldnt worry too much about making the lighting conditions super realistic, just consistent.
Title: Re: Cosmos-X game mockup
Post by: big brother on February 18, 2014, 02:38:56 am
The lines on the floor tiles align with the edges of both types of raised platforms, and flatten the image. I think the blue edges should be a tad brighter (especially along their outermost edge, since the existing colors seem to imply rim lighting) and thinner. Right now they almost look the same size as the floor tiles, which makes the grid much more obvious. I would also darken the floor and put some small random lights on them to reinforce the setting. Might be worthwhile to turn the crates at angles, adding visual interest and breaking up the grid.

Sprite designs look fun, I like the variety in their silhouettes.
Title: Re: Cosmos-X game mockup
Post by: cels on February 19, 2014, 03:38:40 am
Thanks so much for your help, big brother & Probo

- Tried to add a more realistic texture to the planet in the background. Going to be hard to find a balance between completely photorealistic and pixel art strategy game-y.

- Changed the tiles for the edges / sides of the platforms. I think this looks much better, let me know what you think. The imaginary light source would be coming from above, and I think that helps illustrate that the blue walls are vertical tiles, not horizontal tiles. Having them the same size as the floor tiles makes it easier to combine the two for multi-level platforms.

- I've darkened the floor a bit. Added some small red lights, but I'm not very happy with them.

- Good idea about the crates. Tried to do that, though I'm not sure I got the perspective right.

- Made a few more changes to the menu on the right.

Title: Re: Cosmos-X game mockup
Post by: |||| on February 19, 2014, 03:42:58 am
This is a really great idea for a game Cels. I dig the sprites a lot. Looks like the planet will be a challenge; semi- realistic would look good I think.

About the lights, maybe you could use that maroon/burgundy color you have on the fire for the glow; or just add another color if you need there.
Title: Re: Cosmos-X game mockup
Post by: cels on February 19, 2014, 09:30:58 pm
Thanks a lot! I tried to modify the lighting from the warning lights a bit, to tone it down. It's slightly better, I think, but they still look very... tacked on. Not like part of the installation.

Also adding another sprite. You can't have russian retro sci-fi in space without huge, communist robots helping the people do heavy lifting. With a small risk of malfunction causing them to kill all humans, of course. But maybe they don't look robotic enough. I was very much inspired by Liberty Prime (http://static2.wikia.nocookie.net/__cb20081118144840/fallout/images/4/4d/Prime.jpg) when I drew these, so maybe I need to copy the skinny arms and legs to illustrate that it's a machine.


Title: Re: Cosmos-X game mockup
Post by: Manupix on February 24, 2014, 03:25:04 am
I like this! The (apparent) simplicity and strongly constrained perspective are appealing. You should be careful to preserve them from interference. For instance: I think the blue edges are now overdetailed compared to the 1st versions. Many small items are inconsistent. The bg and meteor 'free style' strongly contradict the style premise.

Generally and without giving it too much thought, I found I wanted it to lean towards those classic ptoing pixels:

(http://www.pixeljoint.com/files/icons/full/gmb3.png)  (http://www.pixeljoint.com/files/icons/full/pinkprimate.png)  (http://www.pixeljoint.com/files/icons/full/magentor.gif)

The emphasis on 45 lines, strong volume rendering despite near abstract perspective and shading, importance of highlights on edges: these do or could apply to your piece, at least potentially. Of course you might choose a different approach, this is just what jumped to my mind ;) Whichever, consistency will be key.

Perspective: your 'impossible' postulate being that both vertical and horizontal surfaces are rendered undistorted as if seen frontally, there can be no foreshortening, squares must remain squares.
Consequently, the platform at center top should have 45 corners like the main floor and everything else; the spaceship reactor casing should be as 'wide' as it is 'tall', etc.

Light: good thing to have flipped the floor tiles edge highlights from back to front, as these now look like bevels lit from above and help perceiving the tiles as horizontal (compared to vertical before). I would like to see lower contrast on the dark lines to help them read as the opposite side bevels.
Generally I see this with a top-down light source for whatever is on the platforms, and another (blue?) source from below for the platform edges. This would impact the spaceship side too.

Background: this is going to be hard! How to keep it from being a distraction, consistent yet readably different? No clear idea but it might be worth trying washing out any details, either in bright light or darkness:

(http://t0.gstatic.com/images?q=tbn:ANd9GcRdDrLz5EbJl7UjryIc_gx8mOhuc7nrPfYIkONIcjdM8U2IfjjLp0ZGNIH3)   (http://ak3.picdn.net/shutterstock/videos/2774549/preview/stock-footage-earth-view-from-space-with-night-city-lights-oceania-and-asia-stunning-view-of-earth-from.jpg)

Have fun!
Title: Re: Cosmos-X game mockup
Post by: cels on February 28, 2014, 05:12:55 pm
Thanks, Manu. Tremendously helpful as always.  :)


- I really like those ptoing pixels. I'm going to try to use those clean and crisp lines, hopefully creating similarly interesting textures without too much detail.
- I'm experimenting with some new blue walls in this piece. It's dead hard to create an interesting texture without too much detail, remaining crisp while being consistent with both a top left warm light and cold blue light from underneath.
- Fixed the platform corners at center top. It wasn't actually an attempt at creating a different perspective before, It was just a corner with different angles. But this looks better now, less confusing, more coherent.
- Started adding some highlights to building corners, etc.
- Toned down the dark shadows on floor tiles.
- Started working on the background..
Title: Re: Cosmos-X game mockup
Post by: cels on March 06, 2014, 12:54:51 am
Some more progress.

Title: Re: Cosmos-X game mockup
Post by: Manupix on March 06, 2014, 01:14:42 am
Good progress!

The earth limb is too bright and very distracting. It's even looks brighter than anything else in the foreground, no?
What about making the whole planet a totally different hue? It doesn't have to be Earth, or does it?
Title: Re: Cosmos-X game mockup
Post by: cels on March 06, 2014, 01:56:05 am

Started working on the ship now too, just to show that the crude mockup wasn't something I intended to keep. Although it's going to be hard to find a design that doesn't crash with the simple, angular style, yet remains faithful to my retro-sci fi vision (think 1960's soviet sci fi)

The planet is already pretty far removed from Earth, so I guess I'm free to make further changes. But what other hue would be appropriate? I thought blue would be least distracting and help unify the whole image. How about purple?



EDIT: Made changes to UI
Title: Re: Cosmos-X game mockup
Post by: Manupix on March 06, 2014, 08:20:47 pm
You've got the planet values right.
That purple is nice. I had Mars on my mind, the spacecraft colors might be nice for that too.

I like where the spacecraft is going, but it still has a different perspective than the station (the width = height idea, no foreshortening). You should try both options (and intermediates): it's possible that the strict station persp would make its volumes hard to read or weird, but it's worth a try, and I find it a bit too inconsistent ('normal') atm.
Title: Re: Cosmos-X game mockup
Post by: cels on March 06, 2014, 08:59:08 pm
Thanks! I'm just not sure how to draw the spaceship in the same perspective, to be honest. For one thing, almost everything on the space station is drawn in 'cubes' that have equal height and depth. But the ship consists of three vertical layers, and the side layers are not as deep as they are tall. This makes it seem like they have a different perspective, when the front of the ship actually follows the same perspective (parallell projection. Both side layers are shown as equally deep, etc)

What really confuses me is how to draw objects that aren't approximate squares, like those rocket engines. And I have no idea how to place them on the body of the ship to maintain symmetry without breaking perspective. It's hard to get a sense of depth.


Title: Re: Cosmos-X game mockup
Post by: Johasu on March 06, 2014, 09:41:49 pm
To my eye it appears you are prioritizing the side view of the ship much more than the top.

The ship has a sort of tongue depressor shape too it, or like a Popsicle stick look to the body.
Edit:  [I actually decided to mockup this up and show better what I was trying to express.]
Yours                   Edit

I tried to show how (I think) the top should look to be in perspective with everything else but I feel like the side profile and under carriage will need work to maintain the shape you have going on.  Hope this helps you some.

Edit:  I think the logical way to solve your issue with scaling is to work in blocks to ensure uniformity.  Ratios such as 1:1, 2:1, and 4:1 are all really easy when you are working from 32x32 blocks.  You could think of your ship as half a block thick and then make it 16 pixels wide from closest edge to back. 
You have that almost perfect 45 degree view that captures 32x32 blocks top and side profile going on so I think this won't hurt anything as far as depth. 
Title: Re: Cosmos-X game mockup
Post by: cels on March 09, 2014, 06:44:27 pm
Thanks! Working with 32 x 32 cubes is probably the way to go. So, let me see if I get this straight. If I want to draw a circle on a vertical wall with a diameter of 20 pixels, does that mean it should be 20 pixels wide and 10 pixels tall?

Here are some designs I've been working on, trying to figure this thing out.

Title: Re: Cosmos-X game mockup
Post by: Johasu on March 09, 2014, 07:57:17 pm

I did a little mockup of some ideas maybe for your windows and doors.  You are doing a dark highlight on top to show shading and a light highlight on the inset windows and landings to show light, but the top down angle makes this a little odd as you probably wouldn't see the shadows from the top view.
Even if you could the color choice is really too strong.

1) The very dark line at the top is pulling the attention too strongly and it makes your window appear more straight on face to face.  It's confusing to the eye on some level that doesn't read well IMO.

2) A suggestion for how to maybe fix this by simply removing the eye boggling shadow.  Perhaps casting a darker yellow on the upper window line would work but the glass is so bright I think just leave it like this.

3) Same way for the door.  That very dark line around the top and sides is making your door appear very flat straight face on to the viewer.  I tried insinuating a deeper shadow line on the left-hand side as the door is likely deeper in than the windows.

4)  I tried a bit deeper still on the door by sliding the door over to look more inside the ship.  I'm not sure how this looks.  Just some ideas.

5)  The square windows have the same issue going on.  If we are looking from 3/4s above you wouldn't see much shadowing on the window.  The light from the window would be stronger anyway I would think from above.

 ???  I'm honestly not sure I follow the 20x10 on a circle concept.  I may be explaining something wrong.

with a 32 pixel block you have certain scaling options that work well.  Half of 32 is 16 so if you consider a single 32 pixel block to be 10 feet tall (by scale) 16 pixels would be 5 feet.  You can use that to set up a full scale.

32 = 10 ft
16 = 5
8  =  2.5 ft
64 = 20 ft
                 and so on

I hope this helps some.  I think a circular window will still look circular but with the top down you just take into account the depth of your inset on the bottom lip/sill/landing.
Title: Re: Cosmos-X game mockup
Post by: Alex Sinigaglia on March 10, 2014, 06:13:32 pm
I think there should be some kind of transition between the purple and the brown colours.

And looking closely I saw some blue pixels in the planet.
Title: Re: Cosmos-X game mockup
Post by: cels on March 13, 2014, 10:10:31 pm
@Alex: I wasn't going to keep it like that. I showed different colours, in case someone wanted to pick a favourite.

@Johasu: Thanks a lot! I don't know how I missed that. I've amended my mistake in this latest version.

Title: Re: Cosmos-X game mockup
Post by: Mr. Fahrenheit on March 14, 2014, 02:09:52 am
You could probably do some crazy hue shifting on the planet rather then just go straight purple or straight orange. Best of both worlds!
Title: Re: Cosmos-X game mockup
Post by: Kosvid on March 14, 2014, 09:24:10 am
"Илья Муромец"  ;D

Now everything looks much refined in comparison with the first version. I liked the blue planet more, though. But the purple one is a good one, too. Try to combine these colours - I think they can make a better complex appearance. There are few discrepancies (for example, there is no way to the ship`s doors and an additional useless door near the ship`s engines), but I believe those are just WIP rough drafts, and you`ve been going to fix them.
Title: Re: Cosmos-X game mockup
Post by: Alex Sinigaglia on March 14, 2014, 10:14:23 am
You could probably do some crazy hue shifting on the planet rather then just go straight purple or straight orange. Best of both worlds!
That's what I wanted to say before.
Title: Re: Cosmos-X game mockup
Post by: Manupix on March 16, 2014, 01:02:21 am
Ship is coming along well. Still somewhat narrow in terms of perspective, but nothing outrageous.
I don't like how it fills up all the space between the platforms though, messes the composition. Either shorten it a bit, or the platforms.
Are the blue patches supposed to be scratches? They look out of style.
One trick for adding wear to metal objects is to concentrate on the edges, where paint would flake most and metal underneath be worn glossy, more so than on flat surfaces: this is pixeled by brightening and desaturating edge and neighboring pixels according to their exposure (edginess). An example coming to mind is Carnivac (http://www.pixeljoint.com/p/449.htm)'s avatar, I know I've seen it done more prominently elsewhere too.

I've just noticed the small hexagonal raised platform at right bugs me, not sure why. It draws attention a lot, and it's shape doesn't really fit, even if the angles do.
Title: Re: Cosmos-X game mockup
Post by: cels on March 16, 2014, 11:40:42 pm
Thanks for your continued help, guys.

- I've barely begun working on the hue shifting on the planet in the background, from purple to orange. It may take a while to find something that looks good without being too prominent and eye-catching.
- I've marked the way to enter the ship on the platform. Agent00X, there is no useless door, it's just an access hatch for maintenance and such.
- I've tried to alter the dimensions of the ship.
- Manupix, I see what you mean about desaturating edges to make them look worn down. But I wanted to make the space ship look more like it's crashed into something or been hit by debris and asteroids, rather than the kind of wear and tear that you'd see on the edges of a military jeep or something like that.
- Changed the hexagonal platform. I want some kind of structure there, so that the docking bay isn't just a big, boring, flat U-shape in space.
- Made some changes to the UI, to make it less... ugly. Hopefully.

Title: Re: Cosmos-X game mockup
Post by: Beetleking22 on March 16, 2014, 11:54:17 pm
Its looks pretty amazing.. The planet needs AA.. Those angles are pretty sharp...