Michał Środek

Mój osobisty blog

Witaj na srodek.info

Jest to blog poświęcony nowoczelnym technologiom ułatwiającym tworzenie aplikacji internetowych. Znajdziesz tutaj porady na temat CSS3, JavaScript, designu, web-usability, standardów W3C.

Cześć! Nazywam się Michał Środek. Z zawodu programista php, z zamiłowania gitarzysta oraz fanatyk GNU/Linuksa(openSUSE® w laptopie). W branży aplikacji internetowych od 9 lat. Prywatnie bez dzieci i kota.

Pracuję wciąż nad własnym elastycznym i wydajnym frameworkiem MVC, kilkoma portalami internetowymi oraz mniejszymi bibliotekami php. Czekam na wasze opinie, zgłoszenia błędów oraz pomysły na dalszy rozwój.

Ta część strony jest w trakcie budowy a moje prace tymczasowo niedostępne.

W przypadku pytań, ofert pracy oraz ciekawych pomysłów proszę się ze mną kontaktować. Możesz mnie znaleźć i wysłać PW na php.pl(SHiP), jamendo.com(michalsrodek), goldenLine.pl, facebook.com lub nk.pl

16 Maj 2010

Canvas — Rysujemy mapę

Filed under: Gry,JavaScript,Moje projekty — Michał Środek @ 1:40

Dzi­siaj stwo­rzę pierw­szą wer­sję plan­szy do mojej gry. Spró­bujmy wykre­ować obszar 16x16, gene­ro­wany na pod­sta­wie tablicy z infor­ma­cjami o poszcze­gól­nych polach. Po wyge­ne­ro­wa­niu mapy pozo­sta­nie ona cał­ko­wi­cie sta­tyczna więc licze­nie fps pozo­sta­wię do kolej­nego arty­kułu. Dzi­siaj zaj­mijmy się stwo­rze­niem głów­nej klasy oraz kilku metod ini­cja­li­zu­ją­cych naszą planszę.

Przede wszyst­kim potrze­bu­jemy obiektu canvas o roz­mia­rach 512x512px(16x16 pól o roz­mia­rach 32x32px).

<canvas id="gameBoard" width="512" height="512"></canvas>

Do wyge­ne­ro­wa­nia mapy potrze­bu­jemy rów­nież kilku tek­stur. Tym­cza­sowo posia­dam jedy­nie trawę, wodę, cegłę oraz lód.

Trawę usta­wi­łem jako tło ele­mentu canvas bez­po­śred­nio w pliku CSS. Spró­bujmy stwo­rzyć główną klasę o nazwie GameBoard.

