Panduan Diperbarui untuk Membuat Dunia Isometric, Bagian 2

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Pada bagian akhir dari seri tutorial ini, kita kan melanjutkan dari tutorial pertama dan mempelajari tentang membuat barang yang bisa diambil, trigger, mengganti level, path finding, path following, menggeser level, ketinggian isometric, dan proyektil isometric.

1. Barang Pickup

Pickup adalah barang yang bisa dikumpulkan dalam sebuah level, biasanya cukup dengan melewatinya, contohnya koin, permata, uang, peluru, dan lain-lain.

Data pickup bisa dimasukkan langsung ke data level kita seperti di bawah ini:

1	[
2	[1,1,1,1,1,1],
3	[1,0,0,0,0,1],
4	[1,0,8,0,0,1],
5	[1,0,0,8,0,1],
6	[1,0,0,0,0,1],
7	[1,1,1,1,1,1]
8	]

Dalam data level ini, kita gunakan 8 untuk menunjukkan pickup pada petak rumput (1 dan 0 mewakili tembok dan petak yang bisa dilewati seperti sebelumnya). Ini bisa berarti sebuah gambar petak rumput ditimpa dengan gambar barang pickup. Dengan logika ini, kita akan membutuhkan dua kondisi petak yang berbeda untuk setiap petak yang memiliki pickup, misalnya yang memiliki pickup, dan yang sudah tidak memiliki pickup jika sudah diambil pemain.

Art isometric pada umumnya memiliki beberapa jenis petak yang bisa dilewati, misalnya kita punya 30. Pendekatan di atas berarti jika kita punya sejumlah N pickup, kita akan membutuhkan N x 30 petak ditambah 30 petak asli, karena setiap petak akan perlu satu versi dengan pickup dan satu versi tanpa pickup. Cara ini tidak terlalu efisien; kita perlu coba membuat kombinasi ini secara dinamis.

Untuk memecahkan ini, kita bisa gunakan cara yang sama dengan menempatkan karakter di tutorial pertama. Kapanpun kita menemui petak dengan pickup, kita akan tempatkan petak rumput dan tempatkan pickup di atas petak rumput tersebut. Dengan ini, kita hanya perlu sejumlah N petak pickup ditambah 30 petak yang bisa dilewati, tapi kita perlu nilai angka untuk melambangkan kombinasi pada data level. Untuk menghasilkan sejumlah N x 30 nilai representasi, kita bisa simpan pickupArray khusus untuk menyimpan data pickup terpisah dari levelData. Level yang selesai dengan pickup akan terlihat seperti berikut:

Pada contoh kita, saya mempertahankan berbagai hal sederhana dan tidak menggunakan array tambahan untuk pickup.

Mengambil Pickup

Mendeteksi pickup dilakukan dengan cara yang sama dengan mendeteksi tabrakan, tapi dilakukan setelah menggerakkan karakter.

if(onPickupTile()){
    pickupItem();
}


function onPickupTile(){//check if there is a pickup on hero tile
    return (levelData[heroMapTile.y][heroMapTile.x]==8);
}


Pada fungsi onPickupTile() kita periksa apakah nilai array levelData di koordinat heroMapTile adalah petak pickup atau tidak. Angka di array levelData pada petak di suatu koordinat menunjukkan jenis pickup. Kita perlu periksa tabrakan sebelum gerakan karakter tapi periksa pickup setelahnya, karena pada kasus tabrakan, karakter tidak seharusnya mengisi titik tersebut jika sudah terisi oleh petak yang tidak bisa dilewati, tapi dalam kasus pickup, karakter bebas untuk bergerak melewatinya.

Satu hal yang perlu diketahui adalah data tabrakan biasanya tidak pernah berubah, tapi data pickup berubah setiap kita mengambil sebuah barang. (Hal ini biasanya cukup dengan merubah nilai di array levelData dari misalnya 8 menjadi 0.)

