TileSprites are now much more tidy and can run from a frame in a texture. They can also be animated. New TileSprite.autoScroll function added.

examples/wip/animated tilesprite.js

@@ -0,0 +1,75 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+var tilesprite;
+var cursors;
+var count = 0;
+
+function preload() {
+
+    game.load.image('starfield', 'assets/misc/starfield.jpg');
+    game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
+    game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
+
+}
+
+var sprite;
+
+function create() {
+
+    // sprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    // sprite = game.add.tileSprite(100, 100, 400, 300, 'starfield');
+
+
+    // sprite = game.add.tileSprite(0, 0, 800, 600, 'mummy', 0);
+    // sprite.animations.add('walk');
+    // sprite.animations.play('walk', 20, true);
+
+    // x = game.add.sprite(0, 0, 'mummy');
+    // x.animations.add('walk');
+    // x.animations.play('walk', 20, true);
+
+    sprite = game.add.tileSprite(0, 0, 800, 600, 'seacreatures', 'octopus0000');
+    sprite.animations.add('swim', Phaser.Animation.generateFrameNames('octopus', 0, 24, '', 4), 30, true);
+    sprite.animations.play('swim');
+
+
+    cursors = game.input.keyboard.createCursorKeys();
+
+}
+
+function update() {
+
+    count += 0.005
+
+    sprite.tileScale.x = 2 + Math.sin(count);
+    sprite.tileScale.y = 2 + Math.cos(count);
+    
+    sprite.tilePosition.x += 1;
+    sprite.tilePosition.y += 1;
+
+    if (cursors.left.isDown)
+    {
+        sprite.tilePosition.x += 4;
+    }
+    else if (cursors.right.isDown)
+    {
+        sprite.tilePosition.x -= 4;
+    }
+
+    if (cursors.up.isDown)
+    {
+        sprite.tilePosition.y += 4;
+    }
+    else if (cursors.down.isDown)
+    {
+        sprite.tilePosition.y -= 4;
+    }
+
+}
+
+function render() {
+
+    // game.debug.renderText(sprite.frame, 32, 32);
+
+}

examples/wip/autoscroll.js

@@ -0,0 +1,33 @@
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+var tilesprite;
+var cursors;
+var count = 0;
+
+function preload() {
+
+    game.load.image('starfield', 'assets/misc/starfield.jpg');
+    game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
+    game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
+
+}
+
+var sprite;
+
+function create() {
+
+    sprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    sprite.autoScroll(0, 200);
+
+}
+
+function update() {
+
+}
+
+function render() {
+
+    // game.debug.renderText(sprite.frame, 32, 32);
+
+}

examples/wip/index.php

