Dasar Pysics Platformer 2D, Bagian 4

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

Menangkap Pinggiran Platform

Karena sekarang kita sudah bisa melompat, turun dari platform satu arah, dan berlarian ke sana kemari, kita juga bisa mengimplementasi menangkap pinggiran. Mekanik menangkap pinggiran sebenarnya tidak harus dibuat untuk semua game, tapi salah satu cara yang populer untuk menambah jenis gerakan pemain tanpa harus membuat sesuatu yang ekstrim seperti lompatan ganda.

Mari kita lihat bagaimana kita bisa menentukan apakah sebuah pinggiran bisa ditangkap. Untuk menentukan apakah karakter bisa menangkap pinggiran, kita akan memeriksa sisi arah pemain bergerak terus menerus. Jika kita menemukan petak kosong di atas AABB, dan menemukan petak solid di bawahnya, maka bagian atas dari petak solid tersebut adalah pinggiran yang bisa ditangkap olen karakter kita untuk berpegangan.

Mengatur Variabel

Kita kembali ke kelas Character, di mana kita akan mengimplementasi fitur menangkap pinggiran. Tidak perlu membuatnya pada kelas MovingObject karena sebagian besar objek tidak akan punya kemampuan untuk menangkap pinggiran, sehingga itu hanya membuang waktu jika kita implementasi di situ.

Pertama, kita perlu menambahkan beberapa konstanta. Kita mulai dengan membuat konstanta sensor offset.

1	public const float cGrabLedgeStartY = 0.0f;
2	public const float cGrabLedgeEndY = 2.0f;

cGrabLedgeStartY dan cGrabLedgeEndY adalah offset dari atas AABB; yang pertama adalah titik sensor pertama, dan yang kedua adalah akhir dari titik sensor. Seperti yang bisa kamu lihat, karakter perlu menemukan pinggiran dalam 2 piksel.

Kita juga membutuhkan konstanta tambahan untuk menyesuaikan posisi karakter ke petak yang kita tangkap. Untuk karakter ini, kita akan atur menjadi -4.

1	public const float cGrabLedgeTileOffsetY = -4.0f;

Selain itu, kitai perlu mengingat koordinat dari petak yang kita tangkap. Kita simpan sebagai variabel dari kelas karakter.

1	public Vector2i mLedgeTile;

Implementasi

Kita perlu periksa apakah kita bisa menangkap pinggiran dari kondisi melompat, mari periksa kode yang bersangkutan. Tepat setelah kita periksa apakah karakter mendarat di tanah, kita periksa apakah kondisi untuk menangkap pinggiran terpenuhi. Kondisi utamanya adalah sebagai berikut:

Kecepatan vertikal lebih kecil atau sama dengan nol (karakter sedang jatuh).
Karakter tidak berada di langit-langit, tidak ada gunanya menangkap pinggiran jika kita tidak bisa melompat untuk menaikinya.
Karakter bertabrakan dengan tembok dan sedang bergerak ke arah tersebut.

if (mOnGround)
{
    //if there's no movement change state to standing
    if (KeyState(KeyInput.GoRight) == KeyState(KeyInput.GoLeft))
    {
        mCurrentState = CharacterState.Stand;
        mSpeed = Vector2.zero;
        mAudioSource.PlayOneShot(mHitWallSfx, 0.5f);
    }
    else    //either go right or go left are pressed so we change the state to walk
    {
        mCurrentState = CharacterState.Walk;
        mSpeed.y = 0.0f;
        mAudioSource.PlayOneShot(mHitWallSfx, 0.5f);
    }
}
else if (mSpeed.y <= 0.0f 
    && !mAtCeiling
    && ((mPushesRightWall && KeyState(KeyInput.GoRight)) || (mPushesLeftWall && KeyState(KeyInput.GoLeft))))
{
}

Jika tiga kondisi tersebut terpenuhi, kita perlu mencari pinggiran yang perlu ditangkap. Kita mulai dengan menghitung posisi atas dari sensor, yang akan berupa pojok kiri atas atau kanan atas dari AABB.

Vector2 aabbCornerOffset;

if (mPushesRightWall && mInputs[(int)KeyInput.GoRight])
    aabbCornerOffset = mAABB.halfSize;
else
    aabbCornerOffset = new Vector2(-mAABB.halfSize.x - 1.0f, mAABB.halfSize.y);

Sekarang, seperti yang mungkin kamu bayangkan, kita akan menemui masalah yang mirip dengan masalah saat mengimplementasi pemeriksaan tabrakan, jika karakter jatuh sangat cepat, sangat mungkin untuk melewati titik pada pinggiran yang sebenarnya bisa ditangkap. Karena itu kita perlu memeriksa petak untuk ditangkap bukan dari pojok di frame saat ini, tapi dari frame sebelumnya, seperti yang pada gambar berikut:

Gambar bagiaan atas adalah karakter pada posisi di frame sebelumnya. Pada posisi ini, kita perlu mulai mencari peluang untuk mengnangkap pinggiran dari pojok kanan atas dari AABB di frame sebelumnya dan berhenti di posisi pada frame saat ini.

Sekarang kita ambil koordinat petak yang perlu kita periksa, mulai dengan mendeklarasi variabel yang dibutuhkan. Kita akan memeriksa petak dalam satu kolom, jadi yang kita butuhkan adalah koordinat X dari kolom dan koordinat Y dari bagian atas dan bawah.

1	int tileX, topY, bottomY;

Kita ambil koordinat X dari pojok AABB.

1	int tileX, topY, bottomY;
2	tileX = mMap.GetMapTileXAtPoint(mAABB.center.x + aabbCornerOffset.x);

Kita ingin mulai mencari pinggiran dari posisi di frame sebelumnya hanya juka kita sudah bergerak menuju tembok di saat itu, jadi nilai X pada posisi karakter kita sebenarnya tidak berubah.

if ((mPushedLeftWall && mPushesLeftWall) || (mPushedRightWall && mPushesRightWall))
{
    topY = mMap.GetMapTileYAtPoint(mOldPosition.y + mAABBOffset.y + aabbCornerOffset.y - Constants.cGrabLedgeStartY);
    bottomY = mMap.GetMapTileYAtPoint(mAABB.center.y + aabbCornerOffset.y - Constants.cGrabLedgeEndY);
}

Seperti yang bisa kamu lihat, dalam kasus i ni kita menghitung topY menggunakan posisi dari frame sebelumnya, dan bagian bawahnya menggunakan frame saat ini. Jika kita tidak ada di sebelah tembok, maka kita hanya perlu melihat apakah kita bisa menangkap pi nggiran menggunakan posisi objek di frame saat ini.

if ((mPushedLeftWall && mPushesLeftWall) || (mPushedRightWall && mPushesRightWall))
{
    topY = mMap.GetMapTileYAtPoint(mOldPosition.y + mAABBOffset.y + aabbCornerOffset.y - Constants.cGrabLedgeStartY);
    bottomY = mMap.GetMapTileYAtPoint(mAABB.center.y + aabbCornerOffset.y - Constants.cGrabLedgeEndY);
}
else
{
    topY = mMap.GetMapTileYAtPoint(mAABB.center.y + aabbCornerOffset.y - Constants.cGrabLedgeStartY);
    bottomY = mMap.GetMapTileYAtPoint(mAABB.center.y + aabbCornerOffset.y - Constants.cGrabLedgeEndY);
}

Sekarang kita sudah tahu petak untuk diperiksa, kita bisa mulai mengiterasi petak-petak tersebut. Kita akan mulai dari atas ke bawah, karena urutan tersebut adalah yang paling masuk akal karena kita hanya membolehkan karakter untuk menangkap pinggiran saat sedang jatuh.

1	for (int y = topY; y >= bottomY; --y)
2	{
3	}

Sekarang kita periksa apakah petak yang sedang kita periksa memenuhi kondisi untuk karakter menangkap pinggiran. Kondisinya, seperti yang dijelaskan sebelumnya, adalah sebagai berikut:

Petak tersebut kosong.
Petak di bawahnya adalah petak solid (ini adalah petak yang akan kita tangkap).

for (int y = topY; y >= bottomY; --y)
{
    if (!mMap.IsObstacle(tileX, y)
        && mMap.IsObstacle(tileX, y - 1))
    {
    }
}

