 |
| ||||||||||||
Top Pixel Art - October 2010 (#10)
This is very awesome and smooth. I shall take this baby home and study thoroughly ;-;
I posted a bit further down elaborating on the animation process. It's nothing spectacular.
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.
awesome.. thats some of the best tileable water ive ever seen
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.
is this tileable? or is there a visible line between tiles
Is there a complete texture pack that goes with this?
If so, link plz :)
The flickering of the highlights makes me think of a net of neurons.... which makes this about fifty million times more amazing.
How does one edit fire, water, or lava in Minecraft ?
Also, your water looks even better in a pattern.
This is currently being used in a texture pack I have been working on for Minecraft.
Beautiful. I would recommend using it in a tileset in a game.
Keep it up the great work, and real pixel art? perfect, as i like ^^
Thanks a bunch for the tutorial. I'll try and put it to good use at some point.
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.
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
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.
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.
The flickering looks quite natural, better than not being there.
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.
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.
Dude it's insance..