@@ -32,7 +32,7 @@
 
     function dirToArray($dir) { 
 
-        $ignore = array('.', '..', '_site', 'assets', 'states', 'book', 'filters', 'misc');
+        $ignore = array('.', '..', '_site', 'assets', 'gfx', 'states', 'book', 'filters', 'misc');
         $result = array(); 
         $root = scandir($dir); 
         $dirs = array_diff($root, $ignore);

examples/wip/tilesprite.js

@@ -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.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
 
 var tilesprite;
 var cursors;
@@ -7,14 +7,24 @@ var cursors;
 function preload() {
 
     game.load.image('starfield', 'assets/misc/starfield.jpg');
+    game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
+    game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
 
 }
 
+var sprite;
+
 function create() {
 
-    // tilesprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    // sprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
 
-    tilesprite = game.add.tileSprite(100, 100, 400, 300, 'starfield');
+    // sprite = game.add.tileSprite(100, 100, 400, 300, 'starfield');
+
+    sprite = game.add.tileSprite(100, 100, 400, 300, 'mummy');
+
+    sprite.animations.add('walk');
+
+    sprite.animations.play('walk', 20, true);
 
     cursors = game.input.keyboard.createCursorKeys();
 
@@ -24,20 +34,28 @@ function update() {
 
     if (cursors.left.isDown)
     {
-        tilesprite.tilePosition.x += 8;
+        sprite.tilePosition.x += 8;
+        sprite.x -= 4;
     }
     else if (cursors.right.isDown)
     {
-        tilesprite.tilePosition.x -= 8;
+        sprite.tilePosition.x -= 8;
+        sprite.x += 4;
     }
 
     if (cursors.up.isDown)
     {
-        tilesprite.tilePosition.y += 8;
+        sprite.tilePosition.y += 8;
     }
     else if (cursors.down.isDown)
     {
-        tilesprite.tilePosition.y -= 8;
+        sprite.tilePosition.y -= 8;
     }
 
 }
+
+function render() {
+
+    game.debug.renderText(sprite.frame, 32, 32);
+
+}

labs/code/002 animated tilesprites.js

@@ -0,0 +1,70 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+var tilesprite;
+var cursors;
+var count = 0;
+
+function preload() {
+
+    game.load.image('starfield', 'assets/misc/starfield.jpg');
+    game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
+    game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
+
+}
+
+var sprite;
+
+function create() {
+
+    // sprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    // sprite = game.add.tileSprite(100, 100, 400, 300, 'starfield');
+
+    sprite = game.add.tileSprite(0, 0, 800, 600, 'mummy');
+    sprite.animations.add('walk');
+    sprite.animations.play('walk', 20, true);
+
+    // sprite = game.add.tileSprite(0, 0, 800, 600, 'seacreatures');
+    // sprite.animations.add('swim', Phaser.Animation.generateFrameNames('octopus', 0, 24, '', 4), 30, true);
+    // sprite.animations.play('swim');
+
+
+    cursors = game.input.keyboard.createCursorKeys();
+
+}
+
+function update() {
+
+    count += 0.005
+
+    sprite.tileScale.x = 2 + Math.sin(count);
+    sprite.tileScale.y = 2 + Math.cos(count);
+    
+    sprite.tilePosition.x += 1;
+    sprite.tilePosition.y += 1;
+
+    if (cursors.left.isDown)
+    {
+        sprite.tilePosition.x += 4;
+    }
+    else if (cursors.right.isDown)
+    {
+        sprite.tilePosition.x -= 4;
+    }
+
+    if (cursors.up.isDown)
+    {
+        sprite.tilePosition.y += 4;
+    }
+    else if (cursors.down.isDown)
+    {
+        sprite.tilePosition.y -= 4;
+    }
+
+}
+
+function render() {
+
+    // game.debug.renderText(sprite.frame, 32, 32);
+
+}

labs/code/003 thrust.js

@@ -0,0 +1,60 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('backdrop', 'assets/pics/remember-me.jpg');
+	game.load.image('ship', 'assets/sprites/thrust_ship2.png');
+
+}
+
+var ship;
+var cursors;
+
+function create() {
+
+    game.world.setBounds(0, 0, 1920, 1200);
+
+    var bg = game.add.sprite(0, 0, 'backdrop');
+    bg.alpha = 0.8;
+
+	ship = game.add.sprite(200, 200, 'ship');
+	ship.physicsEnabled = true;
+
+	game.camera.follow(ship);
+
+    cursors = game.input.keyboard.createCursorKeys();
+
+    game.physics.defaultRestitution = 0.8;
+
+}
+
+function update() {
+
+    if (cursors.left.isDown)
+    {
+		ship.body.rotateLeft(100);
+    }
+    else if (cursors.right.isDown)
+    {
+		ship.body.rotateRight(100);
+    }
+    else
+    {
+		ship.body.setZeroRotation();
+    }
+
+    if (cursors.up.isDown)
+    {
+    	ship.body.thrust(400);
+    }
+
+}
+
+function render() {
+
+	// game.debug.renderText('x: ' + box2.body.velocity.x, 32, 32);
+	// game.debug.renderText('y: ' + box2.body.velocity.y, 32, 64);
+
+}
+

labs/css/component.css

@@ -0,0 +1,123 @@
+*,
+*:after,
+*::before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body {
+	font-family: 'Raleway', sans-serif;
+    background: #b3c3da url(../../examples/_site/labs/bg.png) repeat-x;
+    margin: 0;
+	color: #fff;
+}
+
+#labs {
+    position: absolute;
+    width: 172px;
+    height: 203px;
+    top: 16px;
+    left: 16px;
+    overflow: hidden;
+	z-index: 1;
+}
+
+#phaser-example {
+	width: 800px;
+	margin: 0 auto;
+	z-index: 10;
+}
+
+#atombender {
+    background: url(../../examples/_site/labs/bg.png) repeat-x;
+    height: 579px;
+    overflow: hidden;
+    text-align: center;
+}
+
+#photonstorm {
+	margin: 16px 0px;
+	color: white;
+}
+
+#photonstorm a {
+	color: #fff;
+	margin: 0px 30px 0px 10px;
+	text-decoration: none;
+}
+
+nav a {
+	position: relative;
+	display: inline-block;
+	margin: 15px 25px;
+	outline: none;
+	color: #fff;
+	text-decoration: none;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-weight: 400;
+	text-shadow: 0 0 1px rgba(255,255,255,0.3);
+	font-size: 1.0em;
+}
+
+nav a:hover,
+nav a:focus {
+	outline: none;
+}
+
+/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
+.cl-effect-2 a {
+	line-height: 44px;
+	-webkit-perspective: 1000px;
+	-moz-perspective: 1000px;
+	perspective: 1000px;
+}
+
+.cl-effect-2 a span {
+	position: relative;
+	display: inline-block;
+	padding: 0 14px;
+	background: #2195de;
+	-webkit-transition: -webkit-transform 0.3s;
+	-moz-transition: -moz-transform 0.3s;
+	transition: transform 0.3s;
+	-webkit-transform-origin: 50% 0;
+	-moz-transform-origin: 50% 0;
+	transform-origin: 50% 0;
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+
+.csstransforms3d .cl-effect-2 a span::before {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #0965a0;
+	content: attr(data-hover);
+	-webkit-transition: background 0.3s;
+	-moz-transition: background 0.3s;
+	transition: background 0.3s;
+	-webkit-transform: rotateX(-90deg);
+	-moz-transform: rotateX(-90deg);
+	transform: rotateX(-90deg);
+	-webkit-transform-origin: 50% 0;
+	-moz-transform-origin: 50% 0;
+	transform-origin: 50% 0;
+}
+
+.cl-effect-2 a:hover span,
+.cl-effect-2 a:focus span {
+	-webkit-transform: rotateX(90deg) translateY(-22px);
+	-moz-transform: rotateX(90deg) translateY(-22px);
+	transform: rotateX(90deg) translateY(-22px);
+}
+
+.csstransforms3d .cl-effect-2 a:hover span::before,
+.csstransforms3d .cl-effect-2 a:focus span::before {
+	background: #28a2ee;	
+}
+

labs/css/demo.css

@@ -0,0 +1,39 @@
+@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700);
+
+.container > header,
+.codrops-top {
+	font-family: 'Lato', Arial, sans-serif;
+}
+
+.container > header {
+	margin: 0 auto;
+	padding: 2em 0em;
+	text-align: center;
+	color: #89867e;
+}
+
+.container > header h1 {
+	font-size: 2.625em;
+	line-height: 1.3;
+	margin: 0;
+	font-weight: 300;
+}
+
+.container > header span {
+	display: block;
+	font-size: 60%;
+	color: #ceccc6;
+	padding: 0 0 0.6em 0.1em;
+}
+
+.container > section {
+	margin: 0 auto;
+	padding: 1em 3em;
+	text-align: center;
+}
+
+.color-4 {
+	background: #72cd22;
+	background: #0e83cd;
+}
+

