Graphics Help Me Improve My Sprites

Discussion in 'Game Design, Development And Publishing' started by Red Phantom, Sep 12, 2019.

  1. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Hey, I need help improving the quality of my sprites.
    How could I improve them? Or do them better?

    Please see click these links to go to the latest parts of this thread where I need help:
    https://forum.yoyogames.com/index.php?threads/help-me-improve-my-sprites.67388/#post-402245
    https://forum.yoyogames.com/index.php?threads/help-me-improve-my-sprites.67388/#post-402057
    https://forum.yoyogames.com/index.php?threads/help-me-improve-my-sprites.67388/#post-402058

    Any suggestions, feedback or edits on my work, would be greatly appreciated!

    New Versions of Buildings (credit to 'Lurk' for editing and great advice)
    #1 Residential Buildings
    [​IMG] [​IMG]


    Old Versions of Buildings
    #1 Residential Buildings
    G-Building 3x3 With Door Closed.png G-Building 3x3 With Door.png G-Building 3x3.png
    #2 Laboratory
    Lab Lighter Door V2 With Door Closed V2.png Lab Lighter Door V2 With Door.png
     
    Last edited: Sep 17, 2019 at 8:56 AM
    SilentxxBunny likes this.
  2. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,570
    • Things in the background should have duller and darker colors, so they don't compete for your attention with stuff in the foreground. The laboratory has a really distracting pattern and color.
    • You could put the door on a separate sprite (or as a separate object), this lets you make fewer sprites and also COMBINE them (e.g. a door can be wooden, metal, or painted in different colors, with or without blood splatters, etc) to get even more variety!
    • The laboratory doesn't look like one... IRL labs usually don't have windows (because that lets the spies see what you do, also all the explosions just destroy the windows anyway), and are painted white, and have a logo with a chemical flask on the roof. Also, the residential buildings IRL always has windows, and your don't! Use iconography and building design to convey what they're for. Don't forget you can see what real houses looks like in Google Maps:
      [​IMG]

      (disclaimer: this may or may not be a real house - provided for illustrative purposes only)
     
  3. HeWhoShallNotBeNamed

    HeWhoShallNotBeNamed Member

    Joined:
    Nov 9, 2018
    Posts:
    65
    The pattern on the laboratory sprite is definitely distracting. It looks more like the floor of a diner than the wall of a science facility. Real labs tend to be more nondescript, with white or gray walls. The windows look good (especially the glare in the one on the left), but they would probably be better on the residential building. Lab windows would be larger. And reinforced against explosions. The residential pattern is nice, but if you're having multiple buildings in one scene you should mix up the colors from building to building. Have gray or blue buildings in addition to the green ones. Even if its the same brick pattern otherwise, the change in color would help give a sense of variety.
     
    Red Phantom and EvanSki like this.
  4. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Thank you for this great advice.
    Is it really in the background though? Because these are intractable objects (you can actually enter these buildings!) aren't they considered in the foreground (I could be wrong). So for this reason I could keep the colours for the residential building the same. I agree that the laboratory has a really distracting pattern and colour, I will re-do the laboratory.


    I agree with this, I will remove the windows of the laboratory and put them on the residential buildings instead.

    Thanks, I am going to change the laboratory sprite. I will make my new lab building sprite more nondescript, with grey walls.

    This is great advice, actually I already incorporate 4 different building colours in my game (green, grey, blue, gold). (Yes I know grey technically does not count as a colour).
    [​IMG] [​IMG]
    [​IMG] [​IMG]

    Here you can see the residential buildings and how they fit in (or don't) with the rest of the imagery. If you have any comments to improve: inventory, map, healthbar, street-light or the background please comment! I am currently very satisfied with all the sprites in this image except: the laboratory and the map.
    upload_2019-9-13_11-16-10.png
    Buildings have been changed since this image.
    Please ignore the watermark, I work with gamemaker lite because it's easier for me then transfer my work in GMS2.
     
    Last edited: Sep 17, 2019 at 5:08 AM
  5. pixeltroid

    pixeltroid Member

    Joined:
    Jul 23, 2016
    Posts:
    662
    1. Brick walls : you can improve it by showing highlights on the top part of the brick....and by adding cracks and pockmarks. Right now, it just looks too clean. Also, I wouldn't use a black outline to distinguish each brick as it would make it very jarring, especially when they cover an entire room.
    2. Laboratory: I agree with what has been said by others before me. The yellow and black is a little too harsh on the eyes. Tone it down a little. Just go for a neutral gray-green or gray-blue. Then add props like pipes, vents, computer monitors and of course, highly flammable cylinders. Basically, you just throw in objects that you know people have seen in laborataries in movies and games.
     
    Red Phantom likes this.
  6. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    New Laboratory Design Possibilities (please note colour - of low saturation - will be added when my computer colours are fixed)

    Design 1 Design 2 (Inner outline removed) Design 3 Design 4 Design 5 Concept - 'Cracks'
    Lab Progress 2.png Lab Progress 3.png Lab Progress 4.png Lab Progress 5.png Lab Progress 6.png

    I need help choosing! These are all my different designs for the laboratory. Please keep in mind that I want my laboratory to look different to my residential buildings, I can do this by using a different building shape/structure as in designs #1-3 however, I don't want to use design #4 as it is too similar to my residential buildings.
    Which structure design (#1-4) do you think I should use?


    Please check my new designs.

    Ok I'm soon going to upload an edit including: highlights on the top part of the brick. I'm also going to change the outline of my residential buildings to be more similar to the outline in my new laboratory building. I agree the black outline to distinguish each brick is very jarring.

    I will add low-saturation colour I'm going to try a grey-yellow. If that doesn't work I'll use grey-green or grey-blue.

    Amazing suggestions, some of these things I will add to the interior rooms of my laboratory.

    Once again thank you so much to everyone who has provided feedback, please answer my above in-colour questions too if you can.
     
    Last edited: Sep 16, 2019
  7. Zuurix

    Zuurix Member

    Joined:
    Jun 20, 2016
    Posts:
    293
    Consider making the laboratory much larger than other buildings, windowless, and with signs near the door. "Authorized personnel only" or something like that.

    The residential buildings look more like warehouses, but I think it works with the depressing atmosphere.
    I'd prefer if all brick buildings would be brick-colored. Red or grey.

    For variation, you could have plastered buildings (that could also be dyed).
    E.g.:

    [​IMG]

    If you're going to use cracks, don't use so many of them, and don't put them on the door, looks unnatural, kind of like building was being pierced multiple times by a large calliber gun.
     
    Toque and Red Phantom like this.
  8. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Ok this is great advice! Thank you. I am going to make the laboratory much larger than the other buildings, windowless, and with signs near the door saying "Authorized personnel only."

    I agree with this absolutely, they do look like warehouses however, it works with the depressing atmosphere so I'm going to keep it.
    For now I'm going to keep the green and blue coloured brick buildings just to make the game that tiny bit more special, unique and strange(in a good way).

    This is a great idea! Almost a bit ambitious a risky as it completely changes the aesthetic/visual! And it's a lot of just one colour too which can be damaging to the visual despite it being plaster. I'm tossing up between whether or not I should do the plastering at the moment, seriously considering it.

    Another great point. I won't be putting any more holes in doors. Cracks/holes just strike me as very unusual on brick buildings. I'm not going to put cracks/holes on brick buildings but rather on wooden buildings which I have later in the game, like this one:
    Jungle Houseeeee .png
    I plan on re-doing the vines in this image.

    Once again thank you so much to everyone who has provided feedback, please answer my above in-colour question too if you can.
     
    Last edited: Sep 13, 2019
  9. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
    Red Phantom likes this.
  10. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
    Here I started what I would do for abounded house look. Im not a pixel artist. I just pretend to be.

    But if you have style or look to your art it might look odd to just start some different look. But just to get you thinking

    Nature is rarely straight or flat. It looks strange. Rigid patterns in things is distracting so its good to break it up. Again Im not saying this is how you should do your art. But just to start thinking about what you can add or do to break things up a little.
     

    Attached Files:

    Red Phantom likes this.
  11. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
  12. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
    Ok your new laboratory image.

    Adding cracks is a good idea.
    1) Less cracks
    2) different sizes and shapes.
    3) A crack in a door would not look exactly the same as a crack in a brick wall........ Maybe take door cracks out.
    4) different size. Maybe make building wider.

    Why is it cracked? Old, damage from bomb? Character?
     
    Last edited: Sep 13, 2019
  13. pixeltroid

    pixeltroid Member

    Joined:
    Jul 23, 2016
    Posts:
    662

    A few things to consider:
    I think the laboratory building (as well as the residential buildings) should be much larger and have a proper building structure.

    They can't just be rectangles with a door in the center.

    That's simply not how buildings in platform games are drawn.

    In most platformer games, you will notice that you don't see the entire building in one frame, but only parts of it. And even then you see lots of details:

    [​IMG]

    Just refer to platformer games set in a city and you will see how many props the artists create to sell the idea that the action is taking place in a city
    - Chainlink fences
    - fences
    - grills
    - parked cars
    - shutters
    - glazing
    - closed doors
    - neon lights
    - signages
    - garbage dumpsters
    - graffitti

    --------------------------------------

    As for the laboratory, the options you showed are not very different from each other. Use a good reference image to try and visualize what the lab's exterior would look like.

    Also consider these:
    Maybe the lab should be in it's own area and not just be another building next to a bunch of nondescript buildings? Maybe it's in a different zone entirely and you need to go through the security compound?

    But whatever it is, just showing a block with a door and calling it a building isn't a good design decision, IMO.
     
    Yal and Red Phantom like this.
  14. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013

    Robocop looks great. Thats a lot of time and skill there.

    Now pixeltroid knows pixels!!!!!
    I think it really depends on your game and what you want to do and how far into the game you are..... It might be the best pixel art you can do and happy with a few adjustments. Thats cool. Its great you ask and willing to work on it. Learn and get better but keep working on your game...... have fun..

    I wish I could do better pixel art. Especially characters!!!! I read and watch endless tutorials hoping enough practice it will just click. But it evades me......haha..
     
    Red Phantom likes this.
  15. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    That vine tutorial is great!
    No, I'm using graphics gale and am probably going to stick to at as I'm very comfortable with it.

    I understand what you are saying about art, it's ok to be a bit strange however, there's a differences between strange and bad, unfortunately my vines were more bad than strange in my own opinion.

    This is an amazing edit, well done. I'm going to continue and work with this edit.

    4) Yes I'm going to make my residential buildings larger now (exterior).

    I understand exactly where you are coming from. "In most platformer games, you will notice that you don't see the entire building in one frame, but only parts of it."
    Not all platformer games need to have proportionate buildings.
    It all depends on how realistic you want your game to look, some people tend to go for a more unrealistic but still nice look that has a sense of fantasy to it.
    Not everything in every great game needs to be proportionate.
    You'll find in many games the exterior exists dis-proportionally to the interior, the interior is wonderously large to the exterior. E.g. the pokemon centre in pokemon fire-red/leaf-green is really small on the outside but bigger on the interior.
    You also have to consider that I am not trying to identically replicate the visual style of what you showed me however I can definitely learn and gather particular things from it. Such as the list of props you mentioned:

    I have already added chainlink fences to my game.
    Wooden fences didn't look as good with my brick buildings.
    Grills - pass.
    Parks cars - I don't want my world looking very industrialized, avoiding this is a deliberate decision.
    Shutters - definitely to consider
    Glazing - I will add this
    Closed doors - already have this
    Neon lights - again to modernized for my games' world
    Signages - will add this
    Garbage dumpsters - I will add these
    Graffitti - I may possibly add.

    This is a great idea however, it will cause massive changes to: sequence of game, even story and programming. Still I'm going to think about it until I get my computer fixed.

    Can't wait until my main computer is fixed or I at least get my data recovered, as I will then be able to start resuming my development of "Meskhenet" again properly.

    A massive thank you to Toque and pixeltroid for the superb feedback.

    My bat sprite is pretty horrible and that I want to redo it (same size but looking a lot better):
    Bat.gif

    I put a lot of effort into my 'electric power box' (which powers all of the laboratory).
    However perhaps you have some suggestions to improve it.
    Electric Power Box - With LightV2.gif

    My map is very simple, there's got to be a way to make it look better (without making it bigger):
    Map0005.png

    Finally there's my paintings, which can definitely be improved, if you have any ideas for super small pixel paintings in a game let me know, so I can replace some of these, especially the last two. #4,5 are meant to be a bit abstract, but who knows perhaps they still look like rubbish to everyone.
    Paintings V2 Tile.png

    I currently found a really good solution to the visual of my residential buildings (credit to "Lurk" for editting my image and producing the image you see below) and would rather that any feedback is focus on my other sprites, such as the ones above here.
    pixeltest.png
     
    Last edited: Sep 13, 2019
    SnotWaffle Studios likes this.
  16. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
    Yeah those bricks look great.

    There are many pixel brick patterns to be found so you got a better one there.

    What is the bat animation suppose to be???

    Did you want the power box to move side to side?
     

    Attached Files:

    Last edited: Sep 13, 2019
    Red Phantom likes this.
  17. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    820
    Your color choice is really bland/random. Look up on some color theory YouTube videos and make a cool color palette
     
  18. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
    Yes. Find a nice colour palette that you like or fits your game and then stick to the colours in that palette. Restricting your # of colours can make things easier as well.

    PM's some stuff about the bat map and electrical box.

    The paintings look good stick with them. Not all paintings are square. A lot are rectangular too.
     
    SilentxxBunny and Red Phantom like this.
  19. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,570
    A lot of real paintings are in the public domain now, so you could get higher-quality painting images by getting some photos of them, resize them to match your game, and maybe force them into a 4 / 8 / 16 color palette so they look more retro.
     
    SilentxxBunny and Toque like this.
  20. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Original:
    1280px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg

    Colours changes to 16 colour palette so they look more retro.

    Resized to match game (appearance in game windowed mode):
    Starry Night.png

    Another resized painting with colour palette changed to 16:
    Rose 1.png
     
    Last edited: Sep 17, 2019 at 4:52 AM
    SilentxxBunny likes this.
  21. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    I have handpicked some of my worst sprites for my game that I want to change or redo: (actual size of sprites given)
    Desired viewpoint - perfectly on the side. Not isometric.
    Note: Colours on my computer are now fixed, so I no longer have to edit in greyscale!

    Part 1
    1. Tree stump:
    Tree stump.png
    2. River (here are the 3 sprites for the animation of the river moving), you can put them together in sequence in a graphics-editing-program like graphics-gale:
    River Right -Straight0000.png

    River Right -Straight0001.png

    River Right -Straight0002.png
     
    Last edited: Sep 17, 2019 at 4:42 AM
  22. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    I have handpicked some of my worst sprites for my game that I want to change or redo: (actual size of sprites given)
    Desired viewpoint - perfectly on the side. Not isometric.

    Part 2
    1. Table - I can get away with using this table as it is clean, but it is a bit boring.
    Basic Table.png

    2. Chair - I want it to match the table. Again I can get away with using this chair as it is clean, but it is a bit boring.
    Basic Chair.png

    3. Beds tileset - I can get away with using these beds as they are clean, but they are a bit boring.
    Beds 4 V1 Tileset.png
    Note to self: sprites to post later to also seek improvement on: PSI building lights, vases(all except #4-6)
     
    Last edited: Sep 17, 2019 at 4:43 AM
  23. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
    After playing the game I think @pixeltroids thoughts on buildings etc are correct. I wonder if you could keep the simple style you have but add those features. Need to differentiate too. Hard to know was I just in this building? Because they all look the same......
     
    Red Phantom likes this.
  24. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    I am seeking feedback and criticism on about 60% of all sprites in my game.
    Note all these sprites are being used currently (except only 1 where there is an 'option')
    Everything below is the current actual size of the sprites.


    Main Character
    [​IMG]

    Buildings
    Residential (repeated and most common building, comes in green, grey, gold too) - This sprite is finalized or so I thought (see amazing edits below) -credit to 'Lurk' for editing
    [​IMG]

    Laboratory Option 1 - needs to be rescaled bigger
    [​IMG]

    Laboratory Option 2
    [​IMG]

    Enemy Hideout
    [​IMG]

    Research Building
    [​IMG]

    Background Tiles
    Graveyard
    [​IMG]

    Cities
    [​IMG]

    Wooden Water Path
    [​IMG]

    Forest Option 1
    [​IMG]
     
    Last edited: Sep 18, 2019 at 4:34 PM
  25. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Forest Option 2
    [​IMG]

    Paintings
    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]

    Gravestones
    [​IMG] [​IMG] [​IMG]
     
  26. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Lights Off - Different Lights For Different Types of Buildings
    [​IMG] [​IMG] [​IMG] [​IMG]

    Lights On
    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]
     
  27. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Shelves
    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]

    Tables & Chairs
    [​IMG] [​IMG] [​IMG] [​IMG]
     
  28. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
  29. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
  30. pixeltroid

    pixeltroid Member

    Joined:
    Jul 23, 2016
    Posts:
    662
    instead of showing game objects in isolation, show how it looks after being placed inside a room.
     
    Toque, KPJ and Red Phantom like this.
  31. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Please give feedback on my graphics/sprites:

    Scene 1: Graveyard
    [​IMG]

    Scene 2: City
    [​IMG]
     
    Last edited: Sep 17, 2019 at 1:37 PM
  32. sitebender

    sitebender Member

    Joined:
    Sep 13, 2016
    Posts:
    813
    Graveyard needs to be darker. Darker in pixel art usually means go for purple or blue rather than the saturation.

    Those lamps in the second photo are traditionally shorter and not taller than a parson, but who I am I to stiffel your creativity?

    Those buildings? Get some windows and signs to tighten things up.

    Get some actual backgrounds and vistas behind your buildings and your graveyard. For the graveyard I recommend darkness, night sky, tall woods in the background and creepy trees in the background. Add fences to both, wooden fences in one.

    Your building windows are illuminated around them... but not in them. That doorway is at the edge of the building. Which is weird. Add edgework to the buildings. Make a sidewalk or something dark under the screen so it's not just grey. Hanging lights too, short windows up at the top of buildings, awnings, pillars.

    It looks like you're going with more realism, your buildings might want more realistic colors than rainbow.

    I also think you've got too many colors with your groundwork. There's dozens of greens when you might just need 5?
     
    Last edited: Sep 17, 2019 at 2:58 PM
  33. pixeltroid

    pixeltroid Member

    Joined:
    Jul 23, 2016
    Posts:
    662
    Your backgrounds could use a little more work. It's looking...like a big concrete wall. Why cant you show trees as the background for the graveyard? And buildings for the city? They don't even have to be detailed. Just silhouettes would do.

    Again, the buildings are looking rather featureless IMO. They are still just brick blocks with a door. Consider adding some detail to them....like broken window panes, pillars, skirtings, signages, pipes, grills, balconies, creepers, posters etc. These are very simple things to draw and they add a lot of life to your visuals.

    Here, I made this in like 20 minutes:

    meshk.png
     
  34. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
    If you google images of houses or buildings then you will have ideas what detail to add.

    Thats great @pixeltroid. Nice indeed.
     
    pixeltroid and Red Phantom like this.
  35. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Sincerely thank you sitebender and pixeltroid for this great advice.

    I understand this completely, you'll see a new background soon!

    Good spot! I'll shorten them a bit to keep consistent with the "more realism" style.

    Ok will definitely do this!

    These are some great sightings you've made. Edgework to the buildings is a splendid idea. These features are also good ideas.

    This is a great point! Consistency in style is always good.

    Yes I made that sprite before I looked into colour palettes. I'm now doing a little bit of research and reading up on pixel art. There's so much more to pixel art than I initially thought.

    Also I really like your edit pixeltroid, it's superb imo. However I won't be using the hotel sign because it's not a hotel. The added papers are really cool and I love them aesthetically, but I'm not sure If I can add them to a residential building without context.

    sitebender and pixeltroid I'll confess that I was scared of adding features to the building in fear I might ruin them with low-quality pixel art additions. After seeing your edit though pixeltroid I've gotten a bit of confidence that I can do it, or at least try.
    Give me a few hours and I'll have the whole two scenes re-done!
     
  36. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Ok so, so far I attempted to improve the graveyard however, it actually looks worse:
    [​IMG]

    In my opinion it looks better without the trees and the path (because I somehow didn't include them better or do them properly)
    Note: I'm thinking of halving the saturation of this purple background as I think it's still too saturated.
    [​IMG]

    The first thing I did was change the background colour to a dark purple. Purple felt perfect as it reflected this ominous and ghostly feel.
    However as soon as I put the first tree in it ruined the image.
    I then created a swivel path that continues forever into the screen. I put two trees by the beginning of the path and put a simplified graphical impression of barbwire fencing between the two trees.

    Things I didn't get time to do:
    1. Clean up the tile edges of the background tile so that there isn't a clear separation when putting the tiles side by side.
    2. Make 1-2 more different versions of the 'creepy' tree

    I also tried this:
    [​IMG]

    I will post an updated "City Scene" soon, which should be better.
     
    Last edited: Sep 17, 2019 at 6:23 PM
    SilentxxBunny likes this.
  37. Rayek

    Rayek Member

    Joined:
    Jun 27, 2017
    Posts:
    187
    The reason it looks worse is because you have clashing projections: a flat side view in the foreground, and an axonometric three-quarter view of sorts in the background. Those two styles will collide. The ancient Egyptians used a similar style.

    Unless you are mimicking an old Egyptian drawing style, combining clashing view projections will look very, very odd and even ugly. Instead, use the trees in overlapping parallax and increase/decrease the scale of objects in the background based on their distance from the foreground elements.

    Read up on the theory of view projections used in games here:
    https://medium.com/retronator-magaz...ame-examples-part-1-introduction-aa3d051c137d
    https://medium.com/retronator-magaz...o-game-examples-part-2-multiview-8e9ad7d9e32f

    Parallax scrolling techniques:
    https://en.wikipedia.org/wiki/Parallax_scrolling
     
  38. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Question:
    I want the buildings that you can enter to be in the foreground.
    I want the buildings that you can not enter to be in the background.
    The buildings in the background are the same as the ones in the foreground except they don't have doors (to give them more of a background feel).

    For the buildings in the background, to make them more in the background and less in the foreground should I:
    1. Decrease the saturation?
    2. Decrease the value(brightness)?
    3. Decrease both the saturation and value?
    4. Is it personal preference?
     
    SilentxxBunny likes this.
  39. pixeltroid

    pixeltroid Member

    Joined:
    Jul 23, 2016
    Posts:
    662
    yeah just show a direct front view of the trees.

    You can decrease both the value and the saturation to see what works best.

    But you should also remove any outlines and simplify any details. Another trick is to match the color scheme of the background buildings to the color scheme of the sky.

    The best thing to do is create a large looped image like a city skyline and use it as a background image.

    For your game you should ideally look at games set in cities to get a better idea.
     
    Red Phantom likes this.
  40. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Step 1 - Show everyone new city scene image, right here right now.
    Step 2 -
    Write up a reply post here on exactly how I did all the changes and why I did them all - will take 30 minutes to an hour.

    OK! I've been working non-stop for the past 8 hours, on both the city and the graveyard, mainly the city though, here is my prized result, what do you think? (note still have to fix the grey buildings roof)
    [​IMG]
    Massive improvement from this:
    [​IMG]
     
    Last edited: Sep 18, 2019 at 4:26 PM
    Toque likes this.
  41. sitebender

    sitebender Member

    Joined:
    Sep 13, 2016
    Posts:
    813
    Color tone changes will help a lot. That ground window of the red building is a bit high, unless it's a factory or something. I thought those crates were a door. I think you need to make them darker or something. Coloring a random block here and there will give you texture. Speaking of texture, your colors have always been a little flat and I recommend changing your hues each time you shift your darkness. Signs above doors help close the gap of unused space. Adding more shadow under the awning will also help it close up the space. Added a hanging lamp. To fill up more space I added a cement foundation that looks like the floor trim of a house, but I swear it's a foundation. Drain pipe to fill more space.

    I also want to point out you want these to be tiled so you can make your buildings taller, wider, make some diverse buildings even using the same tiles.
    [​IMG]
    [​IMG]
    My red lamp is a bit ugly.

    [​IMG]

    Night time... where everything is purple or blue:
    [​IMG]
     
    Last edited: Sep 18, 2019 at 4:19 PM
    Toque and Red Phantom like this.
  42. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
    Okay getting better. Maybe still a bit too the same. Dont put the posters on every house. At some point to you have to think. People live in this town and are being tortured and killed. But honestly I dont seem to care....... Lets make the player care. Lets make them relatable. Im not exactly sure what the story is here yet? But if its a house. I would start adding house like things.
    If thats what you are going for........??


    So someone lives here.......
    yellowHouse.png

    Compared to.

    HouseWindowBikeBox.png
     
    Red Phantom likes this.
  43. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    The Phenomenal Development of the Building:

    Step 1 - Building Blocks
    2-3 years ago. This was my first time attempting a building sprite. I figured out for myself how to do some nice simple bricks and after that I thought wow I can't believe I just made that, every other little ***** stick character I made before that was a piece of junk, but this was better than anything I had ever done before. Yes I know it isn't good at all at this stage however, for me this was a big first step which I was very happy with.
    [​IMG]

    Step 2 - Roof and Door
    Once again I was very pleased (remember this is a person who had 0 pixel-art skills 2-3 years ago and barely has any now) with my simple but definite progress. It actually looked like a house of some-sort.
    [​IMG]

    Step 3 - Amazing grunge and essential re-sizing (Lurk the genius) Warning: Major Progress Here
    Credit and sincere thank you to 'Lurk' for adding and teaching the amazing grunge.
    I was in awe when I saw the grunge he added and how much better it made the building look.


    [​IMG]

    Step 4 - Superbly improved roof

    Again credit to 'Lurk' for adding shape, volume with value, and shadow to my roof. I was also amazed with this improvement.
    [​IMG]

    Step 5 - Amazing details (pixeltroid you are a pixel artist) Warning: Major Progress Here

    Credit and sincere thank you to 'pixeltroid' for this amazing edit. Here pixeltroid added some really aesthetic notice papers which I quickly couldn't stop staring at. Not to mention an amazing window and neon-lit hotel title. I was also in awe with this edit/major-improvement.
    [​IMG]

    Step 6 - Personally stylized windows, removed title, no more rainbow colours!

    So this was my edit. Perhaps not an improvement, it looks good to me but I could be wrong. If it looks bad to everyone else then I will change it. Here I changed the windows to something of my personal taste and removed the top and bottom border of the window which looked a bit un-natural to me and intrusive on the bricks on the rest of the building. Thanks to 'sitebender's' advice I changed the building from a rainbow colour to a more natural colour to fit my game's theme of realism to an extent
    [​IMG]

    Step 7 - The prized result of three great artists working together. WARNING: I fell in love.

    Ok so after three superb pixel-artist (+ hardly much from me), did their work on the building, I fell in love with the magnificent result.
    Credit to sitebender for the doing one-of-the-last-if-not-last step to this masterpiece with a very substantial input.

    [​IMG]




     
    Last edited: Sep 18, 2019 at 4:25 PM
    Zuurix, Toque and sitebender like this.
  44. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013

    Wow. Looking good. Art is a process for sure. I am impressed what they can do as well. This will take me years to get to that level.
    If these are houses. Maybe a house number on top of the door might make it more house like as well. Lurk is great as well.........

    I think people are happy to help when they see you are learning and putting lots of hours of effort into it.
    Well done.
     
    Red Phantom likes this.
  45. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Part 2
    Ok so when it comes to pixel-art I think 'how you think' and 'how you approach it' is extraordinarily important.

    So I'm going to explain my thought process as a novice artist.

    Please give feedback on both my artist thinking process and my actual final result of the city scene.

    STEP 1

    First of all I should explain my game's atmosphere and my personalized art-style(personal preferences).:
    - murky
    - dreary
    - dismal
    - haunting
    - ghostly
    - cursing
    - mysterious
    - mystic
    - dark
    - not very industrialized: no-neon
    - realism (to an extent)
    - cold
    - despair
    - gloomy

    I have a very philosophical personality. I consider art-style and game's atmosphere to be inter-connected. I believe that if you are trying to make the player of your game feel a certain way, or if you are trying to great a certain atmosphere in your game, art can help you! Your art and your art decisions will impact the atmosphere of the game and the way the player feels when playing the game. Is it serious or funny? Fantasy or reality? Happy or sad? Energizing or depressing?

    STEP 2
    Second of all, now let's take a look at all the essential parts of advice I got which guided me and influenced my artistic thinking positively:

    Note: things in background have less value in colours so they don't compete with the foreground. Residential buildings irl have windows, should probably have windows in game aswell however, it is also personal preference. Use iconography and building design to convey what they're for.

    Note: Colour variety between buildings for aesthetic purposes and for differentiating (I know I'm using this word wrongly but you get it) purposes so the player doesn't get lost.

    Note: buildings work with the atmosphere which is great. Use smarter and more meaningful brick colours.

    Note: Better proportion of buildings. Although sometimes in the fantasy world of games proportions can be up to personal preference, it is usually better to have at least decent proportions. Add details to both building itself and the whole city scenery. From what pixeltroid listed, these options I personally prefer and suit my game more: chainlink fences, fences, shutters, glazing, closed doors, signages, garbage dumpsters, graffiti.

    Note: Improve colour palette to something more meaningful, less random and more aesthetically pleasing.

    Note: colour palette should also suit game, that means it can be monochromatic if that's your style, or high value colours for a neon-light effect. Restricting number of colours makes things easier and is usually more aesthetic in pixel art in my opinion.

    Note: while absorbing important feedback it is important to remember to keep your games style and art consistent. Add features but do so in a way that suits your game's style. Colours and difference-in-details will help different buildings.

    Note: I am happy with the street light size, the ones on my street irl are much taller than me as reference. Add details on buildings to 'tighten things up'. Again add more features to the backgrounds behind buildings. Fix weird light problem. Add edgework (sidewalk) to the buildings. Hanging lights, short windows, awnings, pillars are possible suggestions.


    Note: Add features to background and on building: broken and not broken window panes, pillars, skirtings, signages, pipes, balconies, creepers, posters.


    I then looked up 'city cartoon' to get some ideas of more objects to add to the background:
    [​IMG]
    From this image I got the idea to add dumpsters.


    STEP 3
    Take note, here was the starting point: (although technically it started way before here, with already massive improvements to the character and blue/gold buildings which were very poor before I seeked advice)
    [​IMG]
    Working from left to right (when I say for detail I also sometimes mean for the atmosphere)

    1. Fix light problem on research building.
    2. Add pathway to research building.
    3. Change gold building to grey as we don't want rainbow colours.
    4. Add moss to grey building for detail.
    5. Add mostly un-saturated broken window panes to grey building but no door because its in the background.
    6. Add trashcans to city for detail
    7. Snakes technically don't belong here, but sometimes in game design you can break the rules of reality. I may remove snakes here and only have them in more natural areas.
    8. Health heart - I'm always contemplating whether or not to remove my transparent holes in the heart. It's good because it makes my heart unique, it's not good because it doesn't look amazing(although it's not terrible)
    9. Add ladder to background grey building for detail
    10. Add crates stacked next to foreground house, for detail
    11. Change enterable foreground building to a non-rainbow colour, more natural brick colour, orangey-brown.
    12. Chain fence for detail
    13. Dumpster(which I hope people will see as a dumpster) and trash cans too to signify this is a rubbish collection area. Trash cans both behind and in front of dumpster.
    14. Sign-post with unreadable text unless you interact with it. For orientation and detail.
    15. Moon for detail

    I am happy with the massive effort because I feel like I have improved it:
    [​IMG]
    Step 4
    I applied some simple effects to my image (not to actually use, but just for fun). Then they gave me some ideas for individual sprites.I am using graphics gale to edit my sprites and create these effects.

    Effect - Emboss More
    [​IMG]

    Effect - FindEdges2
    [​IMG]
    Effect - Sharpen
    [​IMG]

    Effect - Sharpen More
    [​IMG]

    Effect - Sharpen More x 2
    [​IMG]

    Here are all the ideas (for changes) I got from applying these effects:

    Research Building:

    Separate Core from doors and windows then work on core
    Emboss More
    Clean Up
    Change Main Colour
    Make Patternistic Details Slightly Darker

    Windows:
    Sharpen More x 2
    Decreased Saturation
    Decreased Brightness

    Dumpster Lid:
    Sharpen
    Decreased Brightness

    Windows:
    Remove Light
    Add Shutters
    Windows-Shutters-Handles:
    Connect pixels
    Slightly brighter
    Move handle up 1 pixel

    Map:
    Sharpen everything but border

    Health Bar:
    Sharpen red boxes

    Door:
    Sharpen

    Left trash Can:
    Sharpen
    Copy and past old hole into new one

    Signpost:
    Sharpen everything but text

    Ladder:
    Sharpen more
    Decrease brightness

    Good trash can:
    sharpen more
    (fix a few pixels too) (delete bottom outline which appears after sharpening)
    Decrease value AKA brightness


    Finally here is the complete image, with all updates:
    [​IMG]
    Things I will remove: left trashcan(replace with better right trashcan), walkway to research building ( just looks like a meaningless thick grey line).
    Things I will change: grey building roof to match other buildings' roof. Add more trashcans around dumpster and make it a big trash area. Add variety to window panes. Darken crates. Add plants to building. Add bigger bikes too. Add balconies. Consider adding more objects/features for variety.

    Here is the previous version for direct comparison:
    [​IMG]
     
    Last edited: Sep 19, 2019 at 2:59 AM
  46. Toque

    Toque Member

    Joined:
    May 25, 2017
    Posts:
    1,013
    Hey thats looking better for sure. To complicate things even more............

    When you start adding details. If its just story then it doesn't matter but if you have to interact with the things the scene it can get overwhelming.

    Can I shoot this garbage can? Do I have to jump over these boxes? Can I walk this way? Can I climb this ladder? Im not sure.......???

    Now if its a search and explore and look and interact with stuff then you dont want to make things easy. Keep it busy and not obvious.

    If its more arcade and story then sometimes you have set out only the important things......

    I just grabbed a couple screen examples. Can you see what things in these games are important? You can interact with?

    Unknown.jpeg

    images.jpeg
     
    Red Phantom likes this.
  47. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    820
    You are improving quite a lot , I like how you made the brick around the window lighter than the rest of the building!
    A few more tips I can give:
    -ease up a bit with the texturing, you might be adding a bit too much detail. (the suggestion of brick might be enough), and building in the background normaly have less detail than the foreground.
    -doors are usually not placed directly against the sidewall
     
    Red Phantom likes this.
  48. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Graveyard:
    [​IMG] [​IMG]

    Interior of Buildings:
    [​IMG] [​IMG]

    Please give me feedback on my changes. How could I further improve these scenes?
     
    Zuurix likes this.
  49. sitebender

    sitebender Member

    Joined:
    Sep 13, 2016
    Posts:
    813
    I have been summoned!!!!

    Wow those are some high ceilings. For a game looking for grit and realism, those are 2 story tall dwellings when they only need to be 1 story tall. Lower your ceiling and center it on screen so black bar on top, black bar on bottom. You need dedicated floors. I rarely see floors and ceilings made of brick. Add some supports either holding up the ceiling or supporting the ceiling. Lower that window to look out of. Add some ugly curtains.

    Most dwellings don't have brick on the interior. Commercial places do, but judging from those beds this isn't commercial. So add a bunch of drywall and smooth surfaces... then maybe have some bricks showing due to it falling apart. Have tattered curtains or curtain rods indicating curtains used to be there. Add support beams to fill up spaces. Sure 90% of homes don't have support beams, but you want something to tighten everything together without such vacant space.

    Add cabinets, ugly stoves, dressers or something to just fill up space. Hang rugs on the wall.

    On to the graveyard, your trees need to be much taller, because they're trees, not bushes, add a shadowy fence and shadowy gravestones in the background, maybe add clouds overhead to replace the fog. Keep everything in the background shadowy with maybe a dark navy colored first layer of the background.

    Raise the ground, put a black box beneath the ground to tighten up all that void of fog. That's a lot of void.
     
    Last edited: Sep 20, 2019 at 12:16 PM
    pixeltroid, Niels, Toque and 2 others like this.
  50. Red Phantom

    Red Phantom Member

    Joined:
    Apr 12, 2018
    Posts:
    168
    Sorry for the late reply! I've been working in my families restaurant all weekend. Now again I finally have some free days and more time to work on my game!

    Toque, Niels and sitebender I have read every detail of your feedback. In 1-3 days I'm going to send images of my changes to these scenes: graveyard, city, houses-interior. I hope to seek either confirmation that my changes are decent otherwise further feedback/criticism is still accepted. I will be using your feedback as a guide and constantly referring to it. I'm also going to include images of these scenes: research building interior, wooden water path. I hope to seek feedback/criticism on these scenes I have not shown yet.

    Thank you again for your feedback/guidance/support, I really do appreciate it and you will be mentioned in credits.
     
    Last edited: Sep 23, 2019 at 3:12 PM

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice