Version 1.0 is slightly different from 0.5.2 and earlier versions of ct.js. These changes include movement and, at its bigger part, drawing. Here are some tips and examples on how to update your 0.x project to 1.x.
Movement is generally the same, though you should note, that some variables are now renamed, and their older variants are deprecated and work a bit slower:
Such variables as
gravity still reflect a number of pixels added each frame, but, as the default framerate is 60 now, you should cut them in half if you used 30 FPS.
Additionally, two new variables were introduced:
vspeed. You can read and write to them.
Under the hood, the default movement system is now based on vertical an horizontal speed, not on direction and overall speed. Some inconsistencies may arise, though, especially with specific orders of execution:
this.speed = 4; this.direction = 90;
Everything is ok,
this.vspeed is now -4.
this.direction = 90; this.speed = 4;
this.direction = 90 makes no sense here, because
this.hspeed are equal to 0 and this rotation had no effect.
When making incremental movement without default variables, or when adding acceleration, you should multiply your numbers with
ct.delta. So, instead of this:
this.speed += 0.5; this.x -= 10;
You should write:
this.speed += 0.5 * ct.delta; this.x -= 10 * ct.delta;
It is not necessary, yet recommended, as it helps to provide consistent movement with any framerate.
ct.delta, so the default movement system will be consistent on every framerate by default.
Cannot create property '_parentID' on boolean 'true')
this.transform = true; will break your game now, as
transform is now an object.
Instead of writing this:
this.transform = true; this.tx = 0.5; this.ty = -1; this.tr = 45; this.ta = 0.5;
You should write this:
this.scale.x = 0.5; this.scale.y = 0.5; this.rotation = 45; this.alpha = 0.5;
ct.height only. These are different concepts now, and
ct.room.height changes over time.
this.shootTimer -= ct.delta;
First off: you can't directly draw in the Draw event now. Instead, you should create an object to draw (e.g. in the On Create event), and add it to your room or attach to an object, forming some kind of a widget.
Drawing text labels
ct.styles.set('ScoreText'); ct.draw.text('Score: ' + this.score, 20, 20); ct.styles.reset();
You should write this to your On Create code:
this.scoreLabel = new PIXI.Text('Score: ' + this.score, ct.styles.get('ScoreText')); this.scoreLabel.x = this.scoreLabel.y = 20; this.addChild(this.scoreLabel);
And update the label in the Draw event:
this.scoreLabel.text = 'Score: ' + this.score;
For this, use PIXI.Graphics. Its API is similar to HTMLCanvas API, and one PIXI.Graphics object can contain more than one shape.
Example (On Create event):
var overlay = new PIXI.Graphics(); overlay.beginFill(0x5FCDE4); overlay.drawRect(0, 0, 59, 48); overlay.endFill(); overlay.alpha = 0.65; this.addChild(overlay);
Drawing Healthbars, Mana Bars, etc.
For these, consider using built-in 9-slice scaling. You should use an image that can be stretched horizontally and/or vertically, like this:
Add this to your On Create code:
this.healthBar = new PIXI.mesh.NineSlicePlane( ct.res.getTexture('Healthbar', 0), 8, 8, 8, 16); /* this can be also written in one line */ this.addChild(this.healthBar); this.healthBar.x = this.healthBar.y = 32; /* where to place this bar */ this.healthBar.height = 64; this.healthBar.width = ct.game.health * 2; // Assuming that the max health is 100 and you want 100×2 = 200px wide bar
And update it each step with this code:
this.healthBar.width = ct.game.health * 2;
8, 8, 8, 16 tell which areas should not be stretched, in this order: on the left side, on the top, on the right and on the bottom.
Backgrounds for these bars can be made in the same way.
Drawing Static Images
Two ways to do that exist:
- Creating a new type that will display the needed image;
- Or creating a PIXI.Sprite and adding it to the room (or to the object).
The second approach can be made in this way:
this.coinIcon = new PIXI.Sprite(ct.res.getTexture('coinGold', 0)); this.coinIcon.x = 20; this.coinIcon.y = this.y + 35; this.addChild(this.coinIcon);