Skip to content

Commit 67ad898

Browse files
committed
Tween.generateData(frameRate) allows you to generate tween data into an array, which can then be used however you wish (see new examples)
Added new Retro Font examples.
1 parent 7183322 commit 67ad898

15 files changed

Lines changed: 541 additions & 25 deletions

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,8 @@ New features:
139139
* You can now create blank Tilemaps and then populate them with data later.
140140
* A single Animation object now has 3 new events: onStart, onLoop and onComplete.
141141
* Animation.loopCount holds the number of times the animation has looped since it last started.
142+
* Tween.generateData(frameRate) allows you to generate tween data into an array, which can then be used however you wish (see new examples)
143+
142144

143145
Updates:
144146

examples/text/littera.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
3+
4+
function preload() {
5+
6+
game.load.bitmapFont('shortStack', 'assets/fonts/bitmapFonts/shortStack.png', 'assets/fonts/bitmapFonts/shortStack.fnt');
7+
8+
}
9+
10+
function create() {
11+
12+
game.add.bitmapText(32, 32, 'shortStack', 'This font was generated using the\nfree Littera web site\n\nhttp://kvazars.com/littera/', 32);
13+
14+
}

examples/text/retro font 1.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
3+
4+
function preload() {
5+
6+
game.load.image('knightHawks', 'assets/fonts/retroFonts/KNIGHT3.png');
7+
8+
}
9+
10+
var font;
11+
12+
function create() {
13+
14+
font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);
15+
font.text = 'phaser was here';
16+
17+
for (var c = 0; c < 19; c++)
18+
{
19+
var i = game.add.image(game.world.centerX, c * 32, font);
20+
i.tint = Math.random() * 0xFFFFFF;
21+
i.anchor.set(0.5, 1);
22+
}
23+
24+
}
25+
26+
function update() {
27+
28+
font.text = "phaser x: " + game.input.x + " y: " + game.input.y;
29+
30+
}

examples/text/retro font 2.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
3+
4+
function preload() {
5+
6+
game.load.image('goldFont', 'assets/fonts/retroFonts/gold_font.png');
7+
game.load.image('bluePink', 'assets/fonts/retroFonts/bluepink_font.png');
8+
game.load.image('forgotten', 'assets/pics/forgotten_worlds.png');
9+
10+
}
11+
12+
var font1;
13+
var font2;
14+
var image1;
15+
var image2;
16+
17+
function create() {
18+
19+
font1 = game.add.retroFont('goldFont', 16, 16, "! :() ,?." + Phaser.RetroFont.TEXT_SET10, 20, 0, 0);
20+
font1.text = "phaser brings you retro style bitmap fonts";
21+
22+
image1 = game.add.image(game.world.centerX, 48, font1);
23+
image1.anchor.set(0.5);
24+
25+
font2 = game.add.retroFont('bluePink', 32, 32, Phaser.RetroFont.TEXT_SET2, 10);
26+
font2.setText("phaser 2\nin the house", true, 0, 8, Phaser.RetroFont.ALIGN_CENTER);
27+
28+
image2 = game.add.image(game.world.centerX, 220, font2);
29+
image2.anchor.set(0.5);
30+
31+
game.add.image(0, game.height - 274, 'forgotten');
32+
33+
game.time.events.loop(Phaser.Timer.SECOND * 2, change, this);
34+
35+
}
36+
37+
function change() {
38+
39+
image2.tint = Math.random() * 0xFFFFFF;
40+
41+
}
42+
43+
function update() {
44+
45+
image2.rotation += (2 * game.time.physicsElapsed);
46+
47+
}

