rpiller Posted April 8, 2014 Share Posted April 8, 2014 I have an MVC project and I copied and pasted the Breakout example that comes with Phaser and put it in Index.cshtml. In IE when I run I get the error: Unhandled exception at line 8890, column 9 in http://localhost:64804/Scripts/phaser.js 0x800a139e - JavaScript runtime error: IndexSizeError In chrome it runs but the graphics are all messed up. Everything is a green square with an X in it. Below is the code I have that gives the result. I just downloaded Phaser so should have the newest version there. Does phaser use jquery at all? @section scripts{ <script src="~/Scripts/phaser.js"></script> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); function preload() { game.load.atlas('breakout', 'assets/games/breakout/breakout.png', 'assets/games/breakout/breakout.json'); game.load.image('starfield', 'assets/misc/starfield.jpg'); } var ball; var paddle; var bricks; var ballOnPaddle = true; var lives = 3; var score = 0; var scoreText; var livesText; var introText; var s; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); // We check bounds collisions against all walls other than the bottom one game.physics.arcade.checkCollision.down = false; s = game.add.tileSprite(0, 0, 800, 600, 'starfield'); bricks = game.add.group(); bricks.enableBody = true; bricks.physicsBodyType = Phaser.Physics.ARCADE; var brick; for (var y = 0; y < 4; y++) { for (var x = 0; x < 15; x++) { brick = bricks.create(120 + (x * 36), 100 + (y * 52), 'breakout', 'brick_' + (y + 1) + '_1.png'); brick.body.bounce.set(1); brick.body.immovable = true; } } paddle = game.add.sprite(game.world.centerX, 500, 'breakout', 'paddle_big.png'); paddle.anchor.setTo(0.5, 0.5); game.physics.enable(paddle, Phaser.Physics.ARCADE); paddle.body.collideWorldBounds = true; paddle.body.bounce.set(1); paddle.body.immovable = true; ball = game.add.sprite(game.world.centerX, paddle.y - 16, 'breakout', 'ball_1.png'); ball.anchor.set(0.5); ball.checkWorldBounds = true; game.physics.enable(ball, Phaser.Physics.ARCADE); ball.body.collideWorldBounds = true; ball.body.bounce.set(1); ball.animations.add('spin', ['ball_1.png', 'ball_2.png', 'ball_3.png', 'ball_4.png', 'ball_5.png'], 50, true, false); ball.events.onOutOfBounds.add(ballLost, this); scoreText = game.add.text(32, 550, 'score: 0', { font: "20px Arial", fill: "#ffffff", align: "left" }); livesText = game.add.text(680, 550, 'lives: 3', { font: "20px Arial", fill: "#ffffff", align: "left" }); introText = game.add.text(game.world.centerX, 400, '- click to start -', { font: "40px Arial", fill: "#ffffff", align: "center" }); introText.anchor.setTo(0.5, 0.5); game.input.onDown.add(releaseBall, this); } function update() { // Fun, but a little sea-sick inducing Uncomment if you like! // s.tilePosition.x += (game.input.speed.x / 2); paddle.body.x = game.input.x; if (paddle.x < 24) { paddle.x = 24; } else if (paddle.x > game.width - 24) { paddle.x = game.width - 24; } if (ballOnPaddle) { ball.body.x = paddle.x; } else { game.physics.arcade.collide(ball, paddle, ballHitPaddle, null, this); game.physics.arcade.collide(ball, bricks, ballHitBrick, null, this); } } function releaseBall() { if (ballOnPaddle) { ballOnPaddle = false; ball.body.velocity.y = -300; ball.body.velocity.x = -75; ball.animations.play('spin'); introText.visible = false; } } function ballLost() { lives--; livesText.text = 'lives: ' + lives; if (lives === 0) { gameOver(); } else { ballOnPaddle = true; ball.reset(paddle.body.x + 16, paddle.y - 16); ball.animations.stop(); } } function gameOver() { ball.body.velocity.setTo(0, 0); introText.text = 'Game Over!'; introText.visible = true; } function ballHitBrick(_ball, _brick) { _brick.kill(); score += 10; scoreText.text = 'score: ' + score; // Are they any bricks left? if (bricks.countLiving() == 0) { // New level starts score += 1000; scoreText.text = 'score: ' + score; introText.text = '- Next Level -'; // Let's move the ball back to the paddle ballOnPaddle = true; ball.body.velocity.set(0); ball.x = paddle.x + 16; ball.y = paddle.y - 16; ball.animations.stop(); // And bring the bricks back from the dead bricks.callAll('revive'); } } function ballHitPaddle(_ball, _paddle) { var diff = 0; if (_ball.x < _paddle.x) { // Ball is on the left-hand side of the paddle diff = _paddle.x - _ball.x; _ball.body.velocity.x = (-10 * diff); } else if (_ball.x > _paddle.x) { // Ball is on the right-hand side of the paddle diff = _ball.x - _paddle.x; _ball.body.velocity.x = (10 * diff); } else { // Ball is perfectly in the middle // Add a little random X to stop it bouncing straight up! _ball.body.velocity.x = 2 + Math.random() * 8; } } </script>}<div id="phaser-example"></div> Link to comment Share on other sites More sharing options...
rich Posted April 8, 2014 Share Posted April 8, 2014 Green squares = path errors. Basically it couldn't load your images. Check the DevTools console for more details. No, Phaser doesn't use jQuery anywhere. In IE make sure you're running in an IE9+ compatible doctype. Link to comment Share on other sites More sharing options...
rpiller Posted April 8, 2014 Author Share Posted April 8, 2014 OK, so after looking in the DevTools it was looking for the assets under Home/Assets (since Index is under home). So I change the paths to be ../assets. It removed the not found for the images, but for some reason I still get the 404 for the breakout.json file. Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:64804/assets/games/breakout/breakout.json assets is off the base project so that path seems valid. In my web.config I added: <system.webServer> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent></system.webServer> As someone else mentioned but that didn't help. Any ideas? Link to comment Share on other sites More sharing options...
rich Posted April 8, 2014 Share Posted April 8, 2014 A 404 is literally a file not found. Double-check the file is in there, and check the file extension is actually .json and Windows hasn't done something stupid to it like calling it breakout.json.txt or something. Link to comment Share on other sites More sharing options...
rpiller Posted April 8, 2014 Author Share Posted April 8, 2014 Yeah, it's there. When I navigate to the folder from VS I see it has what I can only guess is the json icon and there is no .txt or anything. If I double click it in VS it shows me the json inside it. It's not giving me the error for breakout.png anyone (which is in the same folder the json file is in) so something else must be going on here. Link to comment Share on other sites More sharing options...
rich Posted April 8, 2014 Share Posted April 8, 2014 Ignore Phaser, just try and load the json directly in a browser (using the same URL/path you've given Phaser). Does it display? Link to comment Share on other sites More sharing options...
rpiller Posted April 8, 2014 Author Share Posted April 8, 2014 It does not find it. However, if I change the extension to png that does find the breakout.png as it's in the same directory. The error I get with the json is: "The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map." I thought adding <mimeMap fileExtension=".json" mimeType="application/json" /> to the web.config would solve this but I guess not. Link to comment Share on other sites More sharing options...
bmceldowney Posted April 8, 2014 Share Posted April 8, 2014 The only thing I can think is if you maybe added the mimeMap outside of the <configuration> tag in Web.config? For reference here's a Web.config that works on my machine:<?xml version="1.0" encoding="utf-8"?><!-- For more information on how to configure your ASP.NET application, please visit http://go.microsoft.com/fwlink/?LinkId=169433 --><configuration> <system.web> <compilation debug="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web> <system.webServer> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> </system.webServer></configuration> Link to comment Share on other sites More sharing options...
rpiller Posted April 8, 2014 Author Share Posted April 8, 2014 This is mine (it's from a base MVC so it has a bunch of other stuff in it.<?xml version="1.0"?><configuration> <configSections> <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" /> <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" /> </sectionGroup> </configSections> <system.web.webPages.razor> <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.1.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <pages pageBaseType="System.Web.Mvc.WebViewPage"> <namespaces> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Optimization"/> <add namespace="System.Web.Routing" /> <add namespace="PhaserTest" /> </namespaces> </pages> </system.web.webPages.razor> <appSettings> <add key="webpages:Enabled" value="false" /> </appSettings> <system.webServer> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> <handlers> <remove name="BlockViewHandler"/> <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" /> </handlers> </system.webServer></configuration> Link to comment Share on other sites More sharing options...
rpiller Posted April 9, 2014 Author Share Posted April 9, 2014 Anyone have any idea what I'm doing wrong? I must be missing something. Has nobody used phaser with MVC? Link to comment Share on other sites More sharing options...
rich Posted April 9, 2014 Share Posted April 9, 2014 The issue isn't really anything to do with Phaser, it's just how to serve a json file with your set-up. I would imagine that this topic is well covered elsewhere on the web? Until the json can be accessed via a normal url in your browser, it won't be visible to Phaser either. One thing you may want to try is to check what the UTF encoding of your json file is. Check it's UTF-8 and not something else weird. Link to comment Share on other sites More sharing options...
rpiller Posted April 9, 2014 Author Share Posted April 9, 2014 Got it! In case anyone else is wondering here is what you need to do in addition to adding the web.config entry I have above: http://michaellhayden.blogspot.com/2012/07/add-json-mime-type-to-iis-express.html Link to comment Share on other sites More sharing options...
rich Posted April 9, 2014 Share Posted April 9, 2014 rpiller 1 Link to comment Share on other sites More sharing options...
Recommended Posts