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.
This commit is contained in:
photonstorm
2014-03-03 22:43:35 +00:00
parent 7183322259
commit 67ad898294
15 changed files with 541 additions and 25 deletions
+14
View File
@@ -0,0 +1,14 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.bitmapFont('shortStack', 'assets/fonts/bitmapFonts/shortStack.png', 'assets/fonts/bitmapFonts/shortStack.fnt');
}
function create() {
game.add.bitmapText(32, 32, 'shortStack', 'This font was generated using the\nfree Littera web site\n\nhttp://kvazars.com/littera/', 32);
}
+30
View File
@@ -0,0 +1,30 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('knightHawks', 'assets/fonts/retroFonts/KNIGHT3.png');
}
var font;
function create() {
font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);
font.text = 'phaser was here';
for (var c = 0; c < 19; c++)
{
var i = game.add.image(game.world.centerX, c * 32, font);
i.tint = Math.random() * 0xFFFFFF;
i.anchor.set(0.5, 1);
}
}
function update() {
font.text = "phaser x: " + game.input.x + " y: " + game.input.y;
}
+47
View File
@@ -0,0 +1,47 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('goldFont', 'assets/fonts/retroFonts/gold_font.png');
game.load.image('bluePink', 'assets/fonts/retroFonts/bluepink_font.png');
game.load.image('forgotten', 'assets/pics/forgotten_worlds.png');
}
var font1;
var font2;
var image1;
var image2;
function create() {
font1 = game.add.retroFont('goldFont', 16, 16, "! :() ,?." + Phaser.RetroFont.TEXT_SET10, 20, 0, 0);
font1.text = "phaser brings you retro style bitmap fonts";
image1 = game.add.image(game.world.centerX, 48, font1);
image1.anchor.set(0.5);
font2 = game.add.retroFont('bluePink', 32, 32, Phaser.RetroFont.TEXT_SET2, 10);
font2.setText("phaser 2\nin the house", true, 0, 8, Phaser.RetroFont.ALIGN_CENTER);
image2 = game.add.image(game.world.centerX, 220, font2);
image2.anchor.set(0.5);
game.add.image(0, game.height - 274, 'forgotten');
game.time.events.loop(Phaser.Timer.SECOND * 2, change, this);
}
function change() {
image2.tint = Math.random() * 0xFFFFFF;
}
function update() {
image2.rotation += (2 * game.time.physicsElapsed);
}
+88
View File
@@ -0,0 +1,88 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('wasp', 'assets/sprites/wasp.png');
game.load.image('sky', 'assets/skies/cavern1.png');
}
var bugs;
var index = 0;
var data;
var pos = [];
function create() {
game.add.image(0, 0, 'sky');
// image = game.add.image(0, 0, 'wasp');
// We don't want it to actually run, so we use game.make.tween instead of game.add.tween
var tweenData = { x: 0, y: 0 };
// Here we'll tween the values held in the tweenData object to x: 500, y: 300
tween = game.make.tween(tweenData).to( { x: 100, y: 400 }, 2000, Phaser.Easing.Sinusoidal.InOut);
// Set the tween to yoyo so it loops smoothly
tween.yoyo(true);
// We have 3 interpolation methods available: linearInterpolation (the default), bezierInterpolation and catmullRomInterpolation.
// tween.interpolation(game.math.bezierInterpolation);
tween.interpolation(game.math.catmullRomInterpolation);
// Generates the tween data at a rate of 60 frames per second.
// This is useful if you've got a lot of objects all using the same tween, just at different coordinates.
// It saves having to calculate the same tween across the properties of all objects involved in the motion.
// Instead you can pre-calculate it in advance and trade that in for a bit of memory to store it in an array.
data = tween.generateData(60);
// Now create some sprites to shown the tween data in action
bugs = game.add.group();
pos.push(new Phaser.Point(32, 0));
pos.push(new Phaser.Point(300, 100));
pos.push(new Phaser.Point(600, 70));
bugs.create(pos[0].x, pos[0].y, 'wasp');
bugs.create(pos[1].x, pos[1].y, 'wasp');
bugs.create(pos[2].x, pos[2].y, 'wasp');
}
function update() {
// A simple data playback.
// Each element of the array contains an object that includes whatever properties were tweened
// In this case the x and y properties
// Because the tween data is pre-generated we can apply it however we want:
// Directly, by adding to the coordinates
bugs.getAt(0).x = pos[0].x + data[index].x;
bugs.getAt(0).y = pos[0].y + data[index].y;
// Half one of the values
bugs.getAt(1).x = pos[1].x + (data[index].x / 2);
bugs.getAt(1).y = pos[1].y + data[index].y;
// Inverse one of the values
bugs.getAt(2).x = pos[2].x - data[index].x;
bugs.getAt(2).y = pos[2].y + data[index].y;
// You can do all kinds of effects by modifying the tween data,
// without having loads of active tweens running.
// This just advances the tween data index
// It's crude and doesn't take target device speed into account at all, but works as an example
index++;
if (index === data.length)
{
index = 0;
}
}
+2 -8
View File
@@ -1,5 +1,5 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
@@ -7,14 +7,8 @@ function preload() {
}
var text;
function create() {
text = game.add.bitmapText(100, 100, 'shortStack', 'Bitmap Fonts\nfrom Littera', 64);
}
function update() {
game.add.bitmapText(32, 32, 'shortStack', 'This font was generated using the\nfree Littera web site\n\nhttp://kvazars.com/littera/', 32);
}
+2 -2
View File
@@ -3,8 +3,8 @@ var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: p
function preload() {
game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/desyrel.xml', null, 0, -32);
game.load.bitmapFont('carrier', 'assets/fonts/bitmapFonts/carrier_command.png', 'assets/fonts/carrier_command.xml', null, 0, 24);
game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/bitmapFonts/desyrel.xml', null, 0, -32);
game.load.bitmapFont('carrier', 'assets/fonts/bitmapFonts/carrier_command.png', 'assets/fonts/bitmapFonts/carrier_command.xml', null, 0, 24);
}
+17 -8
View File
@@ -5,34 +5,43 @@ function preload() {
game.load.image('goldFont', 'assets/fonts/retroFonts/gold_font.png');
game.load.image('bluePink', 'assets/fonts/retroFonts/bluepink_font.png');
game.load.image('forgotten', 'assets/pics/forgotten_worlds.png');
}
var font1;
var font2;
var image1;
var image2;
function create() {
font1 = game.add.bitmapFont(game.world.centerX, 96, 'goldFont', 16, 16, "! :() ,?." + Phaser.BitmapFont.TEXT_SET10, 20, 0, 0);
font1 = game.add.retroFont('goldFont', 16, 16, "! :() ,?." + Phaser.RetroFont.TEXT_SET10, 20, 0, 0);
font1.text = "phaser brings you retro style bitmap fonts";
font1.anchor.set(0.5);
font2 = game.add.bitmapFont(game.world.centerX, 300, 'bluePink', 32, 32, Phaser.BitmapFont.TEXT_SET2, 10);
font2.setText("phaser is\nrocking :)", true, 0, 8, Phaser.BitmapFont.ALIGN_CENTER);
font2.anchor.set(0.5);
image1 = game.add.image(game.world.centerX, 48, font1);
image1.anchor.set(0.5);
game.input.onDown.add(change, this);
font2 = game.add.retroFont('bluePink', 32, 32, Phaser.RetroFont.TEXT_SET2, 10);
font2.setText("phaser 2\nin the house", true, 0, 8, Phaser.RetroFont.ALIGN_CENTER);
image2 = game.add.image(game.world.centerX, 220, font2);
image2.anchor.set(0.5);
game.add.image(0, game.height - 274, 'forgotten');
game.time.events.loop(Phaser.Timer.SECOND * 2, change, this);
}
function change() {
font2.tint = Math.random() * 0xFFFFFF;
image2.tint = Math.random() * 0xFFFFFF;
}
function update() {
font2.rotation += 0.03;
image2.rotation += (2 * game.time.physicsElapsed);
}
+1 -3
View File
@@ -1,5 +1,4 @@
// var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
@@ -9,11 +8,10 @@ function preload() {
}
var font;
var i;
function create() {
font = game.add.bitmapFont('knightHawks', 31, 25, Phaser.BitmapFont.TEXT_SET6, 10, 1, 1);
font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);
font.text = 'phaser was here';
for (var c = 0; c < 19; c++)
+47
View File
@@ -0,0 +1,47 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('knightHawks', 'assets/fonts/retroFonts/KNIGHT3.png');
}
var font;
function create() {
font = game.add.retroFont('knightHawks', 31, 25, Phaser.RetroFont.TEXT_SET6, 10, 1, 1);
font.text = 'phaser v2';
var i;
var tween;
for (var c = 0; c < 20; c++)
{
// var i = game.add.image(game.world.centerX, c * 32, font);
var i = game.add.image(game.world.centerX + (c * 10), 32, font);
// i.tint = Math.random() * 0xFFFFFF;
i.anchor.set(0.5, 1);
game.world.sendToBack(i);
// tween = game.add.tween(i).to( { y: 500 }, 2000, Phaser.Easing.Quadratic.InOut, true, i * 100, 1000, true);
// to: function (properties, duration, ease, autoStart, delay, repeat, yoyo) {
tween = game.add.tween(i).to( { y: 500 }, 2000, Phaser.Easing.Sinusoidal.InOut);
tween.delay(c * 10);
tween.yoyo(true);
tween.repeat(Number.MAX_SAFE_INTEGER);
tween.interpolation(game.math.bezierInterpolation);
tween.start();
}
}
function update() {
// font.text = "phaser x: " + game.input.x + " y: " + game.input.y;
}
+88
View File
@@ -0,0 +1,88 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('wasp', 'assets/sprites/wasp.png');
game.load.image('sky', 'assets/skies/cavern1.png');
}
var bugs;
var index = 0;
var data;
var pos = [];
function create() {
game.add.image(0, 0, 'sky');
// image = game.add.image(0, 0, 'wasp');
// We don't want it to actually run, so we use game.make.tween instead of game.add.tween
var tweenData = { x: 0, y: 0 };
// Here we'll tween the values held in the tweenData object to x: 500, y: 300
tween = game.make.tween(tweenData).to( { x: 100, y: 400 }, 2000, Phaser.Easing.Sinusoidal.InOut);
// Set the tween to yoyo so it loops smoothly
tween.yoyo(true);
// We have 3 interpolation methods available: linearInterpolation (the default), bezierInterpolation and catmullRomInterpolation.
// tween.interpolation(game.math.bezierInterpolation);
tween.interpolation(game.math.catmullRomInterpolation);
// Generates the tween data at a rate of 60 frames per second.
// This is useful if you've got a lot of objects all using the same tween, just at different coordinates.
// It saves having to calculate the same tween across the properties of all objects involved in the motion.
// Instead you can pre-calculate it in advance and trade that in for a bit of memory to store it in an array.
data = tween.generateData(60);
// Now create some sprites to shown the tween data in action
bugs = game.add.group();
pos.push(new Phaser.Point(32, 0));
pos.push(new Phaser.Point(300, 100));
pos.push(new Phaser.Point(600, 70));
bugs.create(pos[0].x, pos[0].y, 'wasp');
bugs.create(pos[1].x, pos[1].y, 'wasp');
bugs.create(pos[2].x, pos[2].y, 'wasp');
}
function update() {
// A simple data playback.
// Each element of the array contains an object that includes whatever properties were tweened
// In this case the x and y properties
// Because the tween data is pre-generated we can apply it however we want:
// Directly, by adding to the coordinates
bugs.getAt(0).x = pos[0].x + data[index].x;
bugs.getAt(0).y = pos[0].y + data[index].y;
// Half one of the values
bugs.getAt(1).x = pos[1].x + (data[index].x / 2);
bugs.getAt(1).y = pos[1].y + data[index].y;
// Inverse one of the values
bugs.getAt(2).x = pos[2].x - data[index].x;
bugs.getAt(2).y = pos[2].y + data[index].y;
// You can do all kinds of effects by modifying the tween data,
// without having loads of active tweens running.
// This just advances the tween data index
// It's crude and doesn't take target device speed into account at all, but works as an example
index++;
if (index === data.length)
{
index = 0;
}
}
+77
View File
@@ -0,0 +1,77 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('wasp', 'assets/sprites/wasp.png');
game.load.image('sky', 'assets/skies/sky5.png');
}
var bugs;
var index = 0;
var data;
function create() {
game.add.image(0, 0, 'sky');
// image = game.add.image(0, 0, 'wasp');
// We don't want it to actually run, so we use game.make.tween instead of game.add.tween
var tweenData = { x: 0, y: 0 };
// Here we'll tween the values held in the tweenData object to x: 500, y: 300
tween = game.make.tween(tweenData).to( { x: 100, y: 500 }, 2000, Phaser.Easing.Sinusoidal.InOut);
// Set the tween to yoyo so it loops smoothly
tween.yoyo(true);
// We have 3 interpolation methods available: linearInterpolation (the default), bezierInterpolation and catmullRomInterpolation.
// tween.interpolation(game.math.bezierInterpolation);
tween.interpolation(game.math.catmullRomInterpolation);
// Generates the tween data at a rate of 60 frames per second.
// This is useful if you've got a lot of objects all using the same tween, just at different coordinates.
// It saves having to calculate the same tween across the properties of all objects involved in the motion.
// Instead you can pre-calculate it in advance and trade that in for a bit of memory to store it in an array.
data = tween.generateData(60);
// Now create some sprites to shown the tween data in action
bugs = game.add.group();
bugs.create(100, 0, 'wasp');
bugs.create(300, 100, 'wasp');
bugs.create(600, 30, 'wasp');
}
function update() {
// A simple data playback.
// Each element of the array contains an object that includes whatever properties were tweened
// In this case the x and y properties
bugs.getAt(0).x = data[index].x;
bugs.getAt(0).y += data[index].y;
bugs.getAt(1).x += data[index].x;
bugs.getAt(1).y += data[index].y;
bugs.getAt(2).x += data[index].x;
bugs.getAt(2).y += data[index].y;
// image.x = data[index].x;
// image.y = data[index].y;
index++;
if (index === data.length)
{
index = 0;
}
}