Langkah berikutnya adalah menghitung posisi dari pojok petak yang ingin kita tangkap. Hal ini cukup mudah, kita hanya perlu mengambil posisi petak dan menambahkan offset sesuai dengan ukuran petak.

if (!mMap.IsObstacle(tileX, y)
        && mMap.IsObstacle(tileX, y - 1))
{
    var tileCorner = mMap.GetMapTilePosition(tileX, y - 1);
    tileCorner.x -= Mathf.Sign(aabbCornerOffset.x) * Map.cTileSize / 2;
    tileCorner.y += Map.cTileSize / 2;
}

Setelah kita tahu nilai tersebut, kita perlu periksa apakah pojok tersebut ada diantara titik sensor kita. Tentu saja kita ingin melakukannya hanya jika kita sedang memeriksa petak yang berhubungan dengan posisi karakter di frame saat ini, yaitu tile dengan nilai koordinat Y yang sama dengan bottomY. Jika tidak, kita bisa asumsikan bahwa kita melewati pinggiran antara frame sebelumnya dan frame saat ini, jadi kita perlu menangkap pinggiran itu.

if (!mMap.IsObstacle(tileX, y)
        && mMap.IsObstacle(tileX, y - 1))
{
    var tileCorner = mMap.GetMapTilePosition(tileX, y - 1);
    tileCorner.x -= Mathf.Sign(aabbCornerOffset.x) * Map.cTileSize / 2;
    tileCorner.y += Map.cTileSize / 2;
    
    if (y > bottomY ||
        ((mAABB.center.y + aabbCornerOffset.y) - tileCorner.y <= Constants.cGrabLedgeEndY
        && tileCorner.y - (mAABB.center.y + aabbCornerOffset.y) >= Constants.cGrabLedgeStartY))
    {
    }
}

Sekarang kita sudah sampai, kita menemukan pinggiran yang ingin kita tangkap. Pertama kita perlu simpan posisi petak yang ditangkap.

if (y > bottomY ||
    ((mAABB.center.y + aabbCornerOffset.y) - tileCorner.y <= Constants.cGrabLedgeEndY
    && tileCorner.y - (mAABB.center.y + aabbCornerOffset.y) >= Constants.cGrabLedgeStartY))
{
    mLedgeTile = new Vector2i(tileX, y - 1);
}

Kita juga perlu menyesuaikan posisi karakter dengan pinggiran tersebut. Yang kita inginkan adalah menyesuaikan bagian atas sensor karakter dengan bagian atas petak, dan menambahkan posisi tersebut dengan cGrabLedgeTileOffsetY.

1	mPosition.y = tileCorner.y - aabbCornerOffset.y - mAABBOffset.y - Constants.cGrabLedgeStartY + Constants.cGrabLedgeTileOffsetY;

Selain itu, kita perlu mengatur kecepatan menjadi nol, dan mengubah kondisi karakter manjadi CharacterState.GrabLedge. Setelah itu, kita bisa keluar dari loop karena tidak perlu mengolah sisa petak yang ada.

mPosition.y = tileCorner.y - aabbCornerOffset.y - mAABBOffset.y - Constants.cGrabLedgeStartY + Constants.cGrabLedgeTileOffsetY;

mSpeed = Vector2.zero;
mCurrentState = CharacterState.GrabLedge;
break;

Sudah selesai! Pinggiran sekarang bisa dideteksi dan ditangkap, jadi kita perlu mengimplementasi kondisi GrabLedge, yang kita lewati sebelumnya.

Kontrol Menangkap Pinggiran

Setelah karakter menangkap pinggiran, pemain punya dua pilihan: melompat ke atas atau turun ke bawah. Melompat bekerja seperti biasanya: pemain menekan tombol melompat dan kekuatan lompatan sama dengan melompat dari tanah. Turun ke bawah dilakukan dengan menekan tombol bawah, atau menekan tombol arah yang menjauhi pinggiran.

Implementasi Kontrol

