Jump to content

Breakout examples giving me IndexSizeError


Recommended Posts

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

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:


        <mimeMap fileExtension=".json" mimeType="application/json" />
As someone else mentioned but that didn't help. Any ideas?
Link to comment
Share on other sites

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

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

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

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=, Culture=neutral, PublicKeyToken=31BF3856AD364E35">      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />    </sectionGroup>  </configSections>  <system.web.webPages.razor>    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=, 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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...