|
This method allows you to create animated tiles of water by means of Adobe Photoshop and Adobe ImageReady. This automated process will save time when you are developing mobile phone games.
This method was tested while I was working on "Hive of Evil" (mobile)...
First of all, you should create a water texture (it doesn't need to be high quality but rather contrast). It will be the source material of the whole work...
Create a new file. It should be rather large (so it'll be easier for an eye to see the quality of tiling and animation). Fill the layer with the source texture. Duplicate the layer... Change the opacity of the higher layer...
...the opacity was set to 30% in this example, but the opacity differs depending on the type, contrast and colors of the source texture.
Switch to ImageReady...
Now, you should create new frames moving the upper layer on some pixels. Move direction and step of move should be selected depending on your goals.
Main thing is that you must have a cycled animation as a result... Having 16x16 tiles moving on 2 pixels you will get a calm smooth animation of waterflow. The bigger this step the higher speed of the water and (!) less frames... For best result you can play with opacity on each frame and editing pixels while animating.
Here in this examples you can see the changes that were gained by changing movement directions and parameters of the layer...
The best results you're getting should be saved as gif using your working pallete...
Now all you need is to get the real frames of your water animation and crop the tiles to get the waterflow tileset...
Open your gif animation in ImageReady and switch back to Photoshop... Crop any place of your animation to 16х16 pixels.
Now we have psd-file with 16х16 pixels tiles. The number of layers is the number of frames.
All you need now is to save by turns every layer...
As a result of this not that hard manipulations we have got waterflow tiled animation texture.
 (zoom 200%)
Here below you can see some test water animations made using aforesaid method while I was creating graphics for "Hive of Evil" and some other projects of our CyberDream company.
All the graphics materials are property of mobile games development department of CyberDream. 
Author of this site has an official permission on hosting this tutorial here. You must get the author's permission to host this tutorial on your website.
|