Hal pertama yang perlu dilakukan adalah memeriksa apakah pinggiran ada di kiri atau kanan karakter. Kita bisa melakukan ini karena kita menyimpan koordinat pinggiran yang sedang ditangkap pemain.

1	bool ledgeOnLeft = mLedgeTile.x * Map.cTileSize < mPosition.x;
2	bool ledgeOnRight = !ledgeOnLeft;

Kita bisa menggunakan informasi itu untuk menentukan apakah karakter bisa turun dari pi nggiran. Untuk turun, pemain perlu untuk:

menekan tombol bawah
menekan tombol kiri saat menangkap pinggiran di kanan, atau
menekan kanan saat menangkap pinggiran di kiri

bool ledgeOnLeft = mLedgeTile.x * Map.cTileSize < mPosition.x;
bool ledgeOnRight = !ledgeOnLeft;

if (mInputs[(int)KeyInput.GoDown]
    || (mInputs[(int)KeyInput.GoLeft] && ledgeOnRight)
    || (mInputs[(int)KeyInput.GoRight] && ledgeOnLeft))
{
}

Ada sedikit masalah di sini. Bayangkan situasi saat kita menekan tombol bawah dan kanan, ketika karakter sedang berpegangan ke pinggiran di kanan. Itu akan menghasilkan situasi berikut:

Masalahnya adalah karakter menangkap pinggiran segera setelah melepaskannya.

Solusi sederhananya adalah untuk mengunci gerakan ke arah pinggiran selama beberapa frame setelah kita turun dari pinggiran. Untuk itu kita perlu dua variabel baru, kita beri nama mCannotGoLeftFrames dan mCannotGoRightFrames.

1	public int mCannotGoLeftFrames = 0;
2	public int mCannotGoRightFrames = 0;

Saat karakter turun dari pinggiran, kita memerlukan variabel tersebut dan mengubah kondisi karakter jadi melompat.

bool ledgeOnLeft = mLedgeTile.x * Map.cTileSize < mPosition.x;
bool ledgeOnRight = !ledgeOnLeft;

if (mInputs[(int)KeyInput.GoDown]
    || (mInputs[(int)KeyInput.GoLeft] && ledgeOnRight)
    || (mInputs[(int)KeyInput.GoRight] && ledgeOnLeft))
{
    if (ledgeOnLeft)
        mCannotGoLeftFrames = 3;
    else
        mCannotGoRightFrames = 3;

    mCurrentState = CharacterState.Jump;
}

Sekarang kita kembali ke kondisi Jump terlebih dahulu, dan pastikan kondisi tersebut mengikuti aturan kita untuk mencegah pergerakan ke kiri atau kanan setelah turun dari pinggiran. Kita reset input tepat sebelum kita periksa apakah kita perlu mencari pinggiran untuk ditangkap.

if (mCannotGoLeftFrames > 0)
{
    --mCannotGoLeftFrames;
    mInputs[(int)KeyInput.GoLeft] = false;
}
if (mCannotGoRightFrames > 0)
{
    --mCannotGoRightFrames;
    mInputs[(int)KeyInput.GoRight] = false;
}