Hal ini membawa sebuah masalah: apa yang terjadi jika kita perlu mengulang level, dan harus mengembalikan semua pickup kembali ke posisi awalnya? Kita tidak memiliki informasi untuk melakukan hal ini, karena array levelData sudah diubah saat pemain pengambil barang. Solusinya adalah menggunakan array salinan untuk level saat sedang dimainkan dan menyimpan array levelData aslinya utuh. Contohnya, kita gunakan levelData dan levelDataLive[], salin array pertama ke array kedua di awal level, dan hanya ubah levelDataLive[] saat permainan.

Untuk contoh ini, saya memunculkan pickup acak di petak rumput yang kosong setiap pemain mengambil barang dan menambahkan nilai pickupCount. Fungsi pickupItem akan terlihat seperti ini.

function pickupItem(){
    pickupCount++;
    levelData[heroMapTile.y][heroMapTile.x]=0;
    //spawn next pickup
    spawnNewPickup();
}

Kamu perlu memperhatikan bahwa kita memeriksa pickup saat karakter ada pada petak tersebut. Ini bisa terjadi beberapa kali dalam satu detik (kita hanya memeriksa saat pemain bergerak, tapi kita bisa bergerak berputar di suatu petak), tapi logika tersebut tidak akan gagal; karena kita mengatur data pada array levelData menjadi 0 saat pertama kali kita mendeteksi benda pickup, semua pemeriksaan onPickupTile() akan bernilai false untuk petak tersebut. Lihatlah contoh interaktif di bawah:

2. Petak Trigger

Sesuai namanya, petak trigger menyebabkan sesuatu terjadi saat pemain menginjaknya atau menekan kunci di atasnya. Mereka bisa memindahkan pemain ke lokasi yang berbeda, membuka gerbang, memunculkan musuh, dan lain-lain. Sebenarnya, pickup adalah bentuk khusus dari petak trigger: saat pemain menginjak petak berisi koin, koin hilang, dan penghitung koin bertambah.

Kita lihat bagaimana kita bisa mengimplementasi pintu yang membawa pemain ke level lain. Petak di sebelah pintu akan menjadi petak trigger; saat pemain menekan tombol x, mereka akan melanjutkan ke level berikutnya.

Isometric level with doors trigger tiles

Untuk mengubah level, kita hanya perlu menukar array levelData saat ini dengan milik level baru, dan mengatur posisi heroMapTile dan arah dari karakter pemain. Anggaplah ada dua level dengan pintu yang menghubungkan keduanya. Karena petak tanah di sebelah pintu akan menjadi petak trigger di kedua level, kita bisa menggunakannya sebagai posisi baru saat karakter saat muncul di level baru.

Logika untuk mengimplementasi fitur ini sama dengan pickup, dan kita akan menggunakan array levelData untuk menyimpan nilai trigger. Dalam contoh kita, 2 berarti petak pintu, dan nilai di sebelahnya adalah triggernya. Saya menggunakan 101 dan 102 dengan ketentuan dasar bahwa sebuah petak dengan nilai lebih dari 100 adalah petak trigger dan nilai tersebut dikurangi 100 adalah level yang dituju:

1	var level1Data=
2	[[1,1,1,1,1,1],
3	[1,1,0,0,0,1],
4	[1,0,0,0,0,1],
5	[2,102,0,0,0,1],
6	[1,0,0,0,1,1],
7	[1,1,1,1,1,1]];
8
9	var level2Data=
10	[[1,1,1,1,1,1],
11	[1,0,0,0,0,1],
12	[1,0,8,0,0,1],
13	[1,0,0,0,101,2],
14	[1,0,1,0,0,1],
15	[1,1,1,1,1,1]];

Kode untuk memeriksa event trigger adalah sebagai berikut:

var xKey=game.input.keyboard.addKey(Phaser.Keyboard.X);

xKey.onUp.add(triggerListener);// add a Signal listener for up event

