Keskustelu: Ohjelmointikysymykset: JavaScript: JS: Tilet piirtyvät muun grafiikan päälle?

Osaakos kukaan sanoa, miksi piirtämäni tilepohjainen grafiikka piirtyy pelihahmon ja tekstien päälle?
http://jsfiddle.net/sjvDK/3/

Koodin lopussa olevassa render funktiossa siis piirretään ensin tilet, jonka jälkeen pelihahmo ja lopuksi pelihahmon koordinaatit. Mutta tilet tulevat jostain syystä päällimmäiseksi? Jos nappaan tilen piirtämisen tekevän koodin pois, niin pelihahmo ja koordinaatit näkyvät normaalisti.

Ja tiedän, ettei tuo ole muutoinkaan välttämättä järkevin tapa toteuttaa tuon tilen piirtämiset, joten muutoinkin vinkkejä otetaan toki vastaan.

Kannattaa unohtaa purkan kirjoittaminen ja opetella tässäkin asiassa käyttämään jotain valmista kirjastoa. Yksi ihan hyvä valinta on KineticJS. Opettele myös debuggaamaan koodiasi, jos aiot koodia kirjoittaa. Koko paska failaa siihen, että käsittelet kartan sisältävää taulukkoa aivan holtittomasti. Ensinnäkin iteroi taulukkoa sen koon mukaan, älä vain keksi että taulukkosi on 26x26 ruutua. Voin paljastaa tässä vaiheessa, ettei se todellakaan ole sen kokoinen.

Lisäksi koko laudan alustus on aika hataralla pohjalla, koska et varmista, että tarvitsemasi kuvat ovat latautuneet; alat vain renderöidä niitä ja loppu jää tuurin vastuulle. Et itse asiassa edes odota html-sivun latautumista: koko body-elementtiä ei välttämättä ole olemassa, kun jo yrität lisätä sen sisälle canvasin! Äläkä helvetti laita arpomisvaiheessa suorittamaan koodia tuhat kertaa sekunnissa, kun se tekee debuggaamisestakin aivan mahdotonta.

Joo siis tuolla on taulukon koossa bugi. Taulukkohan on 25*15 ruutua, mutta ei se tuohon pelkästään kaadu tuo piirtäminen.

The Alchemist kirjoitti:

Lisäksi koko laudan alustus on aika hataralla pohjalla, koska et varmista, että tarvitsemasi kuvat ovat latautuneet; alat vain renderöidä niitä ja loppu jää tuurin vastuulle. Et itse asiassa edes odota html-sivun latautumista: koko body-elementtiä ei välttämättä ole olemassa, kun jo yrität lisätä sen sisälle canvasin! Äläkä helvetti laita arpomisvaiheessa suorittamaan koodia tuhat kertaa sekunnissa, kun se tekee debuggaamisestakin aivan mahdotonta.

Kiitokset vain "hyvistä" vinkeistä..... Eli pitääkin mennä tästä stackoverflowiin josta saa muutakin kuin kiroilua ja vittuilua vastaukseksi.

Kerroin sinulle, mikä koodissasi on vikana. Sitähän sinä kysyit. Jos olisit debugannut koodiasi itse laisinkaan, niin se olisi ollut meille muille vähemmän vittumainen homma. Kukaan ei noin huonosti testattua koodia tule hymysuin sinulle korjaamaan. Ja koodi oli todellakin aivan helvetin huonosti testattua, kun konsoliin rupesi tulemaan kymmeniä tuhansia virheilmoituksia välittömästi koodin suorituksen alettua ja ne jatkuivat vielä ensimmäisten virheiden korjaamisen jälkeenkin.

Laitan tähän sinulle joka tapauksessa alustuksen KineticJS:n käyttöön.

var graphics = {
    'player': 'hero.png',
    'ground': 'ground.png',
    'wall': 'wall.png'
};

var canvas;

var map = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

var load_graphics = function(sources, callback) {
    var ready_count = 0;
    var images = {};

    for (var name in sources) {
        var src = sources[name];
        var image = $('<img/>').attr('src', src);
        images[name] = image[0];

        image.ready(function() {
            ready_count++;

            if (ready_count == Object.keys(sources).length) {
                callback(images);
            }
        });
    };
};

var init_game = function(container, images, map) {
    canvas = new Kinetic.Stage({
        container: container,
        width: 800,
        height: 480
    });

    var bg_layer = new Kinetic.Layer();
    var bg = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: canvas.getWidth(),
        height: canvas.getHeight(),
        fillPatternImage: images['ground']
    });

    bg_layer.add(bg);
    canvas.add(bg_layer);
};

$(function() {
    load_graphics(graphics, function(images) {
        // Pitää vielä odottaa kuvien datan käsittely
        setTimeout(function() {
            init_game('container', images, map);
        }, 500);
    });
});

Edit: tämä esimerkki siis vaatii containeriksi elementin, jolla on id:nä 'container'.

En juuri nyt jaksa katsoa koodiasi kovin tarkasti, mutta jos (kun) The Alchemistin diagnoosi on oikea, syy koodin toimimattomuuteen on se, että render-funktio heittää poikkeuksen ja siis päättyy virheeseen ennen hahmon piirtoa. Hahmokin alkaa piirtyä, kun for-silmukoihin laittaa oikeat rajat (x < board.length ja y < board[x].length).

No jos lähdetään perusteista, niin esim. hyvä debuggerisuosituskin voisi olla kiva. Koodia en pyytänyt kenenkään korjaamaan, vaan antamaan vinkkejä mikä mättää koska tiedä itsekkin, etten ole koodivelho. Yleensä kaikenmaailman linkit tutoriaaleihin yms. on kivoja.

Ja jos halutaan, että tällä saitilla kukaan viihtyy pidempään, niin on hyvä aloittaa siitä, ettei vastauksissa kukaan hauku, kirjoile ja vittuile, vaikka olisi kuinka paskaa koodia. Aina voi siis vastata asiallisesti eikä alkaa viljelemään paskaa.

Kiitos Metabolixille! :)

Javascriptin debuggaamiseen riittää ihan selaimen vakiokonsoli. Chromessa se on integroitu element inspectorin yhteyteen, Firefoxissa aukeaa oikotiellä Ctrl+Shift+J.