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.viewHeight only. These are different concepts now, and
ct.room.height changes over time.
Stuff changed in v1.3. See the migration guide. Shortly,
ct.camera.width now, and
ct.camera.height, but there are nuances once you start scaling or rotating the camera.
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 template 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);
Changes from 1.0.0-next-1 to 1.0.0-next-2
For working with different resolutions, you should now use
ct.viewHeight instead of
ct.height. The latter now mean the size of a drawing canvas, which doesn't always match with your viewport, especially when using new sizing modes of
Changes in 1.0.0-next-3
Keyboard and mouse support
ct.js now uses Actions for mapping a user input with game events. You can read about Actions here. Because of that,
ct.mouse dropped out of the core and is now a catmod.
All old projects will automatically work with
ct.mouse.legacy and, if needed,
ct.keyboard.legacy. They reflect the previous behaviour of these modules and should not cause compatibility issues.
ct.keyboard doesn't have
ct.keyboard.released. Instead, it fully relies on the new Actions system.
Graphics -> Textures
Graphics, graphic assets, etc. are now called "Textures".
Now, instead of writing
this.graph = 'Sosiska'; in your code to change a texture, you should write
this.tex = 'Sosiska;.