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

Hmm, yeah, I tried drawing the shape of the outside, it looked really bad, I'm going to have to use vector-mapping for alot of it. Mind if I use the one you drew for one of my levels?

I'm using a mapped catfish for my first boss.

no worries... feel free to use it...

Quote:

---

Originally Posted by DayDream

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

---

Nice, very very nice mate! You are magician, i always asked myself how some people make such things, and finally i found an answer - they are magicians!!!! :)

Quote:

---

Originally Posted by The Helmsman

Nice, very very nice mate! You are magician, i always asked myself how some people make such things, and finally i found an answer - they are magicians!!!! :)

---

No... they just do it long enough... :) ... 20years of doing computer and game graphics does the trick...

It's not magic... it's just knowing the shortcuts to make it look like magic...

20 years ... i got ages to go :p nice work day dream, as always

Is there a magic-wand like option in the flash drawing tools. The magic wand tool in Paint shop pro does not make the background transparent when I moved my edited image into flash.

Archbob... a magic wand tool won't be much of a help. If you want decent game sprite graphics you have to create them rather than grab photos and reduce/ change/ modify them.
It might not be the fastest way but the results will be a lot better.

I am working on a tutorial for your fish - a step by step creation of a vector shaped fish. It will take a little bit as I am very busy with work atm.

[ Corrected - thanks gloo ]

Thats cool, I understand. I too, am busy with client PHP projects and am just working on this in my spare time.

If you ever need any php help with stuff, let me know.

Archbob, if you are good with php. maybe you can solve my problem in this thread:

http://www.flashkit.com/board/showthread.php?t=681125

I regularly do high score in my games. My system is probably a little different than his. I discovered that some of the functions in flash don't work as they should when posting to php.

Quote:

---

a magic wand tool won't be much of a help and there is none in Flash

---

There so is to a magic wand tool in flash :D Look ill show you.

I like you fish day dream, it looks shiny :D

Just had to pop on and say every time I see your stuff DayDream I'm amazed.. nice work.

Quote:

---

Originally Posted by xMCNUGGETx

Just had to pop on and say every time I see your stuff DayDream I'm amazed.. nice work.

---

Thanks, nugget :)

Archbob, let me give you a better example why magic wand and tracing photos is not the best way to make game graphics.
The main problem is consistency - a good game has the same look and feel throughout - from the preloader to the game over it feels like one unit. When you use photo elements it's hard to find matching shots with the right angle you need for your game ( in your case straight side on ) and the same lighting throughout.

As a boss for your fish adventure a tiger catfish would look stunning - but the best shot I could find ( in a 1min google - didn't want to spend too much time on it ) was cover with the cloth and the hands.

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

Also the bend shape would look weird underwater. The solution to consistency and right shape, form, perspective, light etc. is build a new image to match your existing style ( in my case the little red shiny fish ).

So I built it in vectors - sorry no tutorial on that yet ( but I will work on one ).

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

I also have the freedom to change certain characteristics to make the catfish look more like a boss enemy ( the eye has an "evil" twist to it and mouth is longer and curved to a smirk ).
It's not identically the same as the photo reference but it will fit with the existing fish I did earlier.

http://board.flashkit.com/board/

Inside the game it could look something like this:

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

I also have the complete control over the sizes (eg. if I want to make the "hero" smaller I can scale my vector image down and won't loose quality or even more so when scaling up eg. enlarging the "boss" catfish).

I certainly use that tiger catfish somewhere in the game. My first boss is a shark for right now.

The game is probably not going to look that congruent in terms of all the graphics, but I've managed to remove most of the color from the shark. I will probably create a background similar to yours when I finish the actions and other graphics of the game. I think I may have the hang of that now.

Thast tiger fish will certainly come sometime later in the game.

DD, you sayd you use coreldraw, looking at the catfish i wonder if, now that flash has some bitmap stuff, if it could also be done in flash itself and use it as a png...or even as a cacheAsBitmap movieClip

Flash lacks a couple of tools for graphics editing but in terms of drawing, I bet you could draw it in flash itself.

Yes... it can be done in flash... I have seen some amazing illustrations done in flash... It's just a matter of being more comfortable with the tools Corel has to offer and the habit of using it for years...