function triggerListener(){
    var trigger=levelData[heroMapTile.y][heroMapTile.x];
    if(trigger>100){//valid trigger tile
        trigger-=100;
        if(trigger==1){//switch to level 1
            levelData=level1Data;
        }else {//switch to level 2
            levelData=level2Data;
        }
        for (var i = 0; i < levelData.length; i++)
        {
            for (var j = 0; j < levelData[0].length; j++)
            {
                trigger=levelData[i][j];
                if(trigger>100){//find the new trigger tile and place hero there
                    heroMapTile.y=j;
                    heroMapTile.x=i;
                    heroMapPos=new Phaser.Point(heroMapTile.y * tileWidth, heroMapTile.x * tileWidth);
                    heroMapPos.x+=(tileWidth/2);
                    heroMapPos.y+=(tileWidth/2);
                }
            }
        }
    }
}

Fungsi triggerListener() memeriksa jika nilai di array data trigger pada suatu koordinat lebih besar dari 100. Jika iya, kita cari level yang perlu kita munculkan dengan mengurangi nilai petak dengan 100. Fungsi tersebut mencari petak trigger di levelData yang baru sebagai posisi baru untuk karakter pemain. Saya buat trigger aktif saat x dilepas; jika kita hanya mendengarkan tombol ditekan, maka kita akan masuk dalam loop di mana kita menukar antar level selama tombol ditekan, karena karakter selalu muncul di atas petak trigger.

Berikut adalah demo yang bisa dicoba. Cobalah mengambil barang dengan berjalan melewatinya dan berganti level dengan berdiri di sebelah pintu dan menekan x.

3. Proyektil

Proyektil adalah sesuatu yang bergerak dengan arah dan kecepatan tertentu, seperti peluru, sihir, bola, dan lain-lain. Proyektil serupa dengan karakter pemain, kecuali tingginya: proyektil umumnya melayang di atas tanah, tidak berdiri di atasnya. Sebuah peluru akan bergerak di atas ketinggian pinggang karakter, dan sebuah bola mungkin akan memantul kesana kemari.

Satu hal yang menarik adalah tinggi isometric sama dengan tinggi pada sudut pandang 2D dari samping, walau nilainya lebih kecil. Tidak ada perubahan rumit yang perlu dilakukan. Jika sebuah bola berada 10 piksel di atas tanah pada koordinat Kartesian, bola tersebut bisa 10 atau 6 piksel di atas tanah pada koordinat isometric. (dalam kasus kita, sumbu yang relevan adalah sumbu y.)

Kita coba implementasi bola memantul pada dataran rumput kita. Agar lebih nyata, kita tambahkan bayangan untuk bola. Kita hanya perlu menambahkan nilai ketinggian pantulan pada sumbu Y untuk bola kita. Tinggi pantulan akan berubah dari frame ke frame tergantung dari gravitasi, dan begitu bola menyentuh lantai, kita akan ubah kecepatan sepanjang sumbu y.

Sebelum kita menangani pantulan dalam dunia isometric, kita lihat bagaimana untuk mengimplementasinya pada sistem Kartesian 2D. Kita wakili kekuatan pantulan bola dengan variabel zValue. Bayangkan bahwa nilai awal bola bernilai 100, jadi zValue = 100.

Kita akan gunakan dua variabel: incrementValue, yang akan mulai dari 0, dan gravity, yang akan memiliki nilai -1. Setiap frame, kita kurangi incrementValue dengan zValue, dan kurangi gravity dengan incrementValue untuk membuat perlambatan. Saat zValue bernilai 0 artinya bola mencapai tanah; sekarang kita mengubah tanda incrementValue dengan mengalikannya dengan -1, mengubahnya menjadi nilai positif. Ini membuat bola bergerak ke atas pada frame berikutnya, seakan memantul.

Kodenya akan terlihat sebagai berikut:

if(game.input.keyboard.isDown(Phaser.Keyboard.X)){
    zValue=100;
}
incrementValue-=gravity;
zValue-=incrementValue;
if(zValue<=0){
    zValue=0;
    incrementValue*=-1;
}

