Graphics Eye Pleasing Water (Art Critique)

Discussion in 'Game Design, Development And Publishing' started by RujiK, Jun 30, 2016.

Tags:
  1. RujiK

    RujiK Member

    Joined:
    Jun 21, 2016
    Posts:
    167
    A little over a year ago I asked for art suggestions on my water. I am finally trying to finish my water and asking for more feedback.

    I want shorelines I can be proud of. Observe!

    1. Wave (Note bottom tiles)................2. Wobble
    [​IMG] [​IMG]

    3. Sparkle .......................................... 4. Glow/Pseudo wave
    [​IMG] [​IMG]

    Which is better?! A mix or a few tweaks is on the menu as well. All of these are heavy WIP.

    UPDATE!:
    5. Mix of 1,2,3
    [​IMG]
     
    Last edited: Jul 1, 2016
    F_Clowder, YukonW and Ninety like this.
  2. BLang

    BLang Member

    Joined:
    Jun 21, 2016
    Posts:
    109
    I think a combination of 1 and either 2 or 3 would be best.

    But what I think could use the most work is the water animation itself. It just looks a bit stiff right now.
     
    RujiK likes this.
  3. graviax

    graviax Guest

    I like the sparkle one, but the speed of the water is too high.
     
    RujiK likes this.
  4. aamatniekss

    aamatniekss Member

    Joined:
    Jun 20, 2016
    Posts:
    98
    The first one looks the best imo. The waves make it seem like the water is actually there, but for others the constant scrolling without the waves, just makes it look like its some sort of reflection of the sky or its a hole to another dimension or something like that. Also it seems that the water might be moving a bit too fast.
     
    MikeDark_x and RujiK like this.
  5. darthlupi

    darthlupi Guest

    I vote for the Wobble of 2! The waves look more realistic with the slight randomness. Waves don't wall splash at the same time on a shore.
    Dynamic! That is the word.

    Either one is SWEET though. Nicely realized water man.
     
    RujiK likes this.
  6. RujiK

    RujiK Member

    Joined:
    Jun 21, 2016
    Posts:
    167
    Thanks for the comments guys. It looks like 4 is the loser and maybe 1 and 2 are the winners. I'll try and work out some kind of combo and post back. More comments are still appreciated.

    After I get the shore looking okay, I plan on actually animating the water texture itself.
     
  7. FredFredrickson

    FredFredrickson Member GMC Elder

    Joined:
    Jun 21, 2016
    Posts:
    118
    I definitely prefer the first. The shoreline is a little too pulse-y, but aside from that, I think it's great.

    The water in the first example is also good - it doesn't need much more work beyond that, depending on the look you're going for.
     
    RujiK likes this.
  8. F_Clowder

    F_Clowder Guest

    I like the little hint of water on the shorelines (1) and the random sparkles of (4).

    How about instead of the water moving only one way, i.e. from right to left, have the water movement go a few frames to the left and then a few frames to the right and then reverse, etc. That way the illusion of movement is more natural rather than clinically just going one way. This water example you have for us is a pond, not a river. Hope that makes sense. Anyways, like it overall.
     
    RujiK likes this.
  9. FredFredrickson

    FredFredrickson Member GMC Elder

    Joined:
    Jun 21, 2016
    Posts:
    118
    If you had a pond with the wind blowing ripples into it from one direction, that would create the effect you see here. Kinda.

    That's how I'd justify it anyway. ;)

    I agree though, it might be nice to see the water cycle like that.
     
    RujiK and F_Clowder like this.
  10. F_Clowder

    F_Clowder Guest

    Yes, I agree, I can "see" it that way, but I think I would slow down the animation in order to keep the movement more consistent with this being a smaller pond.
     
    RujiK, MikeDark_x and FredFredrickson like this.
  11. Zek

    Zek Member

    Joined:
    Jun 20, 2016
    Posts:
    74
    I think number 1 looks best. I also think that the water speed should be a bit slower. :D
     
    RujiK and F_Clowder like this.
  12. Fuzenrad

    Fuzenrad Guest

    Look, maybe a reduction in the color depth stay cool, even though my preferences are a bit archaic, something like this:

    [​IMG]

    In any case, within the options, sparkle is the best, may be good to make a move "come and go".
     
  13. Snail Man

    Snail Man Member

    Joined:
    Jun 20, 2016
    Posts:
    282
    I'd say a combination of 1 and 3 looks the best. 3 has a bit more "noise" or randomness which adds realism, but 1 is the actual movement you want
     
    RujiK likes this.
  14. Fuzenrad

    Fuzenrad Guest

    Exactly, 3 is closest to a real movement to be a bit random, but still tries to remove this displacement effect of the water.
     
    RujiK likes this.
  15. NicoDT

    NicoDT Member

    Joined:
    Jun 21, 2016
    Posts:
    237
    Number 3 looks better.
     
    RujiK likes this.
  16. CoreGG

    CoreGG Guest

    I like the first one. You can combine it with the third one tho, might look good!
     
    RujiK likes this.
  17. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,595
    I prefer the first one. The movement of the water and the edges animations feels less "detached from each other" than the other choice and the edge animations on the beach side is way better.
     
    RujiK likes this.
  18. RujiK

    RujiK Member

    Joined:
    Jun 21, 2016
    Posts:
    167
    OKAY! I tried to combine 1,2,3 (Sorry F_Clowder, only you liked 4) but I kind of cheated on combining the waves of number 1. Waves tend to make the tiling obvious, so I'm wondering if I can get away with random splashes instead of shorelines having waves. Here is mock 2:

    5. Mix of 1,2,3
    [​IMG]

    More sparkles? Less wobble?
    (I also edited the main post if you want to compare side by side)
     
    Xskode, Detective Pixel, Cpaz and 2 others like this.
  19. graviax

    graviax Guest

    I like it better but my brain don't understand why the water is flowing to the left and disapearing in the grass. I know it's to show that this is water but, I look at little too fast.
     
    F_Clowder and RujiK like this.
  20. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,595
    It scrolls fast and that "middle water" if I can call it that way is too static in style compared to borders. If you'd make it wobble and move, it would look better. Now the middle water looks disconnected from the edges animations.
    Also, beach on the south side, I prefer the effects you had in #1
     
    F_Clowder and RujiK like this.
  21. Snail Man

    Snail Man Member

    Joined:
    Jun 20, 2016
    Posts:
    282
    Maybe you could add some sort of splashing effect to the left bank, to sort of explain where the water is going
     
    F_Clowder and RujiK like this.
  22. RujiK

    RujiK Member

    Joined:
    Jun 21, 2016
    Posts:
    167
    As I mentioned earlier, the water texture/surface is still placeholder. I plan on drawing an actual animation instead of just a pixel shift. That should fix the problem with the water going nowhere thing.

    @RangerX
    I'll work in more edge splashes in the next update. Also changing the texture will hopefully fix the "disconnection" between surface and edges.

    Thanks for the comments guys. I'll be back with an update in a few days/years or whatever.
     
    F_Clowder and RangerX like this.
  23. Cpaz

    Cpaz Member

    Joined:
    Jun 20, 2016
    Posts:
    309
    This Is what I was thinking. Honestly, I like it the best.
     
    RujiK likes this.
  24. CamperLv

    CamperLv Member

    Joined:
    Jun 21, 2016
    Posts:
    9
    I have this really cool wave tutorial that i downloaded last year
    [​IMG]
    [wave_tutorial_by_world_of_noel.gif]

    Maybe this will give you some cool ideas. =]
     
  25. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,595
    Ok this is awesome CamperLv!!
     
    RujiK likes this.
  26. Ethanicus

    Ethanicus Ethan L!

    Joined:
    Jun 26, 2016
    Posts:
    230
    @RujiK - I like the end result, but I agree you need less "wobble."

    @CamperLv - Wow, that's sweet! Really complicated, but I get the concept!
     
    RujiK likes this.
  27. Turgon

    Turgon Member

    Joined:
    Jun 20, 2016
    Posts:
    22
    I like 4 the best
     
    RujiK likes this.
  28. Xskode

    Xskode Member

    Joined:
    Jun 21, 2016
    Posts:
    55
    I think it would be much better if
    1. was not as fast but more relax
    2. turn the wobble down just a tabbit
    3. a little less sparkles or, not making the sparkles appear that fast back to back

    applying those things should make the water look more natural and relax and nicely animated.
    right now, there is to much attention in the water's effect than in how awesome the water looks and behave
     
    RujiK likes this.
  29. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,703
    I was going to chime in that in real water, waves don't actually move water laterally, it just makes bits of the water run in circles... the tutorial @CamperLv dug up doesn't state that, but the end result kinda shows a similar effect.

    Also, for things like this where you'll need to operate on multiple similar images in a row, I'd suggest making use of GM's save-as-strip / load-from-strip functionality so you can save the masks as a single image, paste on a single image consisting of repeats of the water, do operations, and THEN load it as an animated sprite instead. Not sure if you use GM's editors that much, but if you do, that functionality is pretty useful in situations like this.
     
    RujiK likes this.
  30. Kululu17

    Kululu17 Member

    Joined:
    Jun 25, 2016
    Posts:
    178
    Hi, I think the last one is showing great improvement. I have tried water before and was not able to get this good of results. But something about the continuous movement of the water (the underlying pattern) seems out of place with the rest. I have seen this pattern before in animated water, but was never able to get it to move in a nice looking fashion. I think the trick is that if you use a pattern that shows those pentagon shaped peaks, each of those would in reality comprise several different waves, which would be moving in different directions, so the actual shape of each pentagon would be constantly changing. For my game, I was able to get "ok" results by using a sprite with moving highlights (sparkles) where the peaks would be.

    Are you going to have just lakes and ponds in your game? Or rivers too? I would be curious to see how you handle rivers.

    Please keep posting your progress!
     
    RujiK likes this.
  31. RujiK

    RujiK Member

    Joined:
    Jun 21, 2016
    Posts:
    167
    (I don't have weekend internet, so I didn't read any of the new comments before making this update.)

    @CamperLv I actually tried implementing that exact tutorial but I didn't like the end result. I have a screenshot I might post later.
    @Ethanicus, Xskode I'll try tweaking some wobbles if you still think it looks too much in 1x zoom. Also thanks for the detailed response Xskode.
    @Yal Thanks for the advice, I use GM editor. Also how the heck do you have 300 posts already?! And your an elder now?! Where have I been...
    @Kululu17 Ponds, lakes, rivers, and oceans. Unfortunately I am not sure I will be able to have special cases for rivers and streams since all water is a single texture.


    UPDATE #3
    1. WIP animated surface
    2. Re-added waves. Waves now occur randomly instead of on every tile to avoid tiling.
    3. Slowed down the water shifting. Unfortunately, any slower looks jerky.
    3. Also How does it look at 1x instead of the previous 2x?
    [​IMG]
    Fun fact: I now loathe animating water surfaces.
     
    Xskode, Niels, Yal and 2 others like this.
  32. BLang

    BLang Member

    Joined:
    Jun 21, 2016
    Posts:
    109
    Well, I think the edges of the water look really good now, not much there that can be improved in my opinion.

    The water surface, on the other hand, still looks jarring. I don't think it should 'flow' at all. What @CamperLv suggested might be a much better choice. Since you don't like the end result, maybe try making a similar effect that would work with this?

    Also, and this might just be me, but now that I see it at 1x, I can't help but think that the water looks a bit too involved and too turbulent. The waves are too small for what looks like a still body of water. Maybe think about making the water texture bigger?
     
    RujiK likes this.
  33. Fuzenrad

    Fuzenrad Guest

    Hey man, i don't want to criticize the way you work, but do you know the KISS methodology?

    KISS is an acronym for "Keep it simple, stupid", this principle states that most systems work best if they are kept simple rather than made complicated, therefore simplicity should be a key goal in design and unnecessary complexity should be avoided.

    I see there is an enormous concern with "how the water will move" (and it shows that you care about your own work, and it's really good), but have you thought that this may slow down your project?

    Excuse my sincerity. Best regards.
     
    Last edited by a moderator: Jul 5, 2016
    RujiK, Yal and F_Clowder like this.
  34. Ninety

    Ninety Member

    Joined:
    Jun 21, 2016
    Posts:
    244
    Well I think this is a vast improvement and possibly about as good as you'll get it. The water moves enough to suggest direction but not so much that it looks weird, and the random waves are nice and make for some good visual variety. The main thing that bothers me is that the animation on the edges of the land has a slower frame rate than the water itself, but like others have said, at some point you have to call it done.
     
    RujiK likes this.
  35. Yal

    Yal GMC Memer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    3,703
    From how I interpret the first post, the OP wants to improve their water in general, not just for one project. (Which seems like a pretty sound time investment to me... water is the least questionable/intrusive invisible wall so making it look good benefits a lot of games)
     
    RujiK likes this.
  36. Kululu17

    Kululu17 Member

    Joined:
    Jun 25, 2016
    Posts:
    178
    Hello again,

    So if I may ask, the technique you use is a mask to cover everything that is not water, and use a water layer that moves at a constant speed??? And then sprites for the bubble and ripple effects?

    I have toyed with everything from using objects instead of tiles where ever there is water (thus allowing animation), or just using tiles but drawing semi-transparent sprites on top. Mixed results, but it does allow you to differentiate between river and lake. And since you need an object on top of the water to block players from falling in, I figure it doesn't hurt performance that much...
     
    RujiK likes this.
  37. RangerX

    RangerX Member

    Joined:
    Jun 20, 2016
    Posts:
    2,595
    Your update number 3 is infinitely better.
    However, have you tried it like not scrolling at all?
     
    RujiK likes this.
  38. JML

    JML Wabbajackalope

    Joined:
    Jun 22, 2016
    Posts:
    349
    Pardon me asking but i like that water, thats some nice water

    do you have some way to easily impliment it in a game? like as a drop icon you can put in a room and it will map the shore around the shape of the combined water mass?

    if you do or can do that could you upload it for other people to use, either here or over in the market place please.

    only thing left it really needs is some leaves, fish wandering around anf some birds bobbing up and down and this would be very impressive exspecially if it was on a hand held console.

    thank you
     
    RujiK likes this.
  39. Snail Man

    Snail Man Member

    Joined:
    Jun 20, 2016
    Posts:
    282
    Latest version looks great!
     
    RujiK likes this.
  40. Niels

    Niels Member

    Joined:
    Jun 22, 2016
    Posts:
    826
    Looks great!
     
    RujiK likes this.
  41. RujiK

    RujiK Member

    Joined:
    Jun 21, 2016
    Posts:
    167
    I'm explaining my game a lot in this post so I figure I might as well post a devlog instead of these post-by-post mini-devlogs.
    So, Check out my devlog! (It has cool gifs)


    @BLang Unfortunately CamperLv's wave effect is extremely "Tiled" looking when its in 1600x900 resolution. See the image below and note the horizontal repition. Animated, the repition is significantly more noticable.
    Earlier prototypes for water: (Stolen sprites)
    [​IMG]

    @Fuzenrad That is good advice, and the water has slowed me down a bit, but as a huge fan of fluids in games, I wanted to go the extra mile for my liquids.

    @Ninety I hadn't thought of syncing the shore with the water ANIMATION, but I went ahead and synced them. The water SHIFTING, however, can't be synced with the shores without tripling the frames of the shores. Too much work for little profit unfortunately.

    @Yal Actually, it's just for one project but this one project is my entire gamedev career. It will be years of work if I ever finish it.

    @Kululu17 Block the player from water?! With all this work you know I gotta let the player jump in and swim! :p There are no specific objects for the water, splashes, or shore, the whole thing is run by a single control object that runs almost the whole game. Also I've been posting small screenshots, but the game world/room is huge. (See devlog for more info) Objects for every 16x16 water tile would be over 5 million objects. Even if I just checked what was on screen, in 1600x900 that would be 5625 objects to check/draw. It's definately possible, but it would be a big performance killer. I know how cool flowing water is, so I might return to this some day if I ever get better at shaders.

    @JML Leaves on water? That is an awesome idea! Also that you would possibly consider paying for this on the marketplace is a huge compliment, so thanks! The water is very easy to implement in my game (See devlog for it in action) but it is ONLY easy to implement in MY game. I don't use the room editor (Made a custom ingame one), tiles, or objects for the landscape. So really, to get this to work I would pretty much have to upload the whole engine to get the water to work. Sorry mate, but I'm not ready to do that. Thanks again though.

    @RangerX Yes, but not scrolling looks really weird. Like the water is jumping up and down. It doesn't really even look like water but more like pinched fabric.

    @Niels, @Snail Man Thanks guys. Positive feedback is very encouraging

    And just for fun, here is what the water looked like in early 2015. (There was no animation. Not on the surface or the shores.)
    [​IMG]

    Man, that was a long reply.
     
  42. Xskode

    Xskode Member

    Joined:
    Jun 21, 2016
    Posts:
    55
    This does look alot better than the others. and I do think this would do just fine.

    however, since I read you mentioning
    if you just want to try to improve the water a little more, then the only issue that seems to stick out (to me) is the speed- however, the more I study the picture the more I believe it's the speed at which the wobbles happens or, how strong the wobbles are, that gives the illusion of the water moving faster than it actually is. which can come across as slightly over agitated water.

    In your image look where the red circle is (in the image below) and you will see that the water
    is moving from the right end of circle to the left at a nice speed. this is why I think the strength of the wobble is the cause for false perception of it's speed.
    noticewaterspeed.png

    however, I do think this water would work fine in games, but if you want to try and perfect it, maybe you can reduce the strength of the wobbles a little bit.
    and I think i looks way better at 1x instead of 2x.
     
    RujiK likes this.
  43. Wraithious

    Wraithious Member

    Joined:
    Jun 24, 2016
    Posts:
    1,166
    looks really awesome! I like #5 or #2, don't know about the random white circles in #5 tho, id maybe leave those out or use them sparringly.
     
    RujiK likes this.
  44. ThompMel

    ThompMel Guest

    I think number 2 was best in the original and your update looks good to me. I wish I was that good at water...
     
    RujiK likes this.

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