How to draw fish and water

So I'm good on the code, but at making my fishadventure game, I can't draw fish and moving water. Arghh.

The hero fish(the one you are controlling) is drawn by me. The enemies for level 1 was drawn by someone else.

I don't know how to draw the hero fish so it is on the same quality level as the enemy fish and I need to get a flowing water background(make it look watery and make the current seem like its moving left.

Can anyone help me with the artistics?

http://www.flashninjaclan.com/games/...hadventure.swf

Ignore the black dot at the right side.

just use gradients.

More easily said than done, I can't even draw the shape of a fish correctly. And how to I emulate flowing water.

I can do a moving starfield but flowing water is trickier.

You dont need to have the water flow, it would probbably be to much work to be worth it. The only simple way I can think of is to have sine wave type thingies tween past you.

As for the fish, I took a model from http://toucan.web.infoseek.co.jp/3DC...shModelsE.html and rendered it out then traced the bitmap in flash. It looks pretty nice and as long as there arent too many different fish you want I can always render a few for you.
(the fla is saved as Mx)

Well, thanks, I will look at them, can you call me what problem you used to render the fish?

I would like to know how to do the process you described above.

For the water I am just looking for water like the one in xgenstudio's Fishy game like with a few water bubbles flowing to the left.

I need to learn the process of drawing objects.

It is easy to get nice fish like that with the trace bitmap option in flash. Its under modify>bitmap>trace bitmap or modify>trace bitmap depending on what version of flash you have. It takes any bitmap picture and draws it with lines and shapes.

I rendered the fish in Cinema 4D. I was going to render them in Swift 3D but it didnt like the bitmap textures and it looked ugly. Really any program that can render images should work or you can just look for side views of fish on the internet and trace those.

As for bubbles flowing to the left it is similar to making stars fly by just with y movement as well as x movement.

This is going to sound stupid but -- I find bubbles much harder than stars(which are just white specs) to draw.

Also, I don't have any 3d rendering programs. Can I do it in paint shop pro?

there are some free 3d file viewers out there. if anything fails you may just use one of them and take a screenshot, a bit work, but for what you need enough.

or if you really want to hit it hard, there is blender a free modeler/renderer - although it has imho a pretty weird/scary UI

nGFX

great explanation about vector drawing and there's a fish there.

Don't steal! get inspired instead:

http://www.vectorkid.com/tutorials.html

anyone use Paint shop pro know how to take a screenshot but then remove the background?

Magic wand.

I'm kinda tempted to say read the help file ;)

Squize.

When I draw bubbles I use a radial gradient with a transparent white in the center fading to opaque white on the outside. You can also draw a highlight too.

You don't need to animate water, because underwater you can't really see any waves...

I would do a gradient with blue at the bottom and lighter blue above and maybe some sand on the bottom and some plants

What the free 3d renderer/modeler?

Going 3D might be a bit of an overkill as you will have to model, unwrap and skin the fish to make them look good and if you are not familiar that can be a huge task.

Judging by your sample it looks like a straight forward 2D game. I would suggest sticking with 2D and in order to keep the speed decent work with bitmaps rather vectors as the effects that make underwater elements look more realistic ( light, loss of colour under water, floating sediment and air bubbles ( though rather rare unless you have divers around ) ) take up a lot of cpu speed due to being gradient or using transparency.

Let's start with a basic background. Make up your mind what size your game should be - using bitmaps you loose the scalability of a pure vector game. Once you figured that out open a new canvas in a bitmap paint program ( preferably one that allows the use of layers with different transparency settings ).
Fill the canvas background with a colour gradient ( lighter blue at the top and getting darker towards the bottom)

http://www.spriteattack.com/tuts/water_1a.jpg

I used a gradient with 3 colours to get a smoother middle area - just looks a tad more interesting.

Add a new layer and set it to a low tranparency ( it will be a distant part of the background mostly faded into the blue ). I just used a pen tool with a big tip and a dark blue to draw some wavy shape.

http://www.spriteattack.com/tuts/water_1b.jpg

Add some more layers with increasing transparency. The two topmost layers were painted in some sandy colour.

http://www.spriteattack.com/tuts/water_1c.jpg

To add some texture to the sand I used a grafitti brush and two slightly darker shades of the sand colour.

http://www.spriteattack.com/tuts/water_1d.jpg

Next comes some light. Nice and simple to do by creating a new layer and drawing a straight horizontal line with a wide and soft edged airbrush tool. Rotate this object into place...

http://www.spriteattack.com/tuts/water_1e.jpg

and then erase the lower parts with a very soft and transparent eraser to create the loss of light effect in the water.

http://www.spriteattack.com/tuts/water_1f.jpg

Add some more of those to add a lighter and brighter feel to the scene.

Finally add some floating sediment to it and voila - a basic underwater background.

http://www.spriteattack.com/tuts/water_1g.jpg

You can add plants, bubbles, rocks in separate parallax layers and move them infront of the background to create the feeling of movement.

As far as the fish go my suggestion would be to start with a google image search ( eg. fish, aquarium, tropical fish or whatever else you are looking for ) to get an idea of how your fish should look like.

http://www.spriteattack.com/tuts/fish_1.jpg

In order to work with it in the game ( animate it and gain control over the image ) rebuild it. I used a vector program to create a scalable version of the fish.

http://www.spriteattack.com/tuts/fish_1b.jpg

Basically you could use the vector shapes in flash but due to a lot of elements, gradients and transparencies it will need a lot of cpu power to work smoothly.
So I took it into a bitmap program and scaled it to size and added an outline ( to create a clean 1bit transparency image ) and adjusted the colour to stand out more by adjusting the HUE setting.

http://www.spriteattack.com/tuts/water_1i.jpg

In order to adjust to the loss of colour in water I added some blue to the fish - it looks just a tad more realistic.

http://www.spriteattack.com/tuts/water_1j.jpg

Thanks for that post, I'm trying to follow it now.

Is opacity the same thing as transparency?
I'm lost on what you mean by "rebuild the fish". I took the picture you used of the fish, opened it in paint shop pro and tried to use magic wand to remove the background. But since the background is not uniform, you can't really do it. I'm still messing around with the image. What vector program did you use?

I tried using flash's trace bitmap tool but it seems to lose alot of the features.

Quote:

---

Is opacity the same thing as transparency?

---

Yes. (Or maybe opposites but same idea).

Quote:

---

I'm lost on what you mean by "rebuild the fish".

---

He means to look at it and draw a new one.

Archbob - yes... opacity is the same thing

I am using CorelDraw for the vector work... and with rebuild I mean create the fish in vectors to have an easier object to modify. Basically I drew the shape of the outside and used it a smaller and lighter coloured copy for a tween ( creating the basic body with some 3D shape ) than added tranparent gradients for highlights, transparent shapes for the scales, a circle with a shadow for the eye ( some smaller ones inside for the lense and light fx ( which isn't in the original photo but gives it more life ). Tweened shapes form the pattern on the fins.

fish 1 as an swf