Kodenya akan sama untuk sudut pandang isometric, dengan perbedaan bahwa kamu bisa menggunakan nilai zValue yang lebih kecil. Lihat di bawah bagaimana zValue ditambahkan pada nilai y isometric bola saat rendering.

function drawBallIso(){
    var isoPt= new Phaser.Point();//It is not advisable to create points in update loop
    var ballCornerPt=new Phaser.Point(ballMapPos.x-ball2DVolume.x/2,ballMapPos.y-ball2DVolume.y/2);
    isoPt=cartesianToIsometric(ballCornerPt);//find new isometric position for hero from 2D map position
    gameScene.renderXY(ballShadowSprite,isoPt.x+borderOffset.x+shadowOffset.x, isoPt.y+borderOffset.y+shadowOffset.y, false);//draw shadow to render texture
    gameScene.renderXY(ballSprite,isoPt.x+borderOffset.x+ballOffset.x, isoPt.y+borderOffset.y-ballOffset.y-zValue, false);//draw hero to render texture
}

Lihatlah contoh interaktif di bawah:

Ketahuilah bahwa peran bayangan sangat penting untuk menambahkan ilusi agar terlihat lebih nyata. Ketahui pula kita sekarang menggunakan dua koordinat (x dan y) untuk mewakili posisi tiga dimensi dalam koordinat isometric, sumbu Y pada koordiant layar adalah sumbu z pada koorinat isometric. Hal ini bisa membingungkan!

4. Mencari dan Mengikuti Jalur

Pencarian jalur dan mengikuti jalur adalah proses yang rumit. Ada beberapa pendekatan menggunakan berbagai algoritma untuk menemukan jalur antara dua titik, tapi karena levelData adalah array 2D, proses ini akan lebih mudah. Kita punya titik-titik unik yang bisa dilewati pemain, dan mudah diperiksa apakah bisa dilewati atau tidak.

Mencari Jalur

Tidak bijak untuk berusaha menciptakan ulang algoritma yang sudah umum, kita sebaiknya menggunakan solusi yang sudah ada untuk keperluan pencarian jalur kita. Untuk menggunakan Phaser, kita membutuhkan solusi JavaScript, dan yang saya pilih adalah EasyStarJS. Kita menginisialisasi engine pencarian jalur sebagai berikut.

easystar = new EasyStar.js();
easystar.setGrid(levelData);
easystar.setAcceptableTiles([0]);
easystar.enableDiagonals();// we want path to have diagonals
easystar.disableCornerCutting();// no diagonal path when walking at wall corners

Karena levelData hanya memiliki 0 dan 1, kita bisa langsung melemparnya sebagai array titik. Kita mengatur nilai 0 sebagai titik yang bisa dilewati. Kita membolehkan berjalan diagonal tapi mencegahnya saat berjalan dekat sudut atau petak yang tidak bisa dilewati.

Hal ini karena jika diperbolehkan, pemain bisa memotong jalan ke petak yang tidak bisa dilewati saat berjalan diagonal. Dalam kasus tersebut, deteksi tabrakan tidak akan memperbolehkan pemain untuk menembus. Perlu diperhatikan juga bahawa pada contoh tersebut saya menghilangkan deteksi tabrakan karena tidak diperlukan untuk contoh jalan berbasis AI.

Kita akan mendeteksi ketukan pemain di petak kosong di dalam level dan mengkalkulasi jalur menggunakan fungsi findPath. Pemanggilan fungsi plotAndMove menghasilkan array titik dari jalur yang didapat. Kita menandai minimap dengan jalur yang ditemukan.

game.input.activePointer.leftButton.onUp.add(findPath)

