Splish splash

Splish splash

You need to be logged in to rate pixel art.

 

Pixel Art Details

Splish splash



user
Title: Splish splash
Pixel Artist: Dusty  (Level 3 Private Eye :: 2431 points)
Posted: 10/18/2010 20:26
Palette: 9 colors
Statistics:  48 comments    78 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)

Discussion

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


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

Dude it's insance..


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

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


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

Beautiful work, I can tell it took forever.


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

Cool animation.


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

Nicely done! Makes me want to play minecraft.

 


user
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.


user
Mathias (Level 5 Rokkyu) @ 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.


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

This looks extremely real :D


user
JerryPie (Level 11 Godfather) @ 11/18/2010 17:57

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


user
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.


user
JerryPie (Level 11 Godfather) @ 11/16/2010 10:42

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


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

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

-Luis


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

Awesome stuff!


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

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


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

I posted the link a little bit down :)


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

 Is there a complete texture pack that goes with this?

If so, link plz  :)


user
Nessiah (Level 4 Mercenary) @ 10/23/2010 02:11

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


user
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.


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

Small and simple but I like it :D


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

 **** it, I'm faving.


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

www.minecraftforum.net/viewtopic.php


user
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.


user
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.


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

Wow, beautiful animation.


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

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


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

 awesome!


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

Awesome animation.


user
Victor Rojo (Level 8 Cannibal) @ 10/20/2010 14:57

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


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

 Perfect animation. The environement is missing however.


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

looks awesome. Great job


user
Jinn (Level 11 Godfather) @ 10/20/2010 07:23

{ The best 2d water I ever seen!


user
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.


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

 Intense stuff there, amazing job!


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

PERFECT!!!!!!!!!!!


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

Edit: Just view this:

http://dl.dropbox.com/u/614379/Various/lul.html


user
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.


user
avo (Level 7 Mass Murderer) @ 10/19/2010 08:15

really good work


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

 God. Damn. That's fantastic.


user
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


user
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.


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

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


user
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.


user
Gecimen (Level 11 Master Assassin) @ 10/19/2010 01:14

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


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

Woah dusty, awesome!


user
Delicious (Level 9 Boss) @ 10/18/2010 23:35

Excellent animation


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

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


user
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.


user
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

Recommended Products

Donate

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.

Register

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?