Skyscraper Top Chipset

[Zizka]

Hey guys, it’s been a little while.
So anyway, I’m working on this detective game with some friends (you’ve seen some stuff related to this in the House Chipset).

This is a first scene at the beginning of the game where the main character is investigating a murder.

This is the first version:


And this is the second version:


The stars in the upper left represent how many clues have been found (full stars) and how many clues are still to be found (empty stars).

Now, this is not finished. I still need to remove those lines in the walls as well as to remove that ugly, cloudy background. I want to replace the latter with the landscape of a city by night (you’re supposed to be on top of a skyscraper).

I’d like to get criticism on the other elements of the tileset. As usual, I’ll redo what needs to be done in order to improve.

Your feedback is truly appreciated.

[questseeker]

One thing seems terribly, obviously wrong: the grey tiles behind forward-facing walls. They look like a walkable, correctly lit concrete floor, while in reality they are a combination of wall cross-section and unseen/unexplored space.
I would fade the walls to black, or maybe to a stylized conventional hatching pattern, very few pixels behind the surface instead, making obvious that those tiles are outside the game level's environment.

Smaller issues and suggestions:

• Keep the black void around the visible tiles. It makes sense and it respects conventions, whereas the city scene you mention as a planned improvement would be distracting and unrealistic; maybe you can show small scenes through back-facing windows in case you add them.
• The cartons in the second version are admirably realistic, but too large compared to the person. Can you shrink them without compromising details?
• More varied graffiti, there isn't only white chalk.
• More varied floor types. There is a lot of floor: structuring it with carpets and doormats, steps, patterns of coloured tiles, different materials and tile sizes should be a good thing.
• Lighting differences, improving the current flat appearance. You can add wall lamps (with a section of highlighted wall), or more generally several lighting levels for walls and floors with tile transitions between them (enabling the creation of arbitrary lighting).

[Zizka]

Thank you, I'm still working on fixing the rooftop following (some  ) of your suggestions.

Just a few more things:

Some characters to be added to the map (the characters on the left are my modifications of my comrade's character:

Dude waiting for his internet date:


Prostitute:


Bouncer:


Those things there are on top of stores:


Drug store sign in Europe:


Anyways, as usual, the more the comments, the better.

[Lachie Dazdarian]

Prostitutes seem all wrong. Where's the cleavage, high heels, socks with them...how do you call it? You know?

They look like school teachers. I'm sure something can be done there. Lusher hair style, more provocative pose. Dunno. Left design is definitely better.

And any reason dudes waiting for their internet dates are bald? Maybe you should go with a more nerd type. Glasses, emo haircut.

Very nice work on those things there are on top of stores (canopy), as well as that drug store sign (familiar to me).

Europe rocks!

[PypeBros]

Europe rocks!

^_^ However, the sign doesn't have proper perspective. We should see some part of its top, shouldn't we ?
Imho you're doing the same mistake with the side-view of the bouncer guy: you placed eyes at the same height as if he was facing us (that's okay), but shoulder placement and skull visibility is identical to what a plain side-view would give.

<- that should illustrate what I mean.

[Zizka]

@Lachie Dazdarian & PypeBros:

I've taken notes of your comments, thank you.

Meanwhile, I've tried to implement the changes questseeker suggested (some of them anyway):

*Added stuff behind the windows
*Added rooftop style tile. I didn't cover the whole ground because I wanted to know what you guys thought. I used a reference.
* Added stars at the back to see how it would look and some sort of sunset. This is just a draft for now, I will detail it later.
*Added a numpad to open the gate.
*Added metal stairs, ladder and power box.
*Reduces the size and the disposition of the boxes.
*Fixed the lines
*Added wall lamps

Before:


After:


Keep the suggestions going and I'll what I can do please and thank you.

[Dr D]

A few things.

I don't think that new ground tile works, at all. It's busy and full of what looks like random pixels. I'd scrap it to be honest, what you have now is much more pleasing. If you want to change it try some simple textures and no noisy pixels, and remember to keep the contrast low.