function findPath(){
    if(isFindingPath || isWalking)return;
    var pos=game.input.activePointer.position;
    var isoPt= new Phaser.Point(pos.x-borderOffset.x,pos.y-borderOffset.y);
    tapPos=isometricToCartesian(isoPt);
    tapPos.x-=tileWidth/2;//adjustment to find the right tile for error due to rounding off
    tapPos.y+=tileWidth/2;
    tapPos=getTileCoordinates(tapPos,tileWidth);
    if(tapPos.x>-1&&tapPos.y>-1&&tapPos.x<7&&tapPos.y<7){//tapped within grid
        if(levelData[tapPos.y][tapPos.x]!=1){//not wall tile
            isFindingPath=true;
            //let the algorithm do the magic
            easystar.findPath(heroMapTile.x, heroMapTile.y, tapPos.x, tapPos.y, plotAndMove);
            easystar.calculate();
        }
    }
}
function plotAndMove(newPath){
    destination=heroMapTile;
    path=newPath;
    isFindingPath=false;
    repaintMinimap();
    if (path === null) {
        console.log("No Path was found.");
    }else{
        path.push(tapPos);
        path.reverse();
        path.pop();
        for (var i = 0; i < path.length; i++)
        {
            var tmpSpr=minimap.getByName("tile"+path[i].y+"_"+path[i].x);
            tmpSpr.tint=0x0000ff;
            //console.log("p "+path[i].x+":"+path[i].y);
        }
        
    }
}

Isometric level with the newly found path highlighted in minimap

Mengikuti Jalur

Begitu kita dapat jalur sebagai array titik, kita perlu membuat karakter kita mengikutinya.

Misalnya kita mau membuat karakter bergerak ke petak yang kita klik. Kita perlu mencari jalur antara titik posisi karakter dan titik yang kita klik. Jika jalur yang sukses ditemukan, kita perlu menggerakkan karakter ke titik pertama di array titik dengan mengaturnya sebagai tujuan. Begitu kita mencapai titik tujuan, kita periksa apakah ada titik lain di array titik dan jika iya, atur titik berikutnya sebagai tujuan, dan seterusnya sampai kita mencapai titik akhir.

Kita juga akan mengubah arah hadap pemain berdasarkan titik saat ini dan titik tujuan setiap kali kita mencapai sebuah titik. Antara titik kita hanya berjalan ke arah yang dibutuhkan sampai mencapai titik tujuan. Ini adalah AI yang sangat sederhana, dan pada contoh dilakukan dalam fungsi aiWalk ditujukkan sebagian di bawah ini.

function aiWalk(){
    if(path.length==0){//path has ended
        if(heroMapTile.x==destination.x&&heroMapTile.y==destination.y){
            dX=0;
            dY=0;
            isWalking=false;
            return;
        }
    }
    isWalking=true;
    if(heroMapTile.x==destination.x&&heroMapTile.y==destination.y){//reached current destination, set new, change direction
        //wait till we are few steps into the tile before we turn
        stepsTaken++;
        if(stepsTaken<stepsTillTurn){
            return;
        }
        console.log("at "+heroMapTile.x+" ; "+heroMapTile.y);
        //centralise the hero on the tile    
        heroMapSprite.x=(heroMapTile.x * tileWidth)+(tileWidth/2)-(heroMapSprite.width/2);
        heroMapSprite.y=(heroMapTile.y * tileWidth)+(tileWidth/2)-(heroMapSprite.height/2);
        heroMapPos.x=heroMapSprite.x+heroMapSprite.width/2;
        heroMapPos.y=heroMapSprite.y+heroMapSprite.height/2;
        
        stepsTaken=0;
        destination=path.pop();//whats next tile in path
        if(heroMapTile.x<destination.x){
            dX = 1;
        }else if(heroMapTile.x>destination.x){
            dX = -1;
        }else {
            dX=0;
        }
        if(heroMapTile.y<destination.y){
            dY = 1;
        }else if(heroMapTile.y>destination.y){
            dY = -1;
        }else {
            dY=0;
        }
        if(heroMapTile.x==destination.x){
            dX=0;
        }else if(heroMapTile.y==destination.y){
            dY=0;
        }
        //......
    }
}

Kita perlu menyeleksi klik yang sah dengan menentukan apakah kita menekan titik yang bisa dilewati, atau titik yang tidak bisa dilewati seperti tembok.