labs/css/normalize.css

@@ -0,0 +1 @@
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

labs/index.php

@@ -0,0 +1,12 @@
+<?php
+    require('list.php');
+
+    if ($_SERVER['SERVER_NAME'] == '192.168.0.100')
+    {
+        require('index_local.php');
+    }
+    else
+    {
+        require('index_remote.php');
+    }
+?>

labs/index_local.php

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+        <title>phaser labs</title>
+        <meta name="description" content="The playground for the phaser game framework" />
+        <meta name="keywords" content="phaser, html5, games, playground, labs, experiments" />
+        <meta name="author" content="Photon Storm" />
+        <link rel="shortcut icon" href="favicon.ico">
+        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
+        <link rel="stylesheet" type="text/css" href="css/demo.css" />
+        <link rel="stylesheet" type="text/css" href="css/component.css" />
+        <script src="js/modernizr.custom.js"></script>
+        <?php
+            if ($_SERVER['SERVER_NAME'] == '192.168.0.100')
+            {
+                echo '<base href="../examples/"></base>';
+            }
+        ?>
+    </head>
+    <body>
+
+        <div id="atombender"><img src="../examples/_site/labs/labs.png" /></div>
+
+        <div class="container">
+
+            <section class="color-4">
+                <nav class="cl-effect-2">
+                <?php
+                    echo printJSLinks($files);
+                ?>
+                </nav>
+                <div id="photonstorm">labs is the playground and test site for <a href="http://phaser.io">phaser.io</a> &copy; 2014 <a href="https://twitter.com/photonstorm">@photonstorm</a></div>
+            </section>
+
+        </div>
+
+</body>
+</html>

labs/index_remote.php

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+        <title>phaser labs</title>
+        <meta name="description" content="The playground for the phaser game framework" />
+        <meta name="keywords" content="phaser, html5, games, playground, labs, experiments" />
+        <meta name="author" content="Photon Storm" />
+        <link rel="shortcut icon" href="favicon.ico">
+        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
+        <link rel="stylesheet" type="text/css" href="css/demo.css" />
+        <link rel="stylesheet" type="text/css" href="css/component.css" />
+        <script src="js/modernizr.custom.js"></script>
+    </head>
+    <body>
+
+        <div id="atombender"><img src="examples/_site/labs/labs.png" /></div>
+
+        <div class="container">
+
+            <section class="color-4">
+                <nav class="cl-effect-2">
+                <?php
+                    echo printJSLinks($files);
+                ?>
+                </nav>
+                <div id="photonstorm">labs is the playground and test site for <a href="http://phaser.io">phaser.io</a> &copy; 2014 <a href="https://twitter.com/photonstorm">@photonstorm</a></div>
+            </section>
+
+        </div>
+
+</body>
+</html>

labs/list.php