The windows seem to be misplaced, or at least it appears to me they are on the border of the wall that is raised above the ground level on the roof. I don't possibly see how a room could fit in a 2 foot thick roof border. Although that's probably not how you intended it to be, and the issue lies with the fact that edge is lit brighter than the rest of the roof, bringing it to a higher plane.

I don't think the background really works either.

Also, you have a mapping error in the middle with the wall connecting to the black border tiles. Right now it appears to be sloping down from the higher plane to meet the lower wall, when the wall should be an extra 2 tiles high.

And lastly, just a concern. Have you thought about how that numpad controls that gate. It appears to me to be a simple metal gate on a hinge, and I've never a gate like that controlled by a numpad; but I guess it isn't impossible.

[Zizka]

I don't think that new ground tile works, at all. It's busy and full of what looks like random pixels. I'd scrap it to be honest, what you have now is much more pleasing. If you want to change it try some simple textures and no noisy pixels, and remember to keep the contrast low.

Yeah, I was struggling with that, I was trying to reproduce my reference picture:
http://img13.picoodle.com/i58u/freemind/1fic_371_u5vq6.jpg

I knew there was something wrong but couldn't really put my finger as to what it was. Perhaps make the pebbles bigger?

The windows seem to be misplaced, or at least it appears to me they are on the border of the wall that is raised above the ground level on the roof. I don't possibly see how a room could fit in a 2 foot thick roof border. Although that's probably not how you intended it to be, and the issue lies with the fact that edge is lit brighter than the rest of the roof, bringing it to a higher plane.

That's true, I didn't notice that but you're right. I'll fix this, thanks.

I don't think the background really works either.

Yes, that's actually very much WIP. I'm still working on that, should've mentioned it in my previous post.

Ok, back to work then. Thanks for the input, it really does help.

[Zizka]

Alright, here's another attempt. I've tried to fix a few things as you can tell. Let me know what else needs fixing.

I didn't really understand this:

Also, you have a mapping error in the middle with the wall connecting to the black border tiles. Right now it appears to be sloping down from the higher plane to meet the lower wall, when the wall should be an extra 2 tiles high.

Here's the new version, rip it apart  . The major changes should be fairly obvious I would think. I mostly worked on the windows, the wall, the floor texture and the background.

[PypeBros]

the floor texture and the background.

The floor texture is now just random noise, but that's actually better than the previous small dots. eyes tend to erase noise from our perception when it's truly random. Question is: if erased anyway, do you want to keep it ?

The background would be nice for a sideview perspective, but it clearly doesn't work for top-down. What you're supposed to see from that distance, in that orientation is *the city*, from far above, and all around the building. Perhaps roofs of other buildings, but that's unlikely to be any interesting.

[Zizka]

Alright, time for another update. I should probably make up a list of the things you guys have suggested to make sure I'm not missing anything.

[PypeBros]

one last thing disturbs me: you're using plain white or plain black for some scribbling. This is a bit perplexing, as one expects limitted contrast at that distance, and other artifacts, such as chalk not being uniform in brightness on irregular concrete walls.

I also note that you use some smooth shadows around (some) crates. When doing this, make sure it's coherent with your lightsource. Esp, it's unlikely that the shadow would be only a few pixel large on the sides, but stretches far away from the base on the right. It'd be better to only enclose the base, not the whole perspective object. An excessive shadow right below a crate may also give the (false) impression that the crate is "floating over the ground". Imho, you're very close to that boundary with your metallic 9-21 thing on the right of the private eye.

[Zizka]

Arf! You don't miss a thing do you? 

Alright for the boxes, I agree, thanks!

[Facet]

Hey, excellent progress thus far, I submit even more work for you, if you're willing :

A quick fix: raised the height of the wall to the side of the first floor; this is the Escher-like tiling error Dr. D mentioned; just think about the cross-section if something doesn't look quite right elsewhere.

I've doodled a couple ideas here for minimalistic rendering; basically removing or toning down some of the lines and just suggesting a texture on and around borders. I also united the upper and lower floor tones in order to separate them from that of the walls, tried out some light effects as Alex suggested in a post that had to removed and simply blacked out everything outside the confines of the building; my reasoning being that it's more aligned with what your avatar can see and that it helps focus attention on the important stuff anyway.