Hal lain yang menarik saat menulis kode untuk AI: kita tidak ingin karakter berputar ke arah petak beirkutnyan di array titik begitu dia sampai di titik saat ini, hal itu akan membuat karakter bergerak di batas ujung petak. Kita sebaiknya menunggu sampai karakter beberapa langkah di dalam petak sebelum kita melihat titik berikutnya. Lebih baik lagi untuk menempatkan karakter di tengah petak saat ini sebelum kita berputar, untuk membuatnya terasa sempurna.

Lihatlah demo di bawah ini:

5. Isometric Scrolling

Saat area level lebih besar dari area layar, kita perlu membuatnya bergulir.

Area layar yang terlihat bisa dianggap sebagai persegi kecil di dalam persegi yang lebih besar yang berisi area level yang lengkap. Menggulir adalah aksi menggeser persegi kecil di dalam persegi besar. Biasanya saat peta bergulir terjadi, posisi pemain tetap sama terhadap persegi di layar, biasanya ada di tengah layar. Menariknya, yang perlu kita lakukan untuk membuat peta bergulir adalah memperhatikakn posisi sudut dari persegi dalam.

Titik sudut ini, yang ditulis dalam koordinat Kartesian, akan berada dalam sebuah petak dalam data level. Untuk menggulir peta, kita tambahkan posisi x dan y dari titik sudut dalam koordinat Kartesian. Sekarang kita bisa mengubah titik tersebut menjadi koordinat isometric dan menggunakannya untuk menggambar layar.

Nilai yang baru diubah dalam ruang isometric ini perlu menjadi sudut pada layar kita, yang artinya mereka adalah titilk (0,0) yang baru. Jadi saat mengurai dan menggambar data level, kita kurangi nilai ini dari posisi isometric semua petak, dan tentukan jika posisi barunya ada di dalam layar.

Selain itu, kita bisa menentukan untuk hanya menggambar sejumlah X x Y petak di layar agar loop render kita efisien untuk level yang lebih besar.

Kita bisa menulis cara tersebut dalam langkah-langkah sebagai berikut:

Perbarui nilai x dan y koordinat Kartesian titik sudut.
Ubah menjadi titik pada ruang isometric.
Kurangi nilai ini dari posisi isometric setiap petak.
Gambar sejumlah petak dalam jumlah tertentu di layar mulai dari sudut yang baru.
Opsional: Gambar petak hanya jika posisi isometric ada di dalam layar.

var cornerMapPos=new Phaser.Point(0,0);
var cornerMapTile=new Phaser.Point(0,0);
var visibleTiles=new Phaser.Point(6,6);

