wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-07-31 12:40:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

ScrollZone back in under the new renderer with new demos

Browse Source
This commit is contained in:
Richard Davey
2013-05-30 05:34:35 +01:00
parent f2054f8a2a
commit ce1523585f
28 changed files with 1582 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tests/scrollzones/ballscroller.js
+25
View File
@@ -0,0 +1,25 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
game.loader.addImageFile('balls', 'assets/sprites/balls.png');
game.loader.load();
}
var scroller;
function create() {
// The source image (balls.png) is only 102x17 in size, but we want it to create a scroll the size of the whole game window.
// We can take advantage of the way a ScrollZone can create a seamless pattern for us automatically.
// If you create a ScrollRegion larger than the source texture, it'll create a DynamicTexture and perform a pattern fill on it and use that
// for rendering.
// We've rounded the height up to 612 because in order to have a seamless pattern it needs to be a multiple of 17 (the height of the source image)
scroller = game.add.scrollZone('balls', 0, 0, 800, 612);
// Some sin/cos data for the movement
game.math.sinCosGenerator(256, 4, 4, 2);
}
function update() {
// Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
scroller.currentRegion.scrollSpeed.x = game.math.shiftSinTable();
scroller.currentRegion.scrollSpeed.y = game.math.shiftCosTable();
}
})();
Tests/scrollzones/ballscroller.ts
+41
View File
@@ -0,0 +1,41 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
game.loader.addImageFile('balls', 'assets/sprites/balls.png');
game.loader.load();
}
var scroller: Phaser.ScrollZone;
function create() {
// The source image (balls.png) is only 102x17 in size, but we want it to create a scroll the size of the whole game window.
// We can take advantage of the way a ScrollZone can create a seamless pattern for us automatically.
// If you create a ScrollRegion larger than the source texture, it'll create a DynamicTexture and perform a pattern fill on it and use that
// for rendering.
// We've rounded the height up to 612 because in order to have a seamless pattern it needs to be a multiple of 17 (the height of the source image)
scroller = game.add.scrollZone('balls', 0, 0, 800, 612);
// Some sin/cos data for the movement
game.math.sinCosGenerator(256, 4, 4, 2);
}
function update() {
// Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
scroller.currentRegion.scrollSpeed.x = game.math.shiftSinTable();
scroller.currentRegion.scrollSpeed.y = game.math.shiftCosTable();
}
})();
Tests/scrollzones/parallax.js
+31
View File
@@ -0,0 +1,31 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('starray', 'assets/pics/auto_scroll_landscape.png');
game.loader.load();
}
function create() {
var zone = game.add.scrollZone('starray');
// Hide the default region (the full image)
zone.currentRegion.visible = false;
var y = 0;
var speed = 16;
// The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
for(var z = 0; z < 32; z++) {
zone.addRegion(0, y, 640, 10, speed);
if(z <= 15) {
speed -= 1;
} else {
speed += 1;
}
if(z == 15) {
y = 240;
speed += 1;
} else {
y += 10;
}
}
}
})();
Tests/scrollzones/parallax.ts
+53
View File
@@ -0,0 +1,53 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('starray', 'assets/pics/auto_scroll_landscape.png');
game.loader.load();
}
function create() {
var zone: Phaser.ScrollZone = game.add.scrollZone('starray');
// Hide the default region (the full image)
zone.currentRegion.visible = false;
var y:number = 0;
var speed:number = 16;
// The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
for (var z:number = 0; z < 32; z++)
{
zone.addRegion(0, y, 640, 10, speed);
if (z <= 15)
{
speed -= 1;
}
else
{
speed += 1;
}
if (z == 15)
{
y = 240;
speed += 1;
}
else
{
y += 10;
}
}
}
})();
Tests/scrollzones/region demo.js
+22
View File
@@ -0,0 +1,22 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('angelDawn', 'assets/pics/game14_angel_dawn.png');
game.loader.load();
}
var scroller;
function create() {
// This creates our ScrollZone centered in the middle of the stage.
scroller = game.add.scrollZone('angelDawn', game.stage.centerX - 320, 100);
// By default we won't scroll the full image, but we will create 3 ScrollRegions within it:
// This creates a ScrollRegion which can be thought of as a rectangle within the ScrollZone that can be scrolled
// independantly - this one scrolls the image of the spacemans head
scroller.addRegion(32, 32, 352, 240, 0, 2);
// The head in the top right
scroller.addRegion(480, 30, 96, 96, 4, 0);
// The small piece of text
scroller.addRegion(466, 160, 122, 14, 0, -0.5);
}
})();
Tests/scrollzones/region demo.ts
+37
View File
@@ -0,0 +1,37 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('angelDawn', 'assets/pics/game14_angel_dawn.png');
game.loader.load();
}
var scroller: Phaser.ScrollZone;
function create() {
// This creates our ScrollZone centered in the middle of the stage.
scroller = game.add.scrollZone('angelDawn', game.stage.centerX - 320, 100);
// By default we won't scroll the full image, but we will create 3 ScrollRegions within it:
// This creates a ScrollRegion which can be thought of as a rectangle within the ScrollZone that can be scrolled
// independantly - this one scrolls the image of the spacemans head
scroller.addRegion(32, 32, 352, 240, 0, 2);
// The head in the top right
scroller.addRegion(480, 30, 96, 96, 4, 0);
// The small piece of text
scroller.addRegion(466, 160, 122, 14, 0, -0.5);
}
})();
Tests/scrollzones/scroll window.js
+18
View File
@@ -0,0 +1,18 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('dragonsun', 'assets/pics/cougar_dragonsun.png');
game.loader.addImageFile('overlay', 'assets/pics/scrollframe.png');
game.loader.load();
}
var scroller;
function create() {
// This creates our ScrollZone. It is positioned at x32 y32 (world coodinates)
// and is a size of 352x240 (which matches the window in our overlay image)
scroller = game.add.scrollZone('dragonsun', 32, 32, 352, 240);
scroller.setSpeed(2, 2);
game.add.sprite(0, 0, 'overlay');
}
})();
Tests/scrollzones/scroll window.ts
+31
View File
@@ -0,0 +1,31 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('dragonsun', 'assets/pics/cougar_dragonsun.png');
game.loader.addImageFile('overlay', 'assets/pics/scrollframe.png');
game.loader.load();
}
var scroller: Phaser.ScrollZone;
function create() {
// This creates our ScrollZone. It is positioned at x32 y32 (world coodinates)
// and is a size of 352x240 (which matches the window in our overlay image)
scroller = game.add.scrollZone('dragonsun', 32, 32, 352, 240);
scroller.setSpeed(2, 2);
game.add.sprite(0, 0, 'overlay');
}
})();
Tests/scrollzones/simple scrollzone.js
+16
View File
@@ -0,0 +1,16 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('crystal', 'assets/pics/jim_sachs_time_crystal.png');
game.loader.load();
}
function create() {
// This creates our ScrollZone. It is positioned at x0 y0 (world coodinates) by default and uses
// the 'crystal' image from the cache.
// The default is for the scroll zone to create 1 new scrolling region the size of the whole image you gave it.
// For this example we'll keep that, but look at the other tests to see reasons why you may not want to.
game.add.scrollZone('crystal').setSpeed(4, 2);
}
})();
Tests/scrollzones/simple scrollzone.ts
+27
View File
@@ -0,0 +1,27 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('crystal', 'assets/pics/jim_sachs_time_crystal.png');
game.loader.load();
}
function create() {
// This creates our ScrollZone. It is positioned at x0 y0 (world coodinates) by default and uses
// the 'crystal' image from the cache.
// The default is for the scroll zone to create 1 new scrolling region the size of the whole image you gave it.
// For this example we'll keep that, but look at the other tests to see reasons why you may not want to.
game.add.scrollZone('crystal').setSpeed(4, 2);
}
})();
Tests/scrollzones/skewed scroller.js
+27
View File
@@ -0,0 +1,27 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('balls', 'assets/sprites/balls.png');
game.loader.load();
}
var leftFace;
var rightFace;
var topFace;
function create() {
topFace = game.add.scrollZone('balls', 200, 0, 204, 204).setSpeed(0, 2.2);
topFace.skew.setTo(0, Math.tan(game.math.radiansToDegrees(-30)))// 0,-30 + scale(1,1.16)
;
topFace.scale.setTo(1, 1.3);
leftFace = game.add.scrollZone('balls', 110, 264, 204, 204).setSpeed(0, 2.1);
leftFace.skew.setTo(0, Math.tan(game.math.radiansToDegrees(30)))// 0,30deg
;
rightFace = game.add.scrollZone('balls', 200, 466, 204, 204).setSpeed(0, 2);
rightFace.skew.setTo(0, Math.tan(game.math.radiansToDegrees(-30)))// 0,-30 + scale(1,1.16)
;
rightFace.scale.setTo(1, 0.8);
//var a = Math.tan(game.math.radiansToDegrees(-180))
//game.add.tween(rightFace.skew).to({ x: 2, y: 4 }, 4000, Phaser.Easing.Linear.None, true, 0, true);
}
})();
Tests/scrollzones/skewed scroller.ts
+34
View File
@@ -0,0 +1,34 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
game.loader.addImageFile('balls', 'assets/sprites/balls.png');
game.loader.load();
}
var leftFace: Phaser.ScrollZone;
var rightFace: Phaser.ScrollZone;
var topFace: Phaser.ScrollZone;
function create() {
topFace = game.add.scrollZone('balls', 200, 0, 204, 204).setSpeed(0, 2.2);
topFace.skew.setTo(0, Math.tan(game.math.radiansToDegrees(-30)));
topFace.scale.setTo(1, 1.3);
leftFace = game.add.scrollZone('balls', 110, 264, 204, 204).setSpeed(0, 2.1);
leftFace.skew.setTo(0, Math.tan(game.math.radiansToDegrees(30)));
rightFace = game.add.scrollZone('balls', 200, 466, 204, 204).setSpeed(0, 2);
rightFace.skew.setTo(0, Math.tan(game.math.radiansToDegrees(-30)));
rightFace.scale.setTo(1, 0.8);
}
})();