1

写真: http://oi43.tinypic.com/qzou2r.jpg

私は単純な 2D タイル エンジンのコーディング方法を学んでいましたが、最もよく学べる方法の 1 つは、同じプログラムを別の方法で作成してから、いじってみることです。とにかく、私はこのチュートリアルに従っていました: http://that-guy.net/articles/2/Javascript-tile-engine-map-with-images/私のコードは機能していません。キャンバスがエラーでいっぱいになります。彼の最初のチュートリアル (前のチュートリアル) では、アプリケーションをセットアップした方法で動作させることができますが、何らかの理由でこの方法では動作しません。何が問題なのかはわかっていますが、それを修正する方法がわからないので、皆さんが助けてくれるかどうか疑問に思っていました. 私が問題だと思うセクションにコメントします： * * *

var engine = {
outhnd: document.getElementById('output'),
canvas: document.getElementById('canvas'),
handle: this.canvas.getContext('2d'),
width: this.canvas.width,
height: this.canvas.height,
tilesX: this.canvas.width / 16,
tilesY: this.canvas.height / 16,
images: 0, // *** I think this is what is causing the problem with the TILESTORE.

output: function (message) {
    engine.outhnd.innerHTML += '<br />' + message;
},
start: function (mapData, x, y) {
    engine.handle.translate( 0, 8 );
    engine.output('starting...');
    engine.viewport.x = x;
    engine.viewport.y = y;

    engine.tilestore('g', 'tile_grass.png');
    engine.tilestore('r', 'tile_rockgrass.png');
    engine.tilestore(' ', 'tile_black.png');

    engine.draw(mapData);
    engine.output('done');
},
viewport: function () {
    var x = 0;
    var y = 0;
},
allLoaded: function () {
    var i, len = engine.images.length;
    for(i=0; i<len; i++) {
        if(engine.images[i][2] === false) {
            return false;
        }
    }
    return true;
},
draw: function (mapData) {
    if(engine.allLoaded() === false){
        setTimeout(function(md)
    {
     return function() {
        engine.output('[engine.draw] waiting for images...');
        engine.draw(md);
    }
    }(mapData), 100);
    }else{
        engine.drawmap(mapData);
    }

},
drawmap: function (mapData) {
    var i, j;

    var mapX = 0;
    var mapY = 0;
    var tile;

    engine.output('drawing map from ' + engine.viewport.x + ',' + engine.viewport.y + ' to ' +
    (engine.viewport.x + engine.tilesX) + ',' + (engine.viewport.y + engine.tilesY));
    for(j=0; j<engine.tilesY; j++) {
        for(i=0; i<engine.tilesX; i++) {
            mapX = i + engine.viewport.x;
            mapY = j + engine.viewport.y;

            tile = (mapData[mapY] && mapData[mapY][mapX]) ? mapData[mapY][mapX] : ' ';
            engine.tiledraw( i, j, tile);
        }
    }
},
tiledraw: function (x,y,tile){
var img = engine.tileretrieve(tile);
    engine.handle.fillText(img, x * 16, y * 16);
},
 //*** the problem ***
tilestore: function(id, imgSrc) {
    var newid = engine.images.length;
    var tile  = [id, new Image(), false];

    tile[1].src    = imgSrc;
    tile[1].onload = function() {
        tile[2] = true;
        }
    engine.images[newid] = tile;
},
tileretrieve: function(id) {
    var i, len = engine.images.length;
    for(i=0; i<len; i++){
        if(engine.images[i][0] == id) {
            return engine.images[i][1];
        }
    }
},
};

これが機能しない理由はありますか。画像を保存しないのはなぜですか。私は Java スクリプトが初めてなので、これで多くの頭痛の種から解放されるかもしれません。

編集：私はそれをどのように呼んでいますか：

 var mapone =
   [
  ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'r', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
  ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
  ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r']
   ];
  engine.start(mapone, 0, 5);

編集：前に間違ったリンクを与えました：http://that-guy.net/articles/2/Javascript-tile-engine-map-with-images/

誰かが興味を持っている場合は編集 してください。私が書いた作業コードがあり、新しい方法を学びたい人のためにここに投稿します。助けてくれてありがとう。