//...
function update(){
    //...
    if (isWalkable())
    {
        heroMapPos.x +=  heroSpeed * dX;
        heroMapPos.y +=  heroSpeed * dY;
        
        //move the corner in opposite direction
        cornerMapPos.x -=  heroSpeed * dX;
        cornerMapPos.y -=  heroSpeed * dY;
        cornerMapTile=getTileCoordinates(cornerMapPos,tileWidth);
        //get the new hero map tile
        heroMapTile=getTileCoordinates(heroMapPos,tileWidth);
        //depthsort & draw new scene
        renderScene();
    }
}
function renderScene(){
    gameScene.clear();//clear the previous frame then draw again
    var tileType=0;
    //let us limit the loops within visible area
    var startTileX=Math.max(0,0-cornerMapTile.x);
    var startTileY=Math.max(0,0-cornerMapTile.y);
    var endTileX=Math.min(levelData[0].length,startTileX+visibleTiles.x);
    var endTileY=Math.min(levelData.length,startTileY+visibleTiles.y);
    startTileX=Math.max(0,endTileX-visibleTiles.x);
    startTileY=Math.max(0,endTileY-visibleTiles.y);
    //check for border condition
    for (var i = startTileY; i < endTileY; i++)
    {
        for (var j = startTileX; j < endTileX; j++)
        {
            tileType=levelData[i][j];
            drawTileIso(tileType,i,j);
            if(i==heroMapTile.y&&j==heroMapTile.x){
                drawHeroIso();
            }
        }
    }
}
function drawHeroIso(){
    var isoPt= new Phaser.Point();//It is not advisable to create points in update loop
    var heroCornerPt=new Phaser.Point(heroMapPos.x-hero2DVolume.x/2+cornerMapPos.x,heroMapPos.y-hero2DVolume.y/2+cornerMapPos.y);
    isoPt=cartesianToIsometric(heroCornerPt);//find new isometric position for hero from 2D map position
    gameScene.renderXY(sorcererShadow,isoPt.x+borderOffset.x+shadowOffset.x, isoPt.y+borderOffset.y+shadowOffset.y, false);//draw shadow to render texture
    gameScene.renderXY(sorcerer,isoPt.x+borderOffset.x+heroWidth, isoPt.y+borderOffset.y-heroHeight, false);//draw hero to render texture
}
function drawTileIso(tileType,i,j){//place isometric level tiles
    var isoPt= new Phaser.Point();//It is not advisable to create point in update loop
    var cartPt=new Phaser.Point();//This is here for better code readability.
    cartPt.x=j*tileWidth+cornerMapPos.x;
    cartPt.y=i*tileWidth+cornerMapPos.y;
    isoPt=cartesianToIsometric(cartPt);
    //we could further optimise by not drawing if tile is outside screen.
    if(tileType==1){
        gameScene.renderXY(wallSprite, isoPt.x+borderOffset.x, isoPt.y+borderOffset.y-wallHeight, false);
    }else{
        gameScene.renderXY(floorSprite, isoPt.x+borderOffset.x, isoPt.y+borderOffset.y, false);
    }
}

Perlu diingat bahwa titik sudut ditingkatkan dengan arah yang berlawanan dari posisi pemain saat dia bergerak. Hal ini memastikan pemain tetap berada di posisi yang sama di layar. Lihatlah contoh berikut (gunakank panah untuk bergulir, ketuk untuk menambahkan area yang terlihat).

Beberapa catatan:

Saat menggulirkan peta, kita perlu menggambar petak tambahan di batas layar, atau kita bisa melihat petak menghilang dan muncul di batas layar.
Jika kamu punya petak yang lebih besar dari satu petak, kamu perlu menggambar petak di perbatasan. Contohnya, jika petak terbesar di level berukuran X dan Y, kamu perlu menggambar sejumlah X petak ke kiri dan kanan, dan sejumlah Y ke atas dan bawah. Hal ini memastikan bahwa sudut dari petak yang lebih besar akan tetap terlihat saat bergulir masuk atau keluar dari layar.
Kita perlu memastikan kita tidak memiliki area kosong di layar saat menggambar dekat perbatasan level.
Level hanya boleh bergulir sampai petak ujung digambar pada ujung layar, setelah ini, karakter seharusnya berjalan di layar tanpa peta bergulir. Untuk ini, kita perlu mencatat empat sudut dari persegi dalam layar, dan mengatur peta bergulir dan logika pergerakan pemain dengan sesuai. Apakah kamu menerima tantangan untuk mengimplementasinya sendiri?

Kesimpulan

Seri ini ditujukan pada pemula yang mencoba eksplorasi dunia game isometric. Banyak konsep yang dijelaskan memiliki pendekatan lain yang lebih rumit, dan saya sengaja memilih pendekatan yang lebih sederhana.

Pendekatan tersebut mungkin tidak memenuhi semua skenario yang akan kamu hadapi, tapi pengetahuan yang didapat bisa dikembangkan untuk membuat solusi lain yang lebih rumit. Contohnya, fitur depth sorting yang kita implementasi akan gagal saat kita memiliki level dengan banyak tingkat, atau petak platform yang bergerak satu sama lain.

Tapi itu tutorial untuk kesempatan lain.