Deviation Actions

World-of-NoeL's avatar

Water Temple - Wave Tutorial

685 Favourites
50 Comments
14K Views
EDIT: Just realised step 4 should be (base, peak, base, trough), not (base, peak, trough, peak).

A few people had asked how I did the waves in my Water Temple ( world-of-noel.deviantart.com/a… ) so I made a tutorial. Sorry if it's hard to follow - I'm not the best teacher.

Depending on how you shape the masks and which direction you offset each frame you can create waves in any direction you want.
Image details
Image size
704x1280px 204.22 KB
Published:
© 2014 - 2021 World-of-NoeL
Comments49
Join the community to add your comment. Already a deviant? Log In
lin8944's avatar

Thank you。

非常感谢,学到了新的波纹的绘制方法。

karakenio's avatar
Thanks for sharing
Zeludtnecniv's avatar
Hy,
Thank you so much for this tutorial. I was looking for a long time how to animate water pretty simple.
I have made a windows app to generate a animation strip from a texture and a mask image to make it easier if you want base on your tutorial. here (drive.google.com/drive/folders…)

Again thank for this.
World-of-NoeL's avatar
Thanks, that should be helpful!
Zeludtnecniv's avatar
No problem here is a better version with update :
8-bitadventurer's avatar
Hey World-of-NoeL, thank you so much for the tutorial. I think I managed to replicate the result fairly well and I do like how it looks. Proper water animation tutorials have been hard to come by, so I'm thankful to you for putting this together. I have posted the result of my efforts here - www.pixilart.com/art/world-of-… with your name and a link to this tutorial. I have encouraged other users to come look at this. My post is almost a complete replica of your finished animation, and I don't want this to come across as art theft. If you would like me to remove this post, please let me know and I will do so. 
World-of-NoeL's avatar
Looks good to me! I've got no problem with it.
Tailsrus100's avatar
What program do you use?
World-of-NoeL's avatar
howarscene's avatar
Helps alot! :) please continue sharing this kind of tutorials. Kudos 
Teknobyte's avatar
I really wish I understood the terminology a bit better so I could follow your tutorial. I need it dumbed down >.>

I LOVE the effect, and want to try and do something similar, I just... can't brain it. 

I tried doing this, though my result wasn't as smooth or nice :/
My tiles are 64x64, so i shifted 8px per frame. It ended up feeling choppy and didn't look nearly as nice. Maybe I have to go with 4px down per frame and increase frame rate? idk -_- Not happy wiht my results. MORE PRACTICE NEEDED!
World-of-NoeL's avatar
This example shifts 1px for a 16px tile, so shifting 4px for a 64px tile for eight frames should have a similar result. That said, at higher resolutions the animation can appear choppier than at lower res so you might need to go with even more frames again.

Sorry the tutorial's a bit hard to understand. Any part in particular you're having trouble with?
Teknobyte's avatar
I think I kind of figured out how to do it overall. Just that the program I'm using doesn't allow me to make masks and is very limited on what I can do. It lacks the freedom programs like Photoshop has.

However, due to my higher resolution, and disinterest in painstakingly working through so many frames, I think I'll have to work a much more subtle animation.
World-of-NoeL's avatar
Grab Graphics Gale. The free version should be good enough, it's lightweight and pretty simple to use.

Oh, I should mention that the "masks" I'm referring to here aren't "layer masks" or anything fancy, they're just flat colours that you cut+paste on top of the graphic. Even MSPaint can do this.
Wish-I-Was-Finnish's avatar
WOAH! Ok, that's cool.
boot-cheese-3000's avatar
Very cool. I take it you have other Tutorials handy?
World-of-NoeL's avatar
Thanks, but unfortunately no I don't. Not much of a tutorial guy.
boot-cheese-3000's avatar
Ok fair enough. I also assume you must have some Tutorials that you've followed to create your work, correct? If so which one and where?
World-of-NoeL's avatar
Kiwinuptuo had some good ones before he deleted his account, but here are two of his good ones:
web.archive.org/web/2013102904…
web.archive.org/web/2013070408…

Some more can be found here: web.archive.org/web/2013072419… but I was never a fan of the way he lit the undersides of objects.
boot-cheese-3000's avatar
Oh Yeah! I remember this guy's Tutorials! Some years back when I tried to learn Pixel Art--and failed miserably at it--I saw some of his on this site. The ones that caught my eyes were the Tree one, the Textures and the Shading. THANK YOU!!!!! I've been trying to find his Tutorials but to no avail! Dude you're a LIFESAVER!!!!!

What is this web archive thing? This something dA created to retrieve lost Artwork and other Resources from ex-Members? Is this how I can find stuff from Members not around anymore?
World-of-NoeL's avatar
No, the "Wayback Machine" (Google it) let's you scan the archives of the internet collected by a non-profit organisation, so many things that have since been deleted can still be found there - not just deviantART, but everything on the web. If you can remember the old members' usernames you could search for "username.deviantart.com" and very likely find their old art.
boot-cheese-3000's avatar
Ahhhhh I see. That's a pretty nifty Search Engine. :nod:
blaner's avatar
i love you for this
Join the community to add your comment. Already a deviant? Log In