Chimera Posted January 14, 2014 Share Posted January 14, 2014 So I am just running through the basic tutorial while at work here and am copying the code exactly and my player sprite is not rendering. The only difference between my code and the tutorial is that I am running the game code as an external JS file. I am using some shared hosting to host the pages (since I am at work) and was originally working with a PHP file to reference the Phaser and game javascript includes, but I tested in both PHP and HTML pages and the issue persists. If I overwrite my HTML file with the tutorial file then it loads, which I am assuming is because it is inline. I am not sure why that matters but I cannot think of any other reason for the player not to render. *Also, bonus question, why is the player in this step not declared anywhere in the javascript? Is it not a requirement in javascript to declare the variable prior to assigning it a value? It seems to work using the tutorial file without declaration, but my file wont even render the world unless I declare the player variable (which doesn't render).* Running through this tutorial > Stuck on step 5http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game HTML File<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Phaser Tutorial Platformer</title> <script type="text/javascript" src="../phaser.min.js"></script> <style type="text/css"> body { margin: 0 auto; } #content { margin: 0 auto; width: 1000px; text-align: center; } </style></head><body> <div id="content"> <script type="text/javascript" src="game.js"></script> </div></body></html>Game.js Filevar game = new Phaser.Game ( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });function preload() { game.load.image('sky', 'images/sky.png'); game.load.image('ground', 'images/platform.png'); game.load.image('star', 'images/star.png'); game.load.spritesheet('dude', 'images/dude.png');}var platforms;var player;function create() { // background game.add.sprite(0, 0, 'sky'); // create group for immovables platforms = game.add.group(); // create the ground var ground = platforms.create(0, game.world.height - 64, 'ground'); ground.scale.setTo(2, 2); ground.body.immovable = true; // create two ledges var ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-150, 250, 'ground'); ledge.body.immovable = true; // create player and add player physical properties player = game.add.sprite(32, game.world.height - 150, 'dude'); //player.body.bounce.y = 0.2; //player.body.gravity.y = 6; //player.body.collideWorldBounds = true; // player animations //player.animations.add('left', [0, 1, 2, 3], 10, true); //player.animations.add('right', [5, 6, 7, 8], 10, true);}function update() { //game.physics.collide(player, platforms);} Link to comment Share on other sites More sharing options...
rich Posted January 15, 2014 Share Posted January 15, 2014 Move your script file into the <head> of your document. And put 'content' as the 4th parameter to Phaser.Game. Try tweaking the CSS too, it could well be rendering, just off-screen / hidden. Link to comment Share on other sites More sharing options...
Chimera Posted January 15, 2014 Author Share Posted January 15, 2014 Just tried that and still no go. I removed the inline CSS all together since it is not even centering the canvas anyway . I appreciate the quick response, I am very excited to get started with your framework and impressed with the support. Link to the tutorial: http://geared.net16.net/games/tutorial_1/game.html HTML<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Phaser Tutorial Platformer</title> <script type="text/javascript" src="../phaser.min.js"></script> <script type="text/javascript" src="game.js"></script></head><body> <div id="content"> </div></body></html>Changes to game.jsvar game = new Phaser.Game ( 800, 600, Phaser.AUTO, 'content', { preload: preload, create: create, update: update }); Link to comment Share on other sites More sharing options...
rich Posted January 15, 2014 Share Posted January 15, 2014 Look at your game.load.spritesheet line and compare it to the code in the tutorial Link to comment Share on other sites More sharing options...
Chimera Posted January 15, 2014 Author Share Posted January 15, 2014 OMG, I knew it would be something small like that. DUH, I thought it was weird that I was loading a spritesheet without specifying the frame size. I am so sorry it was something so silly, thanks for your help spotting the error! Link to comment Share on other sites More sharing options...
JHardin1112 Posted January 20, 2014 Share Posted January 20, 2014 Having trouble running through this tutorial myself - http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game. I am using XAMPP web server. I downloaded and extracted the files and assets to my web server directory ("C:\xampp\htdocs") I have done a small amount of code from the sample, but when I try and run the file in Google Chrome, no image is rendered. I just see a black screen. In the top left corner where i expect the star to be is just a green box outline with a diagonal slash through it. I'm not sure what I'm doing wrong. I've compared my Part1.html to the Part3.html and they are identical. Oh and I suppose it's important to mention, Part3.html doesn't work either. I'm assuming it's something to do with my XAMPP setup. Anyways, here is the code I'm trying to run in Chrome. Please advise. Thank you! Edit - I tried running any of the included HTML files from the tutorial zip and it's nothing but green box outlines with the diagonal slash running across them. So I'm not loading the assets correctly....?<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Phaser - Making your first game, part 1</title> <script type="text/javascript" src="js/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style></head><body><script type="text/javascript">var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); game.load.spritesheet('dude', 'assets/dude.png', 32, 48);}function create() { game.add.sprite(0, 0, 'star');}function update() {}</script></body></html> Link to comment Share on other sites More sharing options...
rich Posted January 20, 2014 Share Posted January 20, 2014 What is the path in your browser? http://localhost/ ? 127.0.0.1? Link to comment Share on other sites More sharing options...
JHardin1112 Posted January 21, 2014 Share Posted January 21, 2014 127.0.0.1 - I got it working now. Link to comment Share on other sites More sharing options...
Recommended Posts