@@ -0,0 +1,81 @@
+<?php
+    //  Global
+    $files = dirToArray(dirname(__FILE__) . '/code');
+    $total = 0;
+    $demo = '';
+
+    foreach ($files as $key => $value)
+    {
+        if (is_array($value) && count($value) > 0)
+        {
+            $total += count($value);
+        }
+    }
+
+    function getFile() {
+
+        global $files, $dir, $filename, $title, $code;
+
+        if (isset($_GET['d']) && isset($_GET['f']))
+        {
+            $dir = urldecode($_GET['d']);
+            $filename = urldecode($_GET['d']) . '/' . urldecode($_GET['f']);
+            $title = urldecode($_GET['t']);
+
+            if (file_exists($filename))
+            {
+                $code = file_get_contents($filename);
+                $files = dirToArray($dir);
+            }
+        }
+
+    }
+
+    function dirToArray($dir) { 
+
+        $ignore = array('.', '..', 'js', 'src', 'css', 'fonts', 'build', 'examples', 'assets');
+        $result = array(); 
+        $root = scandir($dir); 
+        $dirs = array_diff($root, $ignore);
+
+        foreach ($dirs as $key => $value) 
+        { 
+            if (is_dir($dir . DIRECTORY_SEPARATOR . $value)) 
+            { 
+                $result[$value] = dirToArray($dir . DIRECTORY_SEPARATOR . $value); 
+            } 
+            else 
+            {
+                if (substr($value, -3) == '.js')
+                {
+                    $result[] = $value; 
+                }
+            } 
+        } 
+
+        return $result; 
+    } 
+
+    function printJSLinks($files) {
+
+        $output = "";
+
+        foreach ($files as $key => $value)
+        {
+            $value2 = substr($value, 0, -3);
+            $file = urlencode($value);
+
+            if ($_SERVER['SERVER_NAME'] == '192.168.0.100')
+            {
+                $output .= "<a href=\"../labs/view.php?f=$file\"><span data-hover=\"$value2\">$value2</span></a>";
+            }
+            else
+            {
+                $output .= "<a href=\"view.php?f=$file\"><span data-hover=\"$value2\">$value2</span></a>";
+            }
+        }
+
+        return $output;
+
+    }
+?>

labs/view.php

@@ -0,0 +1,12 @@
+<?php
+    require('list.php');
+
+    if ($_SERVER['SERVER_NAME'] == '192.168.0.100')
+    {
+        require('view_local.php');
+    }
+    else
+    {
+        require('view_remote.php');
+    }
+?>

labs/view_local.php

@@ -0,0 +1,48 @@
+<?php
+    if (isset($_GET['f']))
+    {
+        $f = $_GET['f'];
+    }
+?>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+        <title>phaser labs - <?php echo $f?></title>
+        <meta name="description" content="The playground for the phaser game framework" />
+        <meta name="keywords" content="phaser, html5, games, playground, labs, experiments" />
+        <meta name="author" content="Photon Storm" />
+        <link rel="shortcut icon" href="gfx/favicon.ico">
+        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
+        <link rel="stylesheet" type="text/css" href="css/demo.css" />
+        <link rel="stylesheet" type="text/css" href="css/component.css" />
+        <script src="js/modernizr.custom.js"></script>
+        <base href="../examples/"></base>
+        <?php
+            require('../build/config.php');
+        ?>
+        <script src="../labs/code/<?php echo $f?>" type="text/javascript"></script>
+    </head>
+    <body>
+
+        <div id="phaser-example"></div>
+
+        <div id="labs"><a href="../labs/index.php"><img src="_site/labs/logo.png" /></a></div>
+
+        <div class="container">
+
+            <section class="color-4">
+                <nav class="cl-effect-2">
+                <?php
+                    echo printJSLinks($files);
+                ?>
+                </nav>
+                <div id="photonstorm">labs is the playground and test site for <a href="http://phaser.io">phaser.io</a> &copy; 2014 <a href="https://twitter.com/photonstorm">@photonstorm</a></div>
+            </section>
+
+        </div>
+
+</body>
+</html>

labs/view_remote.php

@@ -0,0 +1,47 @@
+<?php
+    if (isset($_GET['f']))
+    {
+        $f = $_GET['f'];
+    }
+?>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+        <title>phaser labs - <?php echo $f?></title>
+        <meta name="description" content="The playground for the phaser game framework" />
+        <meta name="keywords" content="phaser, html5, games, playground, labs, experiments" />
+        <meta name="author" content="Photon Storm" />
+        <link rel="shortcut icon" href="favicon.ico">
+        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
+        <link rel="stylesheet" type="text/css" href="css/demo.css" />
+        <link rel="stylesheet" type="text/css" href="css/component.css" />
+        <script src="js/modernizr.custom.js"></script>
+        <?php
+            require('build/config.php');
+        ?>
+        <script src="code/<?php echo $f?>" type="text/javascript"></script>
+    </head>
+    <body>
+
+        <div id="phaser-example"></div>
+
+        <div id="labs"><a href="index.php"><img src="examples/_site/labs/logo.png" /></a></div>
+
+        <div class="container">
+
+            <section class="color-4">
+                <nav class="cl-effect-2">
+                <?php
+                    echo printJSLinks($files);
+                ?>
+                </nav>
+                <div id="photonstorm">labs is the playground and test site for <a href="http://phaser.io">phaser.io</a> &copy; 2014 <a href="https://twitter.com/photonstorm">@photonstorm</a></div>
+            </section>
+
+        </div>
+
+</body>
+</html>

src/animation/Animation.js

