Thursday 31 January 2019

How to create an animation

If you want to create a video game or animation for your program, you need first of all a series of images to be replaced in order to create the animation.
I created three different sequences for a character: one in which is stopped (s1-s18), one in which advances (f1-f6) and one in which recoils (b1-b6).

We put an image, called "Thai" as an example, in our window and create a custom property that contains the folder with all the animation sequences (called frames or sprites ).

Single frame

I put the image and then I added the following code:

on opencard
   put the filename of image thai into temp
   set itemdel to "/"
   put item 1 to -2 of temp into temp2
   set the cartella of image thai to temp2
   send fermo to image thai
end opencard



Then I wrote the code for the animation when it stays in place, I called the message standstill. I created a custom properties sprite that makes me as a counter to the correct order of images.
If the images are not all the same size the center of gravity shifts and the animation may begin to move, so it is best to store the position (property loc ) and reset it after updating the sprite.
We must be careful to create a message that calls itself, not a repeated sequence in a message, otherwise you will block in an infinite loop the program. Here is the correct code into the image:

on fermo
   put the cartella of me into cart
   put the sprite of me into spr
   add 1 to spr
   if spr > 16 then
      put 1 into spr
   end if
   set the sprite of me to spr
   put the loc of me into temploc
   put cart & "/s" & spr & ".png" into temp
   set the filename of image thai to temp
   set the loc of me to temploc      
   send fermo to me in 0.2 sec   
end fermo

on cancellafermo
      repeat for each line templ in the pendingmessages
      if item 3 of templ is "fermo" then
         put item 1 of templ into temp
         cancel temp
      end if      
   end repeat
end cancellafermo


As you can see the image contains both the message to be repeated to make the whole cycle of the sequence and the message to block it.
Now add the buttons to move your character, here is the code to move forward: 

on mouseUp   
call cancellafermo of image thai
   set the stato of image thai to "avanti"   
   put the cartella of image thai into cart
   repeat for 2 times
      repeat with spr = 1 to 6
         put cart & "/f" & spr & ".png" into temp
         put the item 1 of the loc of image thai into templocx      
         put the item 2 of the loc of the image thai into templocy
         add 5 to templocx
         set the loc of the image thai to templocx,templocy      
         set the filename of image thai to temp
         wait 0.2 sec
      end repeat
   end repeat   
   send fermo to image thai   
end mouseUp


Because I don't want interruptions during the sequence of movement, I used a single message with a loop repeat inside. But do it only if you want something that can never be broken. It is usually best to do as in the case of the stationary sequence.
You can also use the same code for the button to go back (just replace 5 with -5) and you will done.
This is the result and there isn't a line of code more:

3 comments:

  1. Great: but no way to use images from a Sprite Sheet.

    ReplyDelete
  2. This is just the information I am finding everywhere. Thanks for your blog, I just subscribe your blog. This is a nice blog.. Bring Collective conscious to peace and harmony

    ReplyDelete
  3. can you please tell me how can I make the sprite move forever while I'm holding the button?

    ReplyDelete