Author Topic: Finishing Touches; Animations, Graphics & Menu Tutorial  (Read 2704 times)

0 Members and 1 Guest are viewing this topic.

Offline squidgetx

  • Food.
  • CoT Emeritus
  • LV10 31337 u53r (Next: 2000)
  • *
  • Posts: 1881
  • Rating: +503/-17
  • rawr.
    • View Profile
Finishing Touches; Animations, Graphics & Menu Tutorial
« on: September 19, 2011, 11:25:07 pm »
So buttsfredkin suggested I write a tutorial on this subject, so I guess I might as well. This tutorial is going to be a little less structured than usual; I'm just going to list off a series of bullet point tips for you guys. Enjoy!

Note; For clarity purposes I've left the code relatively unoptimized.

  • You can make menus sparkle a little with some animations. The most common one I like to use is a wipe-in effect. This can be accomplished with the use of acceleration and velocity to control the piece of text. Place the text in an array with ptr, xpos, ypos, xvel, and yvel. Sometimes, if you are having the text come in horizontally or vertically, you can save some time by omitting the appropriate values. For more information on acceleration, check out the specific tutorials thread for some simple explanations in the physics tutorials. The key here is that you want to start the text object with some starting velocity, and then have it decelerate so that it will slow and then stop. This can actually apply to many things, not just text; some examples can be menu cursors, borders, map tiles, and more.
Code: (Simple fly-in) [Select]
"Text"->Str1
0->X 
40->V
While V   //While it has some velocity
Text(X/8,Y,Str1)  //We'll use *8 precision
V-1->V+X->X  //Decrease velocity by 1 and add it to the position
End

  • Borders-You want to make a 'window border' for your menu, but you don't want a plain old box.... Well, there are many things you can do. Here are some of the menu variations I use:
Code: (Grayscale borderline inside the box) [Select]
Rect(x,y,w,h)
RectI(x+1,y+1,w-2,h-2)
Rect(x,y,w,h)^^r
RectI(x+2,y+2,w-4,h-4
Code: (Pokemon style box) [Select]
Rect(x,y,w,h)
RectI(x+2,y+2,w-4,h-4)
Pxl-off(x,y)
Pxl-off(x+w,y)
Pxl-off(x,y+h)
Pxl-off(x+w,y+h)
Use your imagination!

  • Custom Fonts- They are cool. I don't know if there's been a tutorial on this before, but it's pretty straightforward.
Code: (custom font) [Select]
.Let's pretend that the fontset is stored in Pic1
Lbl W  //write routine, arguments are x, y and pointer to text
For(E,0,length(r3)-1)  //For the length of the word
Pt-On(E*8+r1,r2,{r3+E}-$41*8+Pic1)   //Take value of text character and use it to draw the letter.
End
  • Random aesthetic things: I've run out of things for now, so I'll just talk about random things. Circles and lines look good behind text. Check out Space Dash title screen for an example (link in sig). Grayscale layering effects are also very nice: copy L6 to L3, clear L6 and DispGraph^^r; again, you can see this in Space Dash (And Gravity Guy). Something that I haven't done before but also looks very nice is menu highlighting;akin to mouseovers, except on the calc. Oh, and make sure everything is always centered; that always makes everything look better.

Well I'm done for now, I might add some more stuff if I can think of it in the morning.
« Last Edit: September 19, 2011, 11:25:39 pm by squidgetx »

Offline MGOS

  • LV6 Super Member (Next: 500)
  • ******
  • Posts: 336
  • Rating: +95/-0
    • View Profile
Re: Finishing Touches; Animations, Graphics & Menu Tutorial
« Reply #1 on: September 20, 2011, 12:52:37 am »
Wow, nice tutorial, squidgetx.
The only thing I don't understand is the dollar sign in the Pt-On()-Function in the last example. Is this new to axe in 1.0.x, in which menu can I get it, or is it just a typing mistake?
« Last Edit: September 20, 2011, 12:53:20 am by MGOS »

Offline LincolnB

  • Check It Out Now
  • LV9 Veteran (Next: 1337)
  • *********
  • Posts: 1115
  • Rating: +125/-4
  • By Hackers For Hackers
    • View Profile
Re: Finishing Touches; Animations, Graphics & Menu Tutorial
« Reply #2 on: September 21, 2011, 09:41:31 am »
Yay for squigetx!! This will be useful information. Also, by the dollar sign in Pt-On, did you mean hexadecimal notation?
Completed Projects:
   >> Spacky Emprise   >> Spacky 2 - Beta   >> Fantastic Sam
   >> An Exercise In Futility   >> GeoCore

My Current Projects:

Projects in Development:
In Medias Res - Contest Entry

Talk to me if you need help with Axe coding.


Spoiler For Bragging Rights:
Not much yet, hopefully this section will grow soon with time (and more contests)



Offline Munchor

  • LV13 Extreme Addict (Next: 9001)
  • *************
  • Posts: 6199
  • Rating: +295/-121
  • Code Recycler
    • View Profile
Re: Finishing Touches; Animations, Graphics & Menu Tutorial
« Reply #3 on: September 21, 2011, 11:51:57 am »
Wow, nice tutorial, squidgetx.
The only thing I don't understand is the dollar sign in the Pt-On()-Function in the last example. Is this new to axe in 1.0.x, in which menu can I get it, or is it just a typing mistake?

$ means the Hexadecimal notation symbol, not sure of what it is in Axe ;)

Nice tutorial squidgetx!