4

私はメトロ スタイルのプログラミングが初めてなので、createJS を使用するゲームについては、 http: //www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-game-basics-createjseaseljs/ のチュートリアルに従っています。 . ここにコード

<!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>

ここにJavaScriptコードがあります

// 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();
})();

問題は、コードをコンパイルしようとするたびに、 Preload is undefined エラーが表示されることです。スクリプトを HTML に含め、ファイルをプロジェクトに含めた理由がわかりません。誰か助けてくださいこの問題は過去 1 時間私を殺していました。単純なゲームを作りたいだけです。

4

3 に答える 3

3

これは、ライブラリが「createjs」名前空間に配置されているためです。PreloadJS オブジェクトをインスタンス化するには、次の手順を実行してください。

var preload = new createjs.PreloadJS();

そうすれば幸せな道に戻るはずです。

于 2012-10-26T22:40:25.387 に答える
2

(PreloadJS 0.3.0 リリース後、2013 年 2 月に試行)

最新バージョンの EaselJS を使用して、sitepoint.com ( http://www.sitepoint.com/creating-a-simple-windows-8-game-with-javascript-game-basics-createjseaseljs/ ) のチュートリアルを試しました。と PreloadJS を使用しましたが、最初はエラーなしでコードを実行できませんでした。

新しいバージョンの PreloadJS (v0.3.0) では、古い PreloadJS クラスの名前が LoadQueue に変更されました。

以下のリンクにあるドキュメントを参照してください。

ただし、v0.3.0 を使用しているときに新しいクラスを使用するだけでは、プロジェクトは修正されません。新しいバージョンには追加の非互換性 (たとえば、image.width が無効) があり、おそらく試行錯誤によって修正できます。

古い PreloadJS v0.2.0 をダウンロードする必要がありました。

要約: SitePoint チュートリアルを使用する場合、PreloadJS v0.2.0 に固執し、createjs 名前空間も使用する必要があります。

: WinJS 参照が無効であるため、前の応答で言及されたサンプル プロジェクトも機能しません。参照を手動で追加してもうまくいかないようです。

于 2013-03-01T04:17:12.290 に答える
0

HTML 内の default.js を、preloadjs とイーゼル コードの後に​​移動します。

これは、JavaScript ではインクルードの順序が重要であるためです。

于 2012-10-21T16:18:20.390 に答える