|
To ensure its correct physical behaviour the bricks are created as an insance of class which is extended from PhysicsSprite class. The PhysicsSprite class provides all features of physics body.
The brick are represented by Brick class. It is an extension from PhysicsSprite class which means that they behave like box2d body. The brick’s body is set to be static. This means that it interacts with other dynamic bodies (ball), but do not move according to the gravity. The brick has four states (levels). When the ball hits the brick the level is decreased. The all physical properties are set in init function. The body has zero friction and density. The density of static body is always zero (no matter what it is set to). The bounce property affects the bounce from the brick and It is set only to 0.1 because the ball bounce is quite large (1.0 – full bounce).
Example: initialize the brick object
function init()
{
super.init();
this.state = 1; //image brigs.png
this.image = res.img.brisks;
this.frameWidth = 53;
this.frameHeight = 17; this.bodyType = #static;
this.density = 0.0;
this.friction = 0.0;
this.bounce = 0.1; //decoration object
this._paint = new Paint();
this._paint.alpha = 0;
this.disabled = false;
this.show(this);
}
When all needed physical properties are set in afterInit function can be creare a physical body by "private" _createBody function.
Examle: create physical body
function afterInit()
{
super.afterInit();
// create physics body
this._createBody();
}
When the bricks are hit, the brick is downgraded. If the level of the brick is less than 1, the brick disappears.
Example: decrease state or disable the brick
function hit()
{
if (this.disabled == false)
// disable brick if tis state (level) is less then one
if (this.state < 1) {
this.disabled = true;
this.scene.brickCount--;
this.hide(this);
// decrease the brick's state (level)
} else {
this.state -= 1;
}
}
The bricks are shown and hidden with a smooth animation. It only changes the alpha level. The animation is created by an Animator class. The animator class implements all mathematical background of the animations. Using this class the animation does not have to have linear behaviour. According to the required behaviour the animator object calls call-back function specified with addSubject function. The call back function has only one parameter the state, which specifies the current position in the animation.
Moscrif offers many various behaviours, used in transition property. In the show function, is created animator which runs 500ms and uses transition identified by easyIn. It starts up slowly and then quickly speeds up at the end of the animation.
Example: show brick with smooth animation
// animate brick wehn it is shown
function show(obj)
{
// create animator
var animator = new Animator({
transition: Animator.Transition.easeIn, // start up slowly and then quickly speed up at the end of the animation
duration: 500, // length of animation in miliseconds
});
animator.addSubject(function(state) { // state starts from 1.0 to 0.0
obj._paint.alpha = 255-(state*255).toInteger();
});
animator.reverse();
}
However the easyIn is not only one type of transition. Moscrif offers many other types. Its behaviour is shown in next three graphs.
  
|