var image_holder = function () {

    this.image_id =     0;  // 'a','b', etc
    this.image_src =    0;  // the source
    this.image_type =   0;  // 0 or 1
    this.image_load =   0;  // is it loaded 0 = false 1 = true
    this._head =        null;
};
image_holder.prototype = {

add: function (image_id, image_src, image_type, image_load) {

    var node = {
        image_id:image_id,
        image_src:image_src,
        image_type:image_type,
        image_load:image_load,
        next:null
    },
    current;

        if (this._head === null) {
            this._head = node;
        } else {
            current = this._head;

            while (current.next) {
                current = current.next;
            }   
            current.next = node;
        }

        this.image_id = image_id;
        this.image_src = image_src;
        this.image_type = image_type;
        this.image_load = image_load;

        },
get: function (image_id, image_load) {
    var current = this._head;

    if(image_id != null && image_load == null) {
        while (current != null && current.image_id != image_id) {
                current = current.next;
            }
            if(current != null){
                return current;
                }
            return null;
        }

    if(image_id == null && image_load != null) {
        while (current != null && current.image_load != image_load) {
                current = current.next;
            }
            if(current != null)
                return current;
            return null;
        }
    },
};

var engine = {
    outhnd: document.getElementById('output'),
    canvas: document.getElementById('canvas'),
    handle: this.canvas.getContext('2d'),
    width: this.canvas.width,
    height: this.canvas.height,
    tilesX: this.canvas.width / 16,
    tilesY: this.canvas.height / 16,
    obj: new image_holder(),

output: function (message) {
    engine.outhnd.innerHTML += '<br />' + message;
},
start: function (mapData, x, y) {
    engine.handle.translate( 0, 8 );
    engine.output('starting...');
    engine.viewport.x = x;
    engine.viewport.y = y;

    var images0 = "tile_grass.png";
    var images1 = "tile_rock.png";
    var images2 = "tile_black.png";

    imageObject0 = new Image();
    imageObject0.src = images0;
    imageObject0.onload = function() {
                        engine.obj.add('g', imageObject0, 0, 1);
                        var b = engine.obj.get('g').image_id;
                        console.log(b);
                                imageObject1 = new Image();
                                imageObject1.src = images1;
                                imageObject1.onload = function() {
                                engine.obj.add('r', imageObject1, 0, 1);
                                        imageObject2 = new Image();
                                        imageObject2.src = images2;
                                        imageObject2.onload = function() {
                                        engine.obj.add(' ', imageObject2, 0, 1);
                                        engine.draw(mapData);
                                        engine.output('done');
                                        };                              
                                };
                        };
},
viewport: function () {
    var x = 0;
    var y = 0;
},
draw: function (mapData) {
    engine.drawmap(mapData);
},
drawmap: function (mapData) {
    var i, j;
    var mapX = 0;
    var mapY = 0;
    var tile;

    engine.output('drawing map from ' + engine.viewport.x + ',' + engine.viewport.y + ' to ' +
    (engine.viewport.x + engine.tilesX) + ',' + (engine.viewport.y + engine.tilesY));
    for(j=0; j<engine.tilesY; j++) {
        for(i=0; i<engine.tilesX; i++) {
            mapX = i + engine.viewport.x;
            mapY = j + engine.viewport.y;

            tile = (mapData[mapY] && mapData[mapY][mapX]) ? mapData[mapY][mapX] : ' ';
            engine.tiledraw( i, j, tile);
        }
    }
},
tiledraw: function (x,y,tile){
    var img = engine.obj.get(tile,null).image_src;
    engine.handle.drawImage(img, x * 16, y * 16);
},
};


CALL:

        var mapone = [
        ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'r', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
        ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'],
        ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r']];
        engine.start(mapone, 0, 5);
4

2 に答える 2

0

発生した問題は、インスタンス化images = 0 してから後で試行 var newid = engine.images.length; することで、画像配列の長さを取得しようとしているが、画像は現在intを保持しているためだと思います。たぶん、次のような画像をインスタンス化してみてください images = []

于 2012-04-17T18:55:10.630 に答える
0

はい、「images=0」は正しくありません。配列である必要があります。

images = [],

2 つ目の問題は、正しいキャンバス メソッドを呼び出していないことです。tileDraw メソッドを次のように変更します。

tiledraw: function (x,y,tile){
var img = engine.tileretrieve(tile);
    engine.handle.drawImage(img, x * 16, y * 16);
},

まだfillTextに設定されています。

次のチュートリアルに移ったときに、コードのその部分を更新するのを忘れていたようです。

将来的に役立つように、F12 はほとんどのブラウザーの開発者ツールを開きます (FireFox に FireBug をインストールする必要があります)。[コンソール] タブには、デバッグに役立つ行番号付きの JavaScript エラーが表示されます。コードのトラブルシューティングのためにブレークポイントを設定することもできます。

于 2012-04-17T18:58:46.907 に答える