mirror of
https://github.com/wassname/phaser.git
synced 2026-08-12 12:20:38 +08:00
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:
@@ -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);
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -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,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++)
|
||||
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user