var GameBoard = {
    ctx: null,
    TEXTURE_ID: {ICE: 1, BRICK: 2, WATER: 3}, 
    textures: [null, 'images/ice.png', 'images/brick.png', 'images/water.png'],
 
    board:[
        [1,1,1,1,1,1,2,2,2,2,1,1,1,1,1,1],
        [1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1],
        [1,1,2,2,2,2,2,2,2,2,2,2,2,2,1,1],
        [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
        [1,2,2,1,1,2,2,2,2,2,2,1,1,2,2,1],
        [2,2,2,1,3,2,2,2,2,2,2,1,3,2,2,2],
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        [2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,2],
        [0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0],
        [0,2,2,2,1,2,2,2,2,2,2,1,2,2,2,0],
        [0,2,2,2,2,1,1,1,1,1,1,2,2,2,2,0],
        [0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0],
        [0,0,0,2,2,2,2,2,2,2,2,2,2,0,0,0],
        [0,0,0,0,0,0,2,2,2,2,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],
 
    drawBoard: function() {
        for(var y=0; y<16; y++)
        {
            for(var x=0; x<16; x++)
            {
                if(this.board[y][x]>0)
                {
                    this.ctx.save();
                    this.ctx.fillStyle = this.textures[this.board[y][x]];
                    this.ctx.fillRect(x*32,y*32,32,32);
                    this.ctx.restore();
                }
            }
        }
    },
 
    preloadTextures: function(i){
        var img = new Image();
        img.src = this.textures[i];
        img.onload = function() {
 
            GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
            if(GameBoard.textures[i+1])
                GameBoard.preloadTextures(i+1);
            else
                GameBoard.drawBoard();
        }
    },
 
    init: function (){
        this.canvas = document.getElementById('gameBoard');
        if (this.canvas.getContext)
        {
            this.ctx = this.canvas.getContext("2d");
            this.preloadTextures(1);
        }
    }
};

Pierw­sze pole naszego obiektu — ctx(context) to kon­tekst obiektu canvas. Po przez niego odwo­łu­jemy do wszyst­kich metod rysu­ją­cych. Następny obiekt — TEXTURE_ID — jest niczym innym jak zbio­rem stałych(troszkę to przy­po­mina enum znane z c++). W tym przy­kła­dzie nie jest on w ogóle uży­wany jed­nak w przy­szło­ści wygod­niej­sze będzie odwo­ły­wa­nie się za pomocą nazw. Kolejne pole — textu­res — to tablica adre­sów do naszych tek­stur. Zauważ, że indeksy w tej tablicy odpo­wia­dają war­to­ściom sta­łych w TEXTURE_ID( TEXTURE_ID.ICE = 1 oraz textures[1] = ‚images/ice.png’). Przy­ją­łem, że tek­stura zerowa to po pro­stu tek­stura pusta(pełna prze­zro­czy­stość). Na końcu wid­nieje tablica board zawie­ra­jąca infor­ma­cje o każ­dym polu. Liczba od 0 do 3 okre­śla rodzaj tekstury.

init()

Metoda ta wyła­puje kon­tekst naszego pola canvas zapi­suje go do pola ctx oraz wywo­łuje metodę preloadTextures(1). Roz­pocz­niemy łado­wa­nie tek­stur roz­po­czy­na­jąc od tej o iden­ty­fi­ka­to­rze jedynki(zero jest zare­zer­wo­wane dla tek­stury pustej).

pre­lo­ad­Te­xtu­res()

Jako para­metr metoda ta przyj­muje iden­ty­fi­ka­tor tekstury(jej indeks w tablicy textu­res). Naj­pierw two­rzymy pusty obraz, a następ­nie usta­lamy jego adres. Po zała­do­wa­niu pliku z gra­fiką gene­ru­jemy nowy wzór za pomocą ctx.createPattern() oraz nad­pi­su­jemy nim adres prze­cho­wy­wany w tablicy textu­res. Następ­nie spraw­dzamy czy tek­stura o iden­ty­fi­ka­to­rze o jeden więk­szym ist­nieje. Jeśli tak ładu­jemy ją. Jeśli nie wyświe­tlamy mapę

draw­Bo­ard()

Ta metoda rysuje pole po polu prze­cho­dząc przez wszyst­kie ele­menty z tablicy board. Sądzę, że kod jest oczywisty.

Efekt dzia­ła­nia skryptu:

Co następ­nym razem?

Umie­ścimy na plan­szy naszą postać oraz zapro­gra­mu­jemy metody odpo­wie­dzialne za wyła­py­wa­nie zda­rzeń kla­wia­tury. Moż­liwe sta­nie się płynne poru­sza­nie po mapie.

Dodaj arty­kuł do:

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Gwar
  • Reddit
  • Technorati
  • Twitter
  • Wykop

Komentarzy: 9 »

  1. Super sprawa ! szkoda tylko że nie wszyst­kie prze­glą­darki obsłu­gują canvas…

    Komentarz by maxx — 16 maja 2010, 1:44

  2. Nie wszyst­kie = IE ;]
    Na tej stro­nie jest sporo cie­ka­wych zesta­wień co które prze­glą­darki obsłu­gują. Nie­stety jest to lekko nieaktualne(dane ze stycz­nia 2009) lecz już wtedy wszyst­kie „nor­malne“ prze­glą­darki canvas obsłu­gi­wały. Teraz jest już troszkę lepiej ponie­waż powoli poja­wia się wspar­cie dla 3d.

    Komentarz by Michał Środek — 16 maja 2010, 12:28

  3. Co prawda to prawda :) ale boje się tro­chę wspar­cia dla 3D rozu­miem ze dla kon­su­men­tów będzie dobrze ale żeby stwo­rzyć gierkę 3D będzie potrzebny sztab ludzi nie będzie tej zabawy ze można coś stwo­rzyć samemu.

    Komentarz by maxx — 17 maja 2010, 21:55

  4. Cześć. U mnie wyświe­tla się biała, pusta strona, po umiesz­cze­niu kody w blo­kach html:

    Pierw­sza mapa w js

    var Game­Bo­ard = {
    ctx: null,
    TEXTURE_ID: {ICE: 1, BRICK: 2, WATER: 3},
    textu­res: [null, ‚images/ice.png’, ‚images/brick.png’, ‚images/water.png’],

    board:[
    [1,1,1,1,1,1,2,2,2,2,1,1,1,1,1,1],
    [1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1],
    [1,1,2,2,2,2,2,2,2,2,2,2,2,2,1,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
    [1,2,2,1,1,2,2,2,2,2,2,1,1,2,2,1],
    [2,2,2,1,3,2,2,2,2,2,2,1,3,2,2,2],
    [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
    [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
    [2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,2],
    [0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0],
    [0,2,2,2,1,2,2,2,2,2,2,1,2,2,2,0],
    [0,2,2,2,2,1,1,1,1,1,1,2,2,2,2,0],
    [0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0],
    [0,0,0,2,2,2,2,2,2,2,2,2,2,0,0,0],
    [0,0,0,0,0,0,2,2,2,2,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],

    draw­Bo­ard: func­tion() {
    for(var y=0; y<16; y++)
    {
    for(var x=0; x0)
    {
    this.ctx.save();
    this.ctx.fillStyle = this.textures[this.board[y][x]];
    this.ctx.fillRect(x*32,y*32,32,32);
    this.ctx.restore();
    }
    }
    }
    },

    pre­lo­ad­Te­xtu­res: function(i){
    var img = new Image();
    img.src = this.textures[i];
    img.onload = function() {

    GameBoard.textures[i] = GameBoard.ctx.createPattern(img, ‚repeat’);
    if(GameBoard.textures[i+1])
    GameBoard.preloadTextures(i+1);
    else
    GameBoard.drawBoard();
    }
    },

    init: func­tion (){
    this.canvas = document.getElementById(‚gameBoard’);
    if (this.canvas.getContext)
    {
    this.ctx = this.canvas.getContext(„2d“);
    this.preloadTextures(1);
    }
    }
    };

    Pomo­że­cie?

    Komentarz by Waqmaz — 21 września 2011, 13:34

  5. @Wagmaz: porów­naj sobie swój kod z tym co zamie­ści­łem w dzia­ła­ją­cych przy­kła­dach http://srodek.info/examples/ lub pod­rzuć link do strony zamiast kodu JS

    Komentarz by Michał Środek — 21 września 2011, 13:40

  6. Ok, dzięki wiel­kie. Dzięki tej stro­nie na pewno wiele się nauczę. :) Umiem dobrze css i php, ale jeśli cho­dzi o js, to jarzę tylko tyle, co na logikę.

    Komentarz by Waqmaz — 21 września 2011, 13:52

  7. Cho­lera… nadal nie ‚dział­czy’.
    http://tinypic.pl/mvwvwd8lyppt
    Mógł­byś obej­rzeć, będę bar­dzo wdzięczny.

    Komentarz by Waqmaz — 21 września 2011, 13:58

  8. Prze­pra­szam za SPAM, jeśli chcesz, możesz usu­nąć z bazy komenty, które pisa­łem. Zasta­na­wiam się, czy to może efekt tego, że uży­wam localhost?

    Komentarz by Waqmaz — 21 września 2011, 14:05

  9. Local­host, lub wiesz, zwy­kły plik zapi­sany jako .html. Jesz­cze raz prze­pra­szam za SPAM, wygląda to naprawdę nie­este­tycz­nie xd.

    Komentarz by Waqmaz — 21 września 2011, 14:05

Kanał RSS z komentarzami do tego wpisu. TrackBack URL

Dodaj komentarz