Animation coding

#1

Hi, I’m hoping this will be easy for someone to answer. (I have only just discovered Wick editor).

I run a coding class at school and am keen to create some ‘wow’ factor while demonstrating that writing code can be a much faster way of achieving something.

To that end I want to show them how to how to get something moving across the screen in three ways:

  1. frame by frame animation
  2. using a tween
  3. writing code

I’m fine with 1 and 2 but when it comes to the code I have created a square and edited the script to say:
square.x = 20;
square.x = 300;
square.x = 600;
etc
The issue I have is that the square jumps straight to the 600 position without showing it travelling. I’m guessing its just doing it so fast that it looks like it goes straight to the last position.

Can anyone advise how to get an image travelling accross the screen at a speed that will appear as an animation?

Many thanks for your help

#2

i mainly use frame by frame animation cause you can make it pretty livley although it can be alot of work (if your gonna do frame by frame then i recomend 24 fps), if you use tweening then it works and its very easy but it will look very stale if you dont add variation(recomendation is also 24 fps) and coding i really dont know cause im like 9 with a brain of a peanut.

Frame by Frame (if you know about how to make a good animation)

My Project5-26-2022_17-01-54
My Project5-26-2022_17-01-541920×1080 489 KB

Tweening

My Project5-26-2022_17-04-05
My Project5-26-2022_17-04-051920×1080 410 KB

4 Likes
#3

Code generally happens basically instantaneously, so by setting the position 3 times in different spots it will look like it just goes to the last value since it also only updates the visual once per frame.

What you want to have happen is over time (so it can be visualized). So by using the update script you can have it count the time that passes and get the point between the start and end that would be at that time.

Here’s an example project
My Project5-26-2022_16-46-53.wick (1.8 KB)

#4

if you want to code a movement you have to tell your square where it has to be in each frame.
As SomeoneElse already pointed a good place is in the update section of your frame.
Placing a script there means:
“every time a new frame starts” (your project is likely to run at 12 frames per second )
the rest could be
“increase (or decrease) the square x position by an increment”
and you can also
“Increase or decrease the square y position by an increment”
In js it will look like
square.x+=5; // take current square x and add 5 --> your square move left to right
square.y+=2; // take current square y and add 2 --> your square move also top to bottom

you can then add any level of complexity by setting limits to your movement, making it random or maybe accelerated or decelerated, binding it to the behaviour or other objects and such…