|
| 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 | +} |
0 commit comments