if (mSpeed.y <= 0.0f && !mAtCeiling
    && ((mPushesRightWall && mInputs[(int)KeyInput.GoRight]) || (mPushesLeftWall && mInputs[(int)KeyInput.GoLeft])))
{

Seperti yang bisa kamu lihat, dengan cara ini kita tidak akan memenuhi syarat untuk menangkap pinggiran selama arah yang diblok sama dengan arah pinggiran yang mungkin ditangkap oleh karakter. Setiap kita mencegah sebuah input, kita menguranginya dari sisa blocking frame, jadi akhirnya kita bisa bergerak lagi, dalam hal ini, setelah 3 frame.

Sekarang kita lanjutkan ke kondisi GrabLedge. Karena kita sudah menangani turun dari pingguran, sekarang kita perlu membuat karakter bisa melompat dari posisi bergantung di pinggiran.

Jika karakter tidak turun dari pinggiran, kita perlu memeriksa apakah tombol melompat ditekan, jika iya, kita perlu mengatur kecepatan melompat vertikal dan mengubah kondisi karakter:

if (mInputs[(int)KeyInput.GoDown]
    || (mInputs[(int)KeyInput.GoLeft] && ledgeOnRight)
    || (mInputs[(int)KeyInput.GoRight] && ledgeOnLeft))
{
    if (ledgeOnLeft)
        mCannotGoLeftFrames = 3;
    else
        mCannotGoRightFrames = 3;

    mCurrentState = CharacterState.Jump;
}
else if (mInputs[(int)KeyInput.Jump])
{
    mSpeed.y = mJumpSpeed;
    mCurrentState = CharacterState.Jump;
}

Selesai sudah! Sekarang menangkap pinggiran harusnya sudah bisa bekerja dengan baik di berbagai situasi.

Membuat karakter bisa melompat tepat setelah meninggalkan platform

Biasanya, untuk membuat melompat lebih mudah dalam game platformer, karakter boleh melompat jika baru saja melewati ujung platform dan sudah tidak berada di tanah. Ini adalah cara yang umum digunakan untuk meminimalkan ilusi bahwa pemain sudah menekan tombol melompat tapi karakter tersebut tidak melompat, yang mungkin akan muncul karena input lag atau pemain menekan tombol tersebut tepat setelah pemain meninggalkan platform.

Mari kita buat implementasi mekanik tersebut. Pertama, kita perlu menambahkan konstanta berisi berapa banyak frame setelah karakter meninggalkan platform pemain masih diperbolehkan untuk melompat.

1	public const int cJumpFramesThreshold = 4;

Kita juga membutuhkan penanda frame di kelas Character, agar kita tahu berapa banyak frame pemain sudah ada di udara.

1	protected int mFramesFromJumpStart = 0;

Sekarang kita atur mFramesFromJumpStart menjadi 0 setiap kita meninggalkan tanah. Kita lakukan ini tepat setelah kita panggil UpdatePhysics.

1	UpdatePhysics();
2
3	if (mWasOnGround && !mOnGround)
4	mFramesFromJumpStart = 0;

Dan kita tambahkan setiap frame selama kita berada di kondisi melompat.

1	case CharacterState.Jump:
2
3	++mFramesFromJumpStart;

Jika kita berada dalam kondisi melompat, kita tidak membolehkan aksi melompat di udara jika kita ada di langit-langit atau kita memiliki kecepatan vertikal yang positif. Kecepatan vertikal yang positif berarti karakter tidak melewatkan aksi melompat.

++mFramesFromJumpStart;

if (mFramesFromJumpStart <= Constants.cJumpFramesThreshold)
{
    if (mAtCeiling || mSpeed.y > 0.0f)
        mFramesFromJumpStart = Constants.cJumpFramesThreshold + 1;
}

Jika tidak demikian, dan tombol melompat ditekan, yang perlu kita lakukan adalah mengatur kecepatan vertikal menjadi nilai melompat seperti jika melompat biasa walaupun karakter sudah berada dalam posisi melompat.

if (mFramesFromJumpStart <= Constants.cJumpFramesThreshold)
{
    if (mAtCeiling || mSpeed.y > 0.0f)
        mFramesFromJumpStart = Constants.cJumpFramesThreshold + 1;
    else if (KeyState(KeyInput.Jump))
        mSpeed.y = mJumpSpeed;
}

Sekian! Kita bisa atur cJumpFramesThreshold ke nilai yang besar seperti 10 frame untuk memastikannya bekerja.

Efek saat ini cukup berlebihan. Jika kita hanya memperbolehkan karakter melompat hanya 1-4 frame setelah meninggalkan platform tidak akan terlalu terlihat bedanya, tapi kurang lebih fitur ini membuat kita bisa mengatur seberapa tegas sistem melompat kita.

Mengubah Skala Objek

Sekarang kita buat agar kita bisa mengubah skala objek. Kita sudah memiliki mScale pada kelas MovingObject, jadi yang perlu kita lakukan adalah memastikan nilai tersebut mempengaruhi AABB dan offset AABB dengan benar.

Pertama, kita ubah kelas AABB agar memiliki komponen skala.

public struct AABB
{
    public Vector2 scale;
    public Vector2 center;
  public Vector2 halfSize;
    
    public AABB(Vector2 center, Vector2 halfSize)
    {
        scale = Vector2.one;
        this.center = center;
        this.halfSize = halfSize;
    }

Sekarang kita ubah halfSize, jadi saat kita mengaksesnya, kita mendapat nilai dari ukuran sesuai skala, bukan ukuran asli.

public Vector2 scale;
public Vector2 center;

private Vector2 halfSize;
public Vector2 HalfSize
{
    set { halfSize = value; }
    get { return new Vector2(halfSize.x * scale.x, halfSize.y * scale.y); }
}

Kita juga ingin bisa mendapatkan atau mengatur nilai X atau Y dari half size, jadi kita perlu membuat fungsi getter dan setter untuk kedua nilai tersebut.

public float HalfSizeX
{
    set { halfSize.x = value; }
    get { return halfSize.x * scale.x; }
}

public float HalfSizeY
{
    set { halfSize.y = value; }
    get { return halfSize.y * scale.y; }
}

Selain mengatur skala AABB, kita juga perlu mengubah skala mAABBOffset, agar setelah kita mengubah skala objek, spritenya akan tetap sesuai dengan AABB seperti pada ukuran aslinya. Sekarang kita kembali ke kelas MovingObject untuk mengubahnya.

private Vector2 mAABBOffset;
public Vector2 AABBOffset
{
    set { mAABBOffset = value; }
    get { return new Vector2(mAABBOffset.x * mScale.x, mAABBOffset.y * mScale.y); }
}

Sama dengan sebelumnya, kita ingin akses terhadap komponen X dan Y yang terpisah.

public float AABBOffsetX
{
    set { mAABBOffset.x = value; }
    get { return mAABBOffset.x * mScale.x; }
}

public float AABBOffsetY
{
    set { mAABBOffset.y = value; }
    get { return mAABBOffset.y * mScale.y; }
}

Akhirnya, kita juga perlu memastikan saat skala diubah di MovingObject, skala pada AABB juga berubah. Skala objek bisa negatif, tapi AABB tidak boleh memiliki skala negatif karena kita mengandalkan half size agar selalu positif. Karena itu, dibanding melemparkan nilai skala ke AABB, kita akan melemparkan skala yang memiliki semua komponen positif.

private Vector2 mScale;
public Vector2 Scale
{
    set {
        mScale = value;
        mAABB.scale = new Vector2(Mathf.Abs(value.x), Mathf.Abs(value.y));
    }
    get { return mScale; }
}
public float ScaleX
{
    set
    {
        mScale.x = value;
        mAABB.scale.x = Mathf.Abs(value);
    }
    get { return mScale.x; }
}
public float ScaleY
{
    set
    {
        mScale.y = value;
        mAABB.scale.y = Mathf.Abs(value);
    }
    get { return mScale.y; }
}

Sekarang yang perlu dilakukan adalah memastikan dimanapun kita menggunakan variabel secara langsung, kita menggunakannya dengan fungsi getter setter. Dimanapun kita menggunakan halfSize.x, kita perlu menggunakan HalfSizeX, jika menggunakan halfSize.y, kita perlu ganti jadi HalfSizeY, dan seterusnya. Dengan menggunakan fitur find and replace akan bisa menyelesaikan masalah ini.

Memeriksa Hasilnya

Pengaturan skala harusnya sudah bekerja dengan baik sekarang, dan karena cara kita menangani fungsi deteksi tabrakan, tidak masalah jika karakter berukuran raksasa atau kecil, karakter tersebut akan bisa berinteraksi dengan peta dengan baik.

Ringkasan

Bagian ini menyelesaikan tugas kita dengan tilemap. Di bagian berikutnya, kita akan mengatur berbagai hal untuk mendeteksi tabrakan antar objek.

Memang memakan waktu dan usaha, tapi sistem ini secara umum harusnya sangat baik. Satu hal yang kurang saat ini adalah kemampuan untuk menangani bidang miring. Banyak game tidak bergantung pada fitur tersebut, tapi sebagian sangat membutuhkannya, jadi itu adalah target pengembangan terbesar untuk sistem ini. Terima kasih sudah membaca sejauh ini, sampai jumpa di bagian berikutnya!