@@ -162,6 +162,12 @@ Phaser.Animation.prototype = {
         this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
         this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
+        if (this._parent.__tilePattern)
+        {
+            this._parent.__tilePattern = false;
+            this._parent.tilingTexture = false;
+        }
+
         if (this._parent.events)
         {
             this._parent.events.onAnimationStart.dispatch(this._parent, this);
@@ -259,6 +265,12 @@ Phaser.Animation.prototype = {
                     if (this.currentFrame)
                     {
                         this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+
+                        if (this._parent.__tilePattern)
+                        {
+                            this._parent.__tilePattern = false;
+                            this._parent.tilingTexture = false;
+                        }
                     }
                     
                     this._parent.events.onAnimationLoop.dispatch(this._parent, this);
@@ -275,6 +287,12 @@ Phaser.Animation.prototype = {
                 if (this.currentFrame)
                 {
                     this._parent.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+
+                    if (this._parent.__tilePattern)
+                    {
+                        this._parent.__tilePattern = false;
+                        this._parent.tilingTexture = false;
+                    }
                 }
             }
 

src/animation/AnimationManager.js

@@ -135,6 +135,12 @@ Phaser.AnimationManager.prototype = {
         this.currentFrame = this.currentAnim.currentFrame;
         this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
+        if (this.sprite.__tilePattern)
+        {
+            this.__tilePattern = false;
+            this.tilingTexture = false;
+        }
+
         return this._anims[name];
 
     },
@@ -253,7 +259,6 @@ Phaser.AnimationManager.prototype = {
         if (this.currentAnim && this.currentAnim.update() === true)
         {
             this.currentFrame = this.currentAnim.currentFrame;
-            this.sprite.currentFrame = this.currentFrame;
             return true;
         }
 
@@ -270,7 +275,7 @@ Phaser.AnimationManager.prototype = {
     */
     getAnimation: function (name) {
 
-        if (typeof name == 'string')
+        if (typeof name === 'string')
         {
             if (this._anims[name])
             {
@@ -289,9 +294,14 @@ Phaser.AnimationManager.prototype = {
     */
     refreshFrame: function () {
 
-        this.sprite.currentFrame = this.currentFrame;
         this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
 
+        if (this.sprite.__tilePattern)
+        {
+            this.__tilePattern = false;
+            this.tilingTexture = false;
+        }
+
     },
 
     /**
@@ -388,8 +398,13 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frame', {
         {
             this.currentFrame = this._frameData.getFrame(value);
             this._frameIndex = value;
-            this.sprite.currentFrame = this.currentFrame;
             this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+    
+            if (this.sprite.__tilePattern)
+            {
+                this.__tilePattern = false;
+                this.tilingTexture = false;
+            }
         }
 
     }
@@ -417,8 +432,13 @@ Object.defineProperty(Phaser.AnimationManager.prototype, 'frameName', {
         {
             this.currentFrame = this._frameData.getFrameByName(value);
             this._frameIndex = this.currentFrame.index;
-            this.sprite.currentFrame = this.currentFrame;
             this.sprite.setTexture(PIXI.TextureCache[this.currentFrame.uuid]);
+    
+            if (this.sprite.__tilePattern)
+            {
+                this.__tilePattern = false;
+                this.tilingTexture = false;
+            }
         }
         else
         {

src/gameobjects/GameObjectFactory.js

@@ -145,19 +145,20 @@ Phaser.GameObjectFactory.prototype = {
     * Creates a new TileSprite object.
     *
     * @method Phaser.GameObjectFactory#tileSprite
-    * @param {number} x - X position of the new tileSprite.
-    * @param {number} y - Y position of the new tileSprite.
-    * @param {number} width - the width of the tilesprite.
-    * @param {number} height - the height of the tilesprite.
-    * @param {string|Phaser.RenderTexture|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture.
+    * @param {number} x - The x coordinate (in world space) to position the TileSprite at.
+    * @param {number} y - The y coordinate (in world space) to position the TileSprite at.
+    * @param {number} width - The width of the TileSprite.
+    * @param {number} height - The height of the TileSprite.
+    * @param {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the TileSprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture.
+    * @param {string|number} frame - If this TileSprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
     * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group.
     * @return {Phaser.TileSprite} The newly created tileSprite object.
     */
-    tileSprite: function (x, y, width, height, key, group) {
+    tileSprite: function (x, y, width, height, key, frame, group) {
 
         if (typeof group === 'undefined') { group = this.world; }
 
-        return group.add(new Phaser.TileSprite(this.game, x, y, width, height, key));
+        return group.add(new Phaser.TileSprite(this.game, x, y, width, height, key, frame));
 
     },
 

src/gameobjects/Image.js

@@ -57,7 +57,16 @@ Phaser.Image = function (game, x, y, key, frame) {
     */
     this.key = key;
 
+    /**
+    * @property {number} _frame - Internal cache var.
+    * @private
+    */
     this._frame = 0;
+
+    /**
+    * @property {string} _frameName - Internal cache var.
+    * @private
+    */
     this._frameName = '';
 
     PIXI.Sprite.call(this, PIXI.TextureCache['__default']);

src/gameobjects/TileSprite.js

@@ -10,27 +10,33 @@
 *
 * @class Phaser.TileSprite
 * @constructor
-* @param {Phaser.Game} game - Current game instance.
-* @param {number} [x=0] - X position of the new tileSprite.
-* @param {number} [y=0] - Y position of the new tileSprite.
-* @param {number} [width=256] - the width of the tilesprite.
-* @param {number} [height=256] - the height of the tilesprite.
-* @param {string|Phaser.RenderTexture|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture.
+* @param {Phaser.Game} game - A reference to the currently running game.
+* @param {number} x - The x coordinate (in world space) to position the TileSprite at.
+* @param {number} y - The y coordinate (in world space) to position the TileSprite at.
+* @param {number} width - The width of the TileSprite.
+* @param {number} height - The height of the TileSprite.
+* @param {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the TileSprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture.
+* @param {string|number} frame - If this TileSprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
 */
-Phaser.TileSprite = function (game, x, y, width, height, key) {
+Phaser.TileSprite = function (game, x, y, width, height, key, frame) {
 
     x = x || 0;
     y = y || 0;
     width = width || 256;
     height = height || 256;
     key = key || null;
+    frame = frame || null;
 
     /**
-    * @property {PIXI.Texture} texture - The texture that the sprite renders with.
+    * @property {Phaser.Game} game - A reference to the currently running Game.
     */
-    this.texture = PIXI.TextureCache[key];
+    this.game = game;
 
-    PIXI.TilingSprite.call(this, this.texture, width, height);
+    /**
+    * @property {string} name - The user defined name given to this Sprite.
+    * @default
+    */
+    this.name = '';
 
     /**
     * @property {number} type - The const type of this object.
@@ -38,10 +44,306 @@ Phaser.TileSprite = function (game, x, y, width, height, key) {
     */
     this.type = Phaser.TILESPRITE;
 
-    this.position.x = x;
-    this.position.y = y;
+    /**
+    * @property {Phaser.Events} events - The Events you can subscribe to that are dispatched when certain things happen on this Sprite or its components.
+    */
+    this.events = new Phaser.Events(this);
+
+    /**
+    * @property {Phaser.AnimationManager} animations - This manages animations of the sprite. You can modify animations through it (see Phaser.AnimationManager)
+    */
+    this.animations = new Phaser.AnimationManager(this);
+
+    /**
+    *  @property {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture, BitmapData or PIXI.Texture.
+    */
+    this.key = key;
+
+    /**
+    * @property {number} _frame - Internal cache var.
+    * @private
+    */
+    this._frame = 0;
+
+    /**
+    * @property {string} _frameName - Internal cache var.
+    * @private
+    */
+    this._frameName = '';
+
+    /**
+    * @property {Phaser.Point} _scroll - Internal cache var.
+    * @private
+    */
+    this._scroll = new Phaser.Point();
+
+    PIXI.TilingSprite.call(this, PIXI.TextureCache['__default'], width, height);
+
+    this.loadTexture(key, frame);
+
+    this.position.set(x, y);
+
+    /**
+    * @property {Phaser.Point} world - The world coordinates of this Sprite. This differs from the x/y coordinates which are relative to the Sprites container.
+    */
+    this.world = new Phaser.Point(x, y);
 
 };
 
 Phaser.TileSprite.prototype = Object.create(PIXI.TilingSprite.prototype);
 Phaser.TileSprite.prototype.constructor = Phaser.TileSprite;
+
+/**
+* Automatically called by World.preUpdate.
+*
+* @method Phaser.TileSprite#preUpdate
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.preUpdate = function() {
+
+    this.world.setTo(this.game.camera.x + this.worldTransform[2], this.game.camera.y + this.worldTransform[5]);
+
+    this.animations.update();
+
+    if (this._scroll.x !== 0)
+    {
+        this.tilePosition.x += Math.floor(this._scroll.x * this.game.time.physicsElapsed);
+    }
+
+    if (this._scroll.y !== 0)
+    {
+        this.tilePosition.y += Math.floor(this._scroll.y * this.game.time.physicsElapsed);
+    }
+
+    return true;
+
+}
+
+/**
+* Internal function called by the World postUpdate cycle.
+*
+* @method Phaser.TileSprite#postUpdate
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.postUpdate = function() {
+
+    if (this.fixedToCamera)
+    {
+        this.position.x = this.game.camera.view.x + this.x;
+        this.position.y = this.game.camera.view.y + this.y;
+    }
+
+}
+
+/**
+* Sets this TileSprite to automatically scroll in the given direction until stopped via TileSprite.stopScroll().
+* The scroll speed is specified in pixels per second.
+* A negative x value will scroll to the left. A positive x value will scroll to the right.
+* A negative y value will scroll up. A positive y value will scroll down.
+*
+* @method Phaser.TileSprite#autoScroll
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.autoScroll = function(x, y) {
+
+    this._scroll.set(x, y);
+
+}
+
+/**
+* Stops an automatically scrolling TileSprite.
+*
+* @method Phaser.TileSprite#stopScroll
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.stopScroll = function() {
+
+    this._scroll.set(0, 0);
+
+}
+
+/**
+* Changes the Texture the TileSprite is using entirely. The old texture is removed and the new one is referenced or fetched from the Cache.
+* This causes a WebGL texture update, so use sparingly or in low-intensity portions of your game.
+*
+* @method Phaser.TileSprite#loadTexture
+* @memberof Phaser.TileSprite
+* @param {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the Sprite during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture, BitmapData or PIXI.Texture.
+* @param {string|number} frame - If this Sprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
+*/
+Phaser.TileSprite.prototype.loadTexture = function (key, frame) {
+
+    frame = frame || 0;
+
+    if (key instanceof Phaser.RenderTexture)
+    {
+        this.key = key.key;
+        this.setTexture(key);
+        return;
+    }
+    else if (key instanceof Phaser.BitmapData)
+    {
+        this.key = key.key;
+        this.setTexture(key.texture);
+        return;
+    }
+    else if (key instanceof PIXI.Texture)
+    {
+        this.key = key;
+        this.setTexture(key);
+        return;
+    }
+    else
+    {
+        if (key === null || typeof key === 'undefined')
+        {
+            this.key = '__default';
+            this.setTexture(PIXI.TextureCache[this.key]);
+            return;
+        }
+        else if (typeof key === 'string' && !this.game.cache.checkImageKey(key))
+        {
+            this.key = '__missing';
+            this.setTexture(PIXI.TextureCache[this.key]);
+            return;
+        }
+
+        if (this.game.cache.isSpriteSheet(key))
+        {
+            this.key = key;
+
+            // var frameData = this.game.cache.getFrameData(key);
+            this.animations.loadFrameData(this.game.cache.getFrameData(key));
+
+            if (typeof frame === 'string')
+            {
+                this.frameName = frame;
+            }
+            else
+            {
+                this.frame = frame;
+            }
+        }
+        else
+        {
+            this.key = key;
+            this.setTexture(PIXI.TextureCache[key]);
+            return;
+        }
+    }
+
+};
+
+/**
+* Destroys the TileSprite. This removes it from its parent group, destroys the event and animation handlers if present
+* and nulls its reference to game, freeing it up for garbage collection.
+* 
+* @method Phaser.TileSprite#destroy
+* @memberof Phaser.TileSprite
+*/
+Phaser.TileSprite.prototype.destroy = function() {
+
+    if (this.filters)
+    {
+        this.filters = null;
+    }
+
+    if (this.parent)
+    {
+        this.parent.remove(this);
+    }
+
+    this.animations.destroy();
+
+    this.events.destroy();
+
+    this.exists = false;
+    this.visible = false;
+
+    this.game = null;
+
+};
+
+/**
+* Play an animation based on the given key. The animation should previously have been added via sprite.animations.add()
+* If the requested animation is already playing this request will be ignored. If you need to reset an already running animation do so directly on the Animation object itself.
+* 
+* @method Phaser.TileSprite#play
+* @memberof Phaser.TileSprite
+* @param {string} name - The name of the animation to be played, e.g. "fire", "walk", "jump".
+* @param {number} [frameRate=null] - The framerate to play the animation at. The speed is given in frames per second. If not provided the previously set frameRate of the Animation is used.
+* @param {boolean} [loop=false] - Should the animation be looped after playback. If not provided the previously set loop value of the Animation is used.
+* @param {boolean} [killOnComplete=false] - If set to true when the animation completes (only happens if loop=false) the parent Sprite will be killed.
+* @return {Phaser.Animation} A reference to playing Animation instance.
+*/
+Phaser.TileSprite.prototype.play = function (name, frameRate, loop, killOnComplete) {
+
+    return this.animations.play(name, frameRate, loop, killOnComplete);
+
+};
+
+/**
+* Indicates the rotation of the Sprite, in degrees, from its original orientation. Values from 0 to 180 represent clockwise rotation; values from 0 to -180 represent counterclockwise rotation.
+* Values outside this range are added to or subtracted from 360 to obtain a value within the range. For example, the statement player.angle = 450 is the same as player.angle = 90.
+* If you wish to work in radians instead of degrees use the property Sprite.rotation instead. Working in radians is also a little faster as it doesn't have to convert the angle.
+* 
+* @name Phaser.TileSprite#angle
+* @property {number} angle - The angle of this Sprite in degrees.
+*/
+Object.defineProperty(Phaser.TileSprite.prototype, "angle", {
+
+    get: function() {
+
+        return Phaser.Math.wrapAngle(Phaser.Math.radToDeg(this.rotation));
+
+    },
+
+    set: function(value) {
+
+        this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(value));
+
+    }
+
+});
+
+/**
+* @name Phaser.TileSprite#frame
+* @property {number} frame - Gets or sets the current frame index and updates the Texture Cache for display.
+*/
+Object.defineProperty(Phaser.TileSprite.prototype, "frame", {
+
+    get: function () {
+        return this.animations.frame;
+    },
+
+    set: function (value) {
+
+        if (value !== this.animations.frame)
+        {
+            this.animations.frame = value;
+        }
+
+    }
+
+});
+
+/**
+* @name Phaser.TileSprite#frameName
+* @property {string} frameName - Gets or sets the current frame name and updates the Texture Cache for display.
+*/
+Object.defineProperty(Phaser.TileSprite.prototype, "frameName", {
+
+    get: function () {
+        return this.animations.frameName;
+    },
+
+    set: function (value) {
+
+        if (value !== this.animations.frameName)
+        {
+            this.animations.frameName = value;
+        }
+
+    }
+
+});

src/pixi/Pixi.js

@@ -16,7 +16,7 @@ PIXI.WEBGL_RENDERER = 0;
 PIXI.CANVAS_RENDERER = 1;
 
 // useful for testing against if your lib is using pixi.
-PIXI.VERSION = "v1.4.4";
+PIXI.VERSION = "v1.5.0";
 
 // the various blend modes supported by pixi
 PIXI.blendModes = {

src/pixi/display/Sprite.js

@@ -466,8 +466,8 @@ PIXI.Sprite.fromFrame = function(frameId)
  * @param imageId {String} The image url of the texture
  * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id
  */
-PIXI.Sprite.fromImage = function(imageId)
+PIXI.Sprite.fromImage = function(imageId, crossorigin, scaleMode)
 {
-    var texture = PIXI.Texture.fromImage(imageId);
+    var texture = PIXI.Texture.fromImage(imageId, crossorigin, scaleMode);
     return new PIXI.Sprite(texture);
 };

src/pixi/extras/TilingSprite.js

@@ -371,8 +371,16 @@ PIXI.TilingSprite.prototype.generateTilingTexture = function(forcePowerOfTwo)
     {
         if(isFrame)
         {
-            targetWidth = frame.width;
-            targetHeight = frame.height;
+            if (texture.trim)
+            {
+                targetWidth = texture.trim.width;
+                targetHeight = texture.trim.height;
+            }
+            else
+            {
+                targetWidth = frame.width;
+                targetHeight = frame.height;
+            }
             
             newTextureRequired = true;
         }

src/pixi/primitives/Graphics.js

@@ -169,6 +169,8 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
                         fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
 
     this.graphicsData.push(this.currentPath);
+
+    return this;
 };
 
 /**
@@ -188,6 +190,8 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
     this.currentPath.points.push(x, y);
 
     this.graphicsData.push(this.currentPath);
+
+    return this;
 };
 
 /**
@@ -202,6 +206,8 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
 {
     this.currentPath.points.push(x, y);
     this.dirty = true;
+
+    return this;
 };
 
 /**
@@ -218,6 +224,8 @@ PIXI.Graphics.prototype.beginFill = function(color, alpha)
     this.filling = true;
     this.fillColor = color || 0;
     this.fillAlpha = (arguments.length < 2) ? 1 : alpha;
+
+    return this;
 };
 
 /**
@@ -230,6 +238,8 @@ PIXI.Graphics.prototype.endFill = function()
     this.filling = false;
     this.fillColor = null;
     this.fillAlpha = 1;
+
+    return this;
 };
 
 /**
@@ -250,6 +260,8 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
 
     this.graphicsData.push(this.currentPath);
     this.dirty = true;
+
+    return this;
 };
 
 /**
@@ -271,6 +283,8 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
 
     this.graphicsData.push(this.currentPath);
     this.dirty = true;
+
+    return this;
 };
 
 /**
@@ -293,6 +307,8 @@ PIXI.Graphics.prototype.drawEllipse = function( x, y, width, height)
 
     this.graphicsData.push(this.currentPath);
     this.dirty = true;
+
+    return this;
 };
 
 /**
@@ -310,6 +326,8 @@ PIXI.Graphics.prototype.clear = function()
     this.graphicsData = [];
 
     this.bounds = null; //new PIXI.Rectangle();
+
+    return this;
 };
 
 /**

src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js

@@ -273,7 +273,7 @@ PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite)
      // set the textures uvs temporarily
     // TODO create a separate texture so that we can tile part of a texture
 
-    if(!tilingSprite._uvs)tilingSprite._uvs = new Float32Array(8);
+    if(!tilingSprite._uvs)tilingSprite._uvs = new PIXI.TextureUvs();
 
     var uvs = tilingSprite._uvs;
 
@@ -298,7 +298,6 @@ PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite)
     uvs.x3 = 0 - offsetX;
     uvs.y3 = (1 *scaleY) - offsetY;
 
-   
     // get the tilingSprites current alpha
     var alpha = tilingSprite.worldAlpha;
     var tint = tilingSprite.tint;

src/pixi/utils/Detector.js

@@ -11,11 +11,11 @@
  * @param width=800 {Number} the width of the renderers view
  * @param height=600 {Number} the height of the renderers view
  * @param [view] {Canvas} the canvas to use as a view, optional 
- * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment)
  * @param [transparent=false] {Boolean} the transparency of the render view, default false
+ * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment)
  *
  */
-PIXI.autoDetectRenderer = function(width, height, view,antialias,transparent)
+PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
 {
     if(!width)width = 800;
     if(!height)height = 600;

src/pixi/utils/EventTarget.js

@@ -11,7 +11,7 @@
  * Adds event emitter functionality to a class
  *
  * @class EventTarget
- * 
+ * @example
  *      function MyEmitter() {
  *          PIXI.EventTarget.call(this); //mixes in event target stuff
  *      }