Splish splash

Splish splash

You need to be logged in to rate pixel art.


Pixel Art Details

Splish splash

Title: Splish splash
Pixel Artist: Dusty  (Level 3 Private Eye :: 2468 points)
Posted: 10/18/2010 20:26
Palette: 9 colors
Statistics:  48 comments    84 faves    0 avatars

I'm sick of this water. I have been animating this for 3 days. I have done and redone the animation at least 5 times... and can't remember how many times I've messed up. It was a painful and tedious process. It's possibly not the smoothest thing, and I can see highlights popping here and there, but I'm honestly not in the mood to revisit this anymore, heh.

Ended up being 32 frames, because it didn't look too smooth in Minecraft at 2pixel jump increments.

Oh, and before anyone asks yes, the 'effects' are all done manually, even the scrolling(bleh). No distortion filters or anything like that. I can elaborate the process if anyone is interested.

Top Pixel Art - October 2010 (#10)Top Pixel Art - October 2010 (#10)


If you would like to comment you will need to be logged in. Register now. It only takes a moment and it's free.

CooliePixel (Level 5 Detective) @ 10/22/2014 00:24

Dude it's insance..

EvilEagles (Level 5 Detective) @ 3/16/2013 22:28

 This is very awesome and smooth. I shall take this baby home and study thoroughly ;-;

BlazingBlyde (Level 3 Hatchet Man) @ 2/23/2013 16:08

Beautiful work, I can tell it took forever.

ThePixelKnight (Level 1 Rookie) @ 9/9/2011 11:46

Cool animation.

weezllane (Level 2 Quiet One) @ 6/9/2011 16:44

Nicely done! Makes me want to play minecraft.


Dusty (Level 3 Private Eye) @ 3/25/2011 22:56

I posted a bit further down elaborating on the animation process. It's nothing spectacular.

Mathias (Level 6 Garbage) @ 3/25/2011 22:54

Yes, please elalaborate the process! I just got my hands on Pro Motion and I have a couple of pretty dynamic animations I need to pull off. I've only animated in Flash and ImageReady so far.

iamlowlikeyou (Level 4 Murderer) @ 12/30/2010 16:42

This looks extremely real :D

JerryPie (Level 11 Big Foot) @ 11/18/2010 17:57

awesome.. thats some of the best tileable water ive ever seen

Dusty (Level 3 Private Eye) @ 11/16/2010 15:49

Sly posted this further down: http://dl.dropbox.com/u/614379/Various/lul.html

Though the animation itself is meant to be viewed in 3D.

JerryPie (Level 11 Big Foot) @ 11/16/2010 10:42

is this tileable? or is there a visible line between tiles

LARGames (Level 1 Gangster) @ 11/11/2010 04:29

This is the best water I've ever seen pixeled.


bugman (Level 2 Flatfoot) @ 10/25/2010 15:29

Awesome stuff!

Neocrone (Level 2 Hired Gun) @ 10/24/2010 03:10

wow...thats looks wet .....cool! :D

Dusty (Level 3 Private Eye) @ 10/23/2010 10:57

I posted the link a little bit down :)

bp_abby (Level 1 Rookie) @ 10/23/2010 10:10

 Is there a complete texture pack that goes with this?

If so, link plz  :)

Nessiah (Level 4 Gas Giant) @ 10/23/2010 02:11

This is...so beautiful I'm shaking of awesomeness.

ekobor (Level 4 Murderer) @ 10/22/2010 23:18

 The flickering of the highlights makes me think of a net of neurons.... which makes this about fifty million times more amazing.

MCSuire (Level 1 Intern) @ 10/22/2010 20:17

Small and simple but I like it :D

Losm (Level 7 Mass Murderer) @ 10/22/2010 13:29

 **** it, I'm faving.

Dusty (Level 3 Private Eye) @ 10/21/2010 14:32


Lexou Duck (Level 2 Flatfoot) @ 10/21/2010 14:04

How does one edit fire, water, or lava in Minecraft ?


Also, your water looks even better in a pattern.

Dusty (Level 3 Private Eye) @ 10/21/2010 03:08

This is currently being used in a texture pack I have been working on for Minecraft.

Spherical Ice (Level 2 Dealer) @ 10/21/2010 03:02

Wow, beautiful animation.

Psychotron-3000 (Level 5 Detective) @ 10/21/2010 02:56

Beautiful. I would recommend using it in a tileset in a game.

bojlahg (Level 4 Lieutenant) @ 10/20/2010 19:12


Jabber (Level 3 Private Eye) @ 10/20/2010 17:43

Awesome animation.

Victor Rojo (Level 10 King Ghidorah) @ 10/20/2010 14:57

Keep it up the great work, and real pixel art? perfect, as i like ^^

Ergg (Level 6 Yonkyu) @ 10/20/2010 10:37

 Perfect animation. The environement is missing however.

Flarfy (Level 5 Detective) @ 10/20/2010 07:34

looks awesome. Great job

Jinn (Level 11 Cthulhu (The Call of Cthulhu)) @ 10/20/2010 07:23

