Hey there
Hey there
The blog is online again. Have been lazy in keeping it up and running and though google page rank might not like me for it, I don’t think anyone got hurt. Anyway, two blog posts got lost. The first being a “I’m taking a break” message and the second one being a guest post by Doidel, a member of bbgamezone.net.
From now on I will occasionally update the blog with new content and I’m going to take a little more care of it.
Here is the post by Doidel again so you don’t have to miss out on his little tutorial:
Creating Spells with Photoshop
Many browsergame developers sooner or later come to the point where they must create spell graphics, may they be for attack, defense or buffing teammates. So did I, and my chosen tool turned out to be Photoshop 7, an old yet adequate version for a beginner. Though no knowledge of painting nor using Photoshop you’ll be able to create two spells alike mine within less than 3 hours. Just follow these four steps:
- Run through this tutorial (10 min)
- And run through this tutorial too (10 min)
- Read this in order to use “Lens Flare” with transparent backgrounds (5 min)
- Create your own spells (1 hour per spell in my case)
- Check that your image has a transparent background, then click “File – Save for Web” and choose “PNG-24″ from the format list. This will save your image with a transparent background (By now, all modern browsers display PNGs correctly).
How to create an animated spell for my browsergame?
The basic idea is quite simple:
Either…
With javascript, preload all spell frames (A frame is a single image in this case, played one by another they become an animation) and iterate through them. These pictures will be displayed as a series for the user, and still you have a PNGs quality and transparency. It is recommended to use “Sprites” in this case, i.e. having the frame series within one picture. Use the css background-position property to iterate through the frames.
Or…
Use a javascript framework (e.g. jquery or mootools) and use the Fx libraries. With them you can move objects around, let them fade, resize them and much more.
All the best
Doidel
