A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 37

Thread: How to draw fish and water

  1. #1
    Senior Member
    Join Date
    Feb 2004
    Posts
    782

    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.

  2. #2
    light11.ca habboguy's Avatar
    Join Date
    Apr 2002
    Posts
    384
    just use gradients.

  3. #3
    Senior Member
    Join Date
    Feb 2004
    Posts
    782
    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.

  4. #4
    Knows where you live
    Join Date
    Oct 2004
    Posts
    944
    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)
    Attached Files Attached Files
    The greatest pleasure in life is doing what people say you cannot do.
    - Walter Bagehot
    The height of cleverness is to be able to conceal it.
    - Francois de La Rochefoucauld

  5. #5
    Senior Member
    Join Date
    Feb 2004
    Posts
    782
    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.

  6. #6
    Knows where you live
    Join Date
    Oct 2004
    Posts
    944
    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.
    The greatest pleasure in life is doing what people say you cannot do.
    - Walter Bagehot
    The height of cleverness is to be able to conceal it.
    - Francois de La Rochefoucauld

  7. #7
    Senior Member
    Join Date
    Feb 2004
    Posts
    782
    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?

  8. #8
    383,890,620 polygons nGFX's Avatar
    Join Date
    Oct 2002
    Location
    Germany / Ruhrgebiet
    Posts
    901
    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

  9. #9
    Senior Member
    Join Date
    Apr 2005
    Posts
    467
    great explanation about vector drawing and there's a fish there.

    Don't steal! get inspired instead:

    http://www.vectorkid.com/tutorials.html
    Hope nobody knows I am still on Flash 5
    ______________________________________
    All artists are prepared to suffer for their work
    but why are so few prepared to learn to draw?(Banksy)

  10. #10
    Senior Member
    Join Date
    Feb 2004
    Posts
    782
    anyone use Paint shop pro know how to take a screenshot but then remove the background?

  11. #11
    Hype over content... Squize's Avatar
    Join Date
    Apr 2001
    Location
    Lost forever in a happy crowd...
    Posts
    5,926
    Magic wand.

    I'm kinda tempted to say read the help file

    Squize.

  12. #12
    Knows where you live
    Join Date
    Oct 2004
    Posts
    944
    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.
    The greatest pleasure in life is doing what people say you cannot do.
    - Walter Bagehot
    The height of cleverness is to be able to conceal it.
    - Francois de La Rochefoucauld

  13. #13
    Member
    Join Date
    Feb 2005
    Location
    The Netherlands
    Posts
    41
    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
    Last edited by Define_Robert; 03-11-2006 at 03:07 PM.

  14. #14
    Senior Member
    Join Date
    Feb 2004
    Posts
    782
    What the free 3d renderer/modeler?

  15. #15
    Senior Member DayDream's Avatar
    Join Date
    Aug 2000
    Location
    Belgrade/ Serbia
    Posts
    370
    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)



    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.



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



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


  16. #16
    Senior Member DayDream's Avatar
    Join Date
    Aug 2000
    Location
    Belgrade/ Serbia
    Posts
    370
    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...



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



    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.



    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.



    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.



    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.



    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.


  17. #17
    Senior Member
    Join Date
    Feb 2004
    Posts
    782
    Thanks for that post, I'm trying to follow it now.

  18. #18
    Senior Member
    Join Date
    Feb 2004
    Posts
    782
    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.
    Last edited by Archbob; 04-01-2006 at 07:22 PM.

  19. #19
    Senior Member UnknownGuy's Avatar
    Join Date
    Jul 2003
    Location
    Canada
    Posts
    1,361
    Is opacity the same thing as transparency?
    Yes. (Or maybe opposites but same idea).

    I'm lost on what you mean by "rebuild the fish".
    He means to look at it and draw a new one.

  20. #20
    Senior Member DayDream's Avatar
    Join Date
    Aug 2000
    Location
    Belgrade/ Serbia
    Posts
    370
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center