BADGE 3
BACKMake balls with letters!
For this ZIM Badge we will split the phrase "ZIM PRESENT" up into an Array of letters.
We will use ZIM Tile() to tile
ZIM Circle() objects (balls)
behind the present so that there is a circle for each letter.
We will make dynamic physics circles for each circle and add them to where the ZIM circles are.
This is the reverse of the way we made the wrappings because ZIM Tile works on ZIM objects,
not physics objects and using ZIM Tile makes tiling easier than manually creating tiles with loops.
We will make a ZIM Label() for each circle and then map the ZIM circles to the physics circles much like we did for the wrappings. The process is so similar that we will move through this a little more quickly. The last thing we do in this section is to create a timer with a ZIM Label and use a ZIM interval for timing.
23 a) ABOVE the makeBalls function, make a variable called letters and assign the String "ZIM PRESENT".
This is called a String literal and it represents a String object.
We will now use a JavaScript method of String objects called split()
to split the string into an Array of letters.
Put the object first - in this case we have it already ("ZIM PRESENT") and then the dot (.)
followed by the method (split()) and pass "" as the parameter to split on new characters into an array with eleven letters.
If we passed in " " (with a space between the quotes) then that would split the String into an array with two words. We
We will make a ZIM Label() for each circle and then map the ZIM circles to the physics circles much like we did for the wrappings. The process is so similar that we will move through this a little more quickly. The last thing we do in this section is to create a timer with a ZIM Label and use a ZIM interval for timing.
We place the variable above the makeBalls function rather than inside the makeBalls function
because we will need this variable when we make slots later.
Where we will have access to variables is called scope.
When we declare a variable with the var keyword then we can use that variable inside the function the variable is declared.
JS6 has other options called block scope but in JS5 it is based on functions.
Scope has a few other rules so view the reference videos in the more section for more information.
23 b) INSIDE the makeBalls function make a variable called radius and assign it 30 for the radius of the ball.
Here we make a variable called radius because we will need the radius for the tiling and for making the physics balls.
Since we need the radius number in two (or more) places, we abstract the duplicated number to a variable.
We see the variable as an identifier. The details the variable holds are hidden - we do not have to think about them again.
We do not use the number anymore but rather the abstract variable.
Note: using variables declared in a function does not make the function any more or less abstract.
23 c) Assign a new Tile() to balls.
The parameters of the Tile are as follows, the first being the Circle() object:
- new Circle(radius, frame.dark)
- 4,3 - for the columns and rows
- letters.length - the total number of tiles
23 d) View the app in the Browser and when you unwrap the present you should see tiled circles fade in.
HIGHLIGHT MORE ANSWER
24 a) loop() through the letters array
and in the function parameters collect letter and collect i
where i is the iteration number of the loop (0,1,2,etc.)
24 b) INSIDE the function { }, make a variable called body assign to it the results of the makeCircle() method of physics. These will be our physics circles. Pass to this method a configuration object { } holding the following properties:
HIGHLIGHT MORE ANSWER
24 b) INSIDE the function { }, make a variable called body assign to it the results of the makeCircle() method of physics. These will be our physics circles. Pass to this method a configuration object { } holding the following properties:
- radius:radius
- restitution:.5 - how bouncy with 1 being crazy!
- linear:.4 - how much damping for movement with default .5
HIGHLIGHT MORE ANSWER
25. Make a new Label() with a configuration object with the following properties:
- text:letter - this is the letter each time we loop
- color:frame.white - or "white"
- align:center
- valign:center
- size:20
We did not assign the label to a variable as we are adding it right away to the shape.
Even if we did assign the label to a variable, it would be gone the next loop iteration.
If we need to access the label again later we can use shape.getChildAt(1) as the actual ZIM shape is at index 0.
Or we could assign the label as a property of the shape:
shape.label = new Label(etc.);
Then later we could access this property for any of our shapes. We have chosen to use getChildAt later on.
HIGHLIGHT MORE ANSWER
shape.label = new Label(etc.);
Then later we could access this property for any of our shapes. We have chosen to use getChildAt later on.
ZIM Learn References
We want to place the physics circles at the location of the ZIM circles in the tile.
The problem is that the circle positions in the tile are relative to the tile's coordinate system.
The physics coordinate system is relative to the stage.
We could just add the title's x and y to the ZIM circle's x and y to get our location
but there are CreateJS methods that make this automatic - and much easier when there are scaled and rotated containers.
These are called localToGlobal(), globalToLocal() and localToLocal().
These return a CreateJS Point that holds the converted x and y values.
Here we want to change the local values to global values so we use localToGlobal().
26. Make a variable called point and assign the results of the shape's localToGlobal() method, passing 0,0 in as parameters.
This will convert the center of the circle in the tile to the global coordinates.
On the next line, set the x property of the body to the point's x property using the assignment operator (=).
And then set the y property of the body to the y property of the point. This starts the physics circles at the position of the ZIM circles in the tiled arrangement.
HIGHLIGHT MORE ANSWER
ZIM Learn References
27. ABOVE the loop through the letters, add a variable called ballBodies and assign it an empty Array [ ].
Then INSIDE at the bottom of the loop function use the JavaScript push() method to add the body to the ballBodies.
Put the object first (ballBodies) followed by the dot (.) and the method (push()) and pass in body as the parameter.
On the next line use the addMap() method of physics with parameters of body, shape to map the ZIM shape to the physics shape.
Even though we set the physics circles to the position of the ZIM circles, that was just to get the starting positions.
From now on, the ZIM circles will follow the physics circles.
HIGHLIGHT ANSWER
We are going to make a timer keep track of how long it takes us to sort the balls.
This is a ZIM Label()
and we will add a backing to the label that is a ZIM Rectangle().
The rectangle will have a fill color that has its alpha reduced. We use the String HTML/CSS value of "rgba()"
with the amount of red, green and blue out of 255 with 0 being none and 255 being all.
The 0s make black and then the fourth parameter is the alpha - and we will drop that to .2 (out of 1).
We could have set the alp() of the rectangle
but that would have affected the border color too.
28. Make a variable called timer and assign a new Label() with the following configuration object:
- backing:new Rectangle(150, 60, "rgba(0,0,0,.2)", frame.light)
- text:"0"
- size:50
- color:frame.grey
- align:"center"
- valign:"center"
29. Make a variable called scoreInterval and assign it the results of the
ZIM interval() method
passing 1000, function(){} as the parameters.
Collect a parameter we will call obj in the ( ).
Inside the function { } set the timer's text property equal to the obj's count property.
The ZIM interval function sends an information object to the function - this object has the count of how many times the interval has run.
This will update the timer label to how many seconds has gone by.
Normally, we would need a stage.update() here but with physics, the stage is always being updated.
CLAIM YOUR BADGE
Whew! Claim you Badge! We are now ready to go to the next section to make the slots.
HIGHLIGHT MORE ANSWER
ZIM Learn References
(SHOW YOUR TEACHER)