Lastly some ideas for the simplification of your sprite. Less colours, larger tonal areas. I also shifted him into a more realistic overhead view just for a point of comparison; it is harder to do things that way and I'm not suggesting you adopt it necessarily, but it's good to know the difference.

[Zizka]

Thank you for the feedback, Facet.

The reason why I haven't implemented the lighting just yet is that I'm a bit intimated by the idea of doing it. Not that I couldn't do it, I'm just racking my brain as to how to do it.

I think the best solution would probably be to add semi-transparent black layer on the map and delete that layer where the light zones are? Then I would have to use dithering to do the lights.

It doesn't seem that practical a way of doing it however. As for the rest, the walls are actually already fixed but I didn't to update with only this.

I'll change the ground as well but I don't think I'll touch the charset. It's not that yours isn't good, far from it. It's just that I don't feel like doing the walking animation all over again! 

[PypeBros]

I'll change the ground as well but I don't think I'll touch the charset. It's not that yours isn't good, far from it. It's just that I don't feel like doing the walking animation all over again! 

The you may want to adjust the proportions of the other objects (crates, esp.) to the perspective suggested by the character.

[tim]

I think you could bring a lot of atmosphere by just adding some lighting & shadowing.

Before :


After :


I feel it's more appropriate for a crime scene if you want to reach the "noir" look.

[PypeBros]

I think you could bring a lot of atmosphere by just adding some lighting & shadowing.

It truly does, but imho, it would have to be done in a different way to avoid realism clash (losing the credibility of the fictional world by injecting some photo-realistic aspect to some otherwise non-realistic rendering) (further edit-of-the-edit made comment obsolete).

[Zizka]

Wow. Just wow Tim. I'm speechless, it looks superb.

How did you proceed to create that effect please?

[jams0988]

It truly does, but imho, it would have to be done in a different way to avoid realism clash (losing the credibility of the fictional world by injecting some photo-realistic aspect to some otherwise non-realistic rendering).

Is all shading automatically photorealistic now? = \
How would you have done it? I think the newest version looks pretty great...

[PypeBros]

It truly does, but imho, it would have to be done in a different way to avoid realism clash (losing the credibility of the fictional world by injecting some photo-realistic aspect to some otherwise non-realistic rendering).

Is all shading automatically photorealistic now? = \
How would you have done it? I think the newest version looks pretty great...

No, the revised version with dithering is doing very well.

Unless my screens have tricked my eyes, Tim has revised his edit, which initially used some alpha-blending of a 24-bit shading layer. That was what I commented. Given the size of the mockup, I can understand he decided only to keep the latest edit online.

[tim]

Yes sorry, PypeBros was right. I made a ninja edit to add dithering, because my lighting was too smooth. I'm still not totally convinced by the dithering pattern, to me the lighting is not enough stylized to fit your own pixel art style, but hey, it's better than pure 24 bits gradients. About "how to make this", I'll post a little tutorial in a few hours, but before, I'm busy and I have some work to accomplish.

[jams0988]

No, the revised version with dithering is doing very well.

Unless my screens have tricked my eyes, Tim has revised his edit, which initially used some alpha-blending of a 24-bit shading layer. That was what I commented. Given the size of the mockup, I can understand he decided only to keep the latest edit online.

Ah, okay. I was like "how the hell is dithered lighting photorealistic?!" X'D
I agree that pure gradients would probably look a little weird for this scene, if that's what Tim's first edit was using.

[Zizka]

I'll post a little tutorial in a few hours, but before, I'm busy and I have some work to accomplish.

Tim, I just wanted that I'm dropping by pretty often to see that tutorial. I just wanted to say that if you do make one, it would be really helpful for me (and others I'm assuming).

It's cool if you don't though  .

[tim]

Oh you're right I'm very sorry, I managed to totally forgot about it these last days… I was so busy and tired ! Anyway I'll do it asap, maybe tonight. This week for sure.

[Zizka]

Anyway I'll do it asap, maybe tonight. This week for sure.