Breakout examples giving me IndexSizeError

[rpiller]

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>

 

[rich]

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.

[rpiller]

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?

[rich]

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.

[rpiller]

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.

[rich]

Ignore Phaser, just try and load the json directly in a browser (using the same URL/path you've given Phaser). Does it display?

[rpiller]

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.

[bmceldowney]

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>

[rpiller]

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>

[rpiller]

Anyone have any idea what I'm doing wrong? I must be missing something. Has nobody used phaser with MVC?

[rich]

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.

[rpiller]

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

[rich]