{ The best 2d water I ever seen!

Jetrel (Level 1 Intern) @ 10/19/2010 21:40

 Thanks a bunch for the tutorial.  I'll try and put it to good use at some point.

Ambient (Level 6 Major) @ 10/19/2010 16:34

 Intense stuff there, amazing job!

RedKnight91 (Level 1 Seaman) @ 10/19/2010 16:00


Sly (Level 1 Gangster) @ 10/19/2010 08:55

Edit: Just view this:


Dusty (Level 3 Private Eye) @ 10/19/2010 08:50

Alright, I'll elaborate! Here's a little guide: i53.tinypic.com/208cwgj.jpg

a. I start off with two tiles. Highlights, and shadows. They are actually duplicates of themselves. The shadow is the same tile as the highlights given 180 degree rotation and a 16 pixel horizontal offset.

b. I give each of the tiles a simple 'wave' effect. I do this by placing a simple grid next to 4 copies of the above tiles, 4 pixels in size, 4 pixels apart. For each frame, I move the grid down 2 pixels. Now I take all the pixels aligned with the grey portions of the grid and move them a single pixel to the left. I take the excess(the leftmost pixels now extruding from the tile) and move them over to the right to fill the now-empty space. Now I do the same for the white portion of the grid, except I move those tiles to the right. This creates a very simple wave effect in the water. This becomes an underlying animation. The problem is there are a lot of broken pixels because of the offsetting. You'll want to touch up and fix these up. Connect the broken lines, get rid of stray pixels. You'll also want to start doing minor varieties. This is when I added the moving highlights.

c. I create a template. A grey box with a diagonal line coming from the top. This was the long and boring process of making my water scroll. I take the highlighted tile(frame 1) and start it off. Then on the next template I take the second frame of the wave animation and I move it up the diagonal line by a single pixel(You can do it at increments of 2 for half the work). You do this over and over, incrementing the wave frames, and repeating them as you get further. You may want to place a small label over the wave frames, dots or something, to keep track of the number you're on. Messing up here will mess up the whole animation, trust me, I know :(

d. Just like in part b, take the excess bits of the tile outside of the template and move them over to fill the grey area back up and you end up with:

e. What you want to do here(which my image doesn't show, sorry!) is touch up the tile again. As you scroll the water you will probably notice more errors from the wave effect. Repeat the same touch-up process as y ou did in step b.

f. Take the shadow wave frames and place them in order underneith your newly made scrolled highlights. The shadows are still a simple wave effect. There really is no need to make it scroll like the highlights... it'll just be lost in all the movement anyways! Take the highlights, copy/paste them over the shadows and made the midtone blue transparent and you end up with the final result. Again, touch up as you see fit.

avo (Level 8 Cannibal) @ 10/19/2010 08:15

really good work

Skull (Level 11 CEO) @ 10/19/2010 08:07

 God. Damn. That's fantastic.

T-Mind (Level 7 Ichikyu) @ 10/19/2010 06:29

I'm interesed! I want to see the process :D
And do be so hard with yourself, it's a really great water animation dude, I've tiled it an is reaaaaaaly smooth

Jetrel (Level 1 Intern) @ 10/19/2010 03:26

 Hey kids!  Wanna see how this animates when tiled?  Slap this code in a text file, name it "whatever.html" and open it up in IE/FF/Safari.  Make sure the image is in the same folder as the whatever.html file.

 <html><body style=" url(waterhmm2.gif) repeat 100% 100%; "><p>lolol</p></body></html>


Edit;  okay, pixeljoint apparently has a guard against code injection.  There should be the word "back ground" without quotes, or a space between back and ground, right after "style=".  It should also have a colon after that.  They're stripping that out too.  A plain old "code" tag would be really, really useful, since this is starting to get a bit convoluted and confusing.

Garreth (Level 2 Hired Gun) @ 10/19/2010 03:17

The first pixel art I've 5/5. Feel honored. xD

Jetrel (Level 1 Intern) @ 10/19/2010 01:56

 Sweet jesus that's good.  Shit - that's the best "tile-based" water animation I've ever seen!  That is; in terms of making a top-down animation of water-texture animating.  I've seen a lot of videogames (like sword of mana, zelda, and otherwise) basically "cheat" their way out of animating water by just making the whole thing a solid flat color.

There are a few sprite-based games who've tried and done well, like Seiken Densetsu 3, but this exceeds those.


I'd actually love if it you'd elaborate on the process, because if you do, I'll probably put it to use at some point.

Gecimen (Level 11 Sphinx) @ 10/19/2010 01:14

The flickering looks quite natural, better than not being there.

Elk (Level 5 Assistant Manager) @ 10/19/2010 00:19

Woah dusty, awesome!

Delicious (Level 10 Capo) @ 10/18/2010 23:35

Excellent animation

King of Games (Level 1 Thug) @ 10/18/2010 23:19

water is hard to do man but this is a good water.

Blackbeltdude (Level 7 Ichikyu) @ 10/18/2010 22:26

I see what you mean about the highlights; you might actually get away with it if it's a large body of water (having it tile with itself in otherwords). It looks like light dancing of the surface sometimes... But like mccow said, it could be distracting (it's a little distracting as a tile IMO). You should see and find out. :P

Either way, I still find it really impressive.

mccow28 (Level 1 Gangster) @ 10/18/2010 21:42

This looks fantastic, it's wonderful to see your hard work bear fruit. I don't really mind the highlight flicker because water is usually kind of like that, but as a tile that would probably be noticeably distracting.

Related & Tags

Splish splash avatars, Splish splash icons, Splish splash pixel art, Splish splash forum avatars, Splish splash AOL Buddy Icons

Sponsored Products


Want to give some dough back to all those amazing pixel artists? Donations provide prize money for contests, help cover hosting costs and support new initiatives.

Play party games with QuizBash app
Play party games with QuizBash app

Report Problem

If you are going to report an issue with this piece please provide relevant URLs/Images to back up your claim.


If you would like to be a team player why not register? It's quick and easy and you'll be able to comment on, rate and upload pixel art.

Already Registered?