examples/tweens/generate data.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
2+
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
3+
4+
function preload() {
5+
6+
game.load.image('wasp', 'assets/sprites/wasp.png');
7+
game.load.image('sky', 'assets/skies/cavern1.png');
8+
9+
}
10+
11+
var bugs;
12+
var index = 0;
13+
var data;
14+
var pos = [];
15+
16+
function create() {
17+
18+
game.add.image(0, 0, 'sky');
19+
20+
// image = game.add.image(0, 0, 'wasp');
21+
22+
// We don't want it to actually run, so we use game.make.tween instead of game.add.tween
23+
24+
var tweenData = { x: 0, y: 0 };
25+
26+
// Here we'll tween the values held in the tweenData object to x: 500, y: 300
27+
tween = game.make.tween(tweenData).to( { x: 100, y: 400 }, 2000, Phaser.Easing.Sinusoidal.InOut);
28+
29+
// Set the tween to yoyo so it loops smoothly
30+
tween.yoyo(true);
31+
32+
// We have 3 interpolation methods available: linearInterpolation (the default), bezierInterpolation and catmullRomInterpolation.
33+
34+
// tween.interpolation(game.math.bezierInterpolation);
35+
tween.interpolation(game.math.catmullRomInterpolation);
36+
37+
// Generates the tween data at a rate of 60 frames per second.
38+
// This is useful if you've got a lot of objects all using the same tween, just at different coordinates.
39+
// It saves having to calculate the same tween across the properties of all objects involved in the motion.
40+
// Instead you can pre-calculate it in advance and trade that in for a bit of memory to store it in an array.
41+
data = tween.generateData(60);
42+
43+
// Now create some sprites to shown the tween data in action
44+
bugs = game.add.group();
45+
46+
pos.push(new Phaser.Point(32, 0));
47+
pos.push(new Phaser.Point(300, 100));
48+
pos.push(new Phaser.Point(600, 70));
49+
50+
bugs.create(pos[0].x, pos[0].y, 'wasp');
51+
bugs.create(pos[1].x, pos[1].y, 'wasp');
52+
bugs.create(pos[2].x, pos[2].y, 'wasp');
53+
54+
}
55+
56+
function update() {
57+
58+
// A simple data playback.
59+
60+
// Each element of the array contains an object that includes whatever properties were tweened
61+
// In this case the x and y properties
62+
63+
// Because the tween data is pre-generated we can apply it however we want:
64+
// Directly, by adding to the coordinates
65+
bugs.getAt(0).x = pos[0].x + data[index].x;
66+
bugs.getAt(0).y = pos[0].y + data[index].y;
67+
68+
// Half one of the values
69+
bugs.getAt(1).x = pos[1].x + (data[index].x / 2);
70+
bugs.getAt(1).y = pos[1].y + data[index].y;
71+
72+
// Inverse one of the values
73+
bugs.getAt(2).x = pos[2].x - data[index].x;
74+
bugs.getAt(2).y = pos[2].y + data[index].y;
75+
76+
// You can do all kinds of effects by modifying the tween data,
77+
// without having loads of active tweens running.
78+
79+
// This just advances the tween data index
80+
// It's crude and doesn't take target device speed into account at all, but works as an example
81+
index++;
82+
83+
if (index === data.length)
84+
{
85+
index = 0;
86+
}
87+
88+
}

examples/wip/bitmaptext littera.js

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
11

2-
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
2+
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
33

44
function preload() {
55

66
game.load.bitmapFont('shortStack', 'assets/fonts/bitmapFonts/shortStack.png', 'assets/fonts/bitmapFonts/shortStack.fnt');
77

88
}
99

10-
var text;
11-
1210
function create() {
1311

14-
text = game.add.bitmapText(100, 100, 'shortStack', 'Bitmap Fonts\nfrom Littera', 64);
15-
16-
}
17-
18-
function update() {
12+
game.add.bitmapText(32, 32, 'shortStack', 'This font was generated using the\nfree Littera web site\n\nhttp://kvazars.com/littera/', 32);
1913

2014
}

examples/wip/bitmaptext1.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: p
33

44
function preload() {
55

6-
game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/desyrel.xml', null, 0, -32);
7-
game.load.bitmapFont('carrier', 'assets/fonts/bitmapFonts/carrier_command.png', 'assets/fonts/carrier_command.xml', null, 0, 24);
6+
game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/bitmapFonts/desyrel.xml', null, 0, -32);
7+
game.load.bitmapFont('carrier', 'assets/fonts/bitmapFonts/carrier_command.png', 'assets/fonts/bitmapFonts/carrier_command.xml', null, 0, 24);
88

99
}
1010

examples/wip/bitmaptext2.js

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,43 @@ function preload() {
55

66
game.load.image('goldFont', 'assets/fonts/retroFonts/gold_font.png');
77
game.load.image('bluePink', 'assets/fonts/retroFonts/bluepink_font.png');
8+
game.load.image('forgotten', 'assets/pics/forgotten_worlds.png');
89

910
}
1011

1112
var font1;
1213
var font2;
14+
var image1;
15+
var image2;
1316

1417
function create() {
1518

16-
font1 = game.add.bitmapFont(game.world.centerX, 96, 'goldFont', 16, 16, "! :() ,?." + Phaser.BitmapFont.TEXT_SET10, 20, 0, 0);
19+
font1 = game.add.retroFont('goldFont', 16, 16, "! :() ,?." + Phaser.RetroFont.TEXT_SET10, 20, 0, 0);
1720
font1.text = "phaser brings you retro style bitmap fonts";
18-
font1.anchor.set(0.5);
1921

20-
font2 = game.add.bitmapFont(game.world.centerX, 300, 'bluePink', 32, 32, Phaser.BitmapFont.TEXT_SET2, 10);
21-
font2.setText("phaser is\nrocking :)", true, 0, 8, Phaser.BitmapFont.ALIGN_CENTER);
22-
font2.anchor.set(0.5);
22+
image1 = game.add.image(game.world.centerX, 48, font1);
23+
image1.anchor.set(0.5);
2324

24-
game.input.onDown.add(change, this);
25+
font2 = game.add.retroFont('bluePink', 32, 32, Phaser.RetroFont.TEXT_SET2, 10);
26+
font2.setText("phaser 2\nin the house", true, 0, 8, Phaser.RetroFont.ALIGN_CENTER);
27+
28+
image2 = game.add.image(game.world.centerX, 220, font2);
29+
image2.anchor.set(0.5);
30+
31+
game.add.image(0, game.height - 274, 'forgotten');
32+
33+
game.time.events.loop(Phaser.Timer.SECOND * 2, change, this);
2534

2635
}
2736

2837
function change() {
2938

30-
font2.tint = Math.random() * 0xFFFFFF;
39+
image2.tint = Math.random() * 0xFFFFFF;
3140

3241
}
3342

3443
function update() {
3544

36-
font2.rotation += 0.03;
45+
image2.rotation += (2 * game.time.physicsElapsed);
3746

3847
}

examples/wip/bitmaptext3.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11

2-
// var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });
32
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
43

54
function preload() {
@@ -9,11 +8,10 @@ function preload() {
98
}
109

1110
var font;
12-
var i;
1311

1412
function create() {
1513

16-
font = game.add.bitmapFont('knightHawks', 31, 25, Phaser.BitmapFont.TEXT_SET6, 10, 1, 1);
14+
font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);
1715
font.text = 'phaser was here';
1816

1917
for (var c = 0; c < 19; c++)

examples/wip/retro font effect.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
3+
4+
function preload() {
5+
6+
game.load.image('knightHawks', 'assets/fonts/retroFonts/KNIGHT3.png');
7+
8+
}
9+
10+
var font;
11+
12+
function create() {
13+
14+
font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);
15+
font.text = 'phaser v2';
16+
17+
var i;
18+
var tween;
19+
20+
for (var c = 0; c < 20; c++)
21+
{
22+
// var i = game.add.image(game.world.centerX, c * 32, font);
23+
var i = game.add.image(game.world.centerX + (c * 10), 32, font);
24+
// i.tint = Math.random() * 0xFFFFFF;
25+
i.anchor.set(0.5, 1);
26+
27+
game.world.sendToBack(i);
28+
29+
// tween = game.add.tween(i).to( { y: 500 }, 2000, Phaser.Easing.Quadratic.InOut, true, i * 100, 1000, true);
30+
31+
// to: function (properties, duration, ease, autoStart, delay, repeat, yoyo) {
32+
33+
tween = game.add.tween(i).to( { y: 500 }, 2000, Phaser.Easing.Sinusoidal.InOut);
34+
tween.delay(c * 10);
35+
tween.yoyo(true);
36+
tween.repeat(Number.MAX_SAFE_INTEGER);
37+
tween.interpolation(game.math.bezierInterpolation);
38+
tween.start();
39+
}
40+
41+
}
42+
43+
function update() {
44+
45+
// font.text = "phaser x: " + game.input.x + " y: " + game.input.y;
46+
47+
}

0 commit comments

Comments
 (0)