CODEWITHSUNDEEP
javascriptdebuggingwindows-8microsoft-metrocreatejs
Win Coder
Win Coder

Reputation: 6756

PreloadJS is undefined(Windows 8 game programming)

I am new to metro style programming so I am following a tutorial here http://www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-game-basics-createjseaseljs/ for games using createJS. Here the code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>game</title>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

<!-- game references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/CreateJS/easeljs-0.5.0.min.js"></script>
<script src="/js/CreateJS/preloadjs-0.2.0.min.js"></script>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
</body>
</html>

and here's javascript code

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();


function initialize() {
    canvas = document.getElementById("gameCanvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    context = canvas.getContext("2d");

    preload = new PreloadJS();
    preload.onComplete = prepareGame;
    var manifest = [
        { id: "screenImage", src: "images/Backgrounds/gameplay_screen.png" },
        { id: "redImage", src: "images/Catapults/Red/redIdle/redIdle.png" },
        { id: "blueImage", src: "images/Catapults/Blue/blueIdle/blueIdle.png" },
        { id: "ammoImage", src: "images/Ammo/rock_ammo.png" },
        { id: "winImage", src: "images/Backgrounds/victory.png" },
        { id: "loseImage", src: "images/Backgrounds/defeat.png" },
        { id: "blueFire", src: "images/Catapults/Blue/blueFire/blueCatapult_fire.png" },
        { id: "redFire", src: "images/Catapults/Red/redFire/redCatapult_fire.png" },
    ];

    preload.loadManifest(manifest);


    stage = new Stage(canvas);
}

function prepareGame() {
    bgImage = preload.getResult("screenImage").result;
    bgBitmap = new Bitmap(bgImage);
    bgBitmap.scaleX = SCALE_X;
    bgBitmap.scaleY = SCALE_Y;
    stage.addChild(bgBitmap);

    stage.update();
}

function gameLoop() {

}

function update() {

}

function draw() {

}

var canvas, context, stage;
var bgImage, p1Image, p2Image, ammoImage, p1lives, p2lives, title, endGameImage;
var bgBitmap, p1Bitmap, p2Bitmap, ammoBitmap;
var preload;

// Current Display Factor. Because the orignal assumed a 800x480 screen
var SCALE_X = window.innerWidth / 800;
var SCALE_Y = window.innerHeight / 480;
var MARGIN = 25;
var GROUND_Y = 390 * SCALE_Y;

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};

app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. You might use the
    // WinJS.Application.sessionState object, which is automatically
    // saved and restored across suspension. If you need to complete an
    // asynchronous operation before your application is suspended, call
    // args.setPromise().
};

document.addEventListener("DOMContentLoaded", initialize, false);

app.start();
})();

Now the problem is that whenever I try to compile the code it gives me the Preload is undefined error. I do not understand the reason I have included the script in HTML and file in my project. Would somebody please help this problem has been killing me for the last hour and I just want to make a simple game.

Upvotes: 4

Views: 1310

Answers (3)

Shahed C - MSFT
Shahed C - MSFT

Reputation: 2881

(Tried on Feb 2013, after PreloadJS 0.3.0 released)

I just tried the tutorial from sitepoint.com (http://www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-game-basics-createjseaseljs/), using the latest versions of EaselJS and PreloadJS, but I couldn't get the code to run without errors at first.

The new version of PreloadJS (v0.3.0) has renamed the old PreloadJS class to LoadQueue.

See the documentation at the links below:

But simply using the new class while using v0.3.0 doesn't fix the project. The newer version has additional incompatibilities (e.g. image.width is not valid) which can probably be fixed by trial and error.

I had to download the older PreloadJS v0.2.0:

IN A NUTSHELL: If I use the SitePoint tutorial, I have to stick with PreloadJS v0.2.0 and also use the createjs namespace.

NOTE: The sample project mentioned in a previous response doesn't work either, because its WinJS references are invalid. Adding the reference manually doesn't seem to work either.

Upvotes: 2

Ramon Tristani
Ramon Tristani

Reputation: 31

The reason for this is that the libraries have been placed under the "createjs" namespace. In order to instantiate the PreloadJS object, please do the following:

var preload = new createjs.PreloadJS();

That should get you back to happy path.

Upvotes: 3

Dominic Hopton
Dominic Hopton

Reputation: 7292

Move your default.js in the HTML to be after the preloadjs & easel code.

This is because the order of inclusion is important to JavaScript

Upvotes: 0

Related Questions