Bagaimana Mengimplementasikan dan Menggunakan Antrian Pesan di Game Anda.

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

Sebuah permainan biasanya dibuat dari beberapa entitas yang berbeda yang berinteraksi satu sama lain. Interaksi tersebut cenderung sangat dinamis dan sangat terkait dengan gameplay. Tutorial ini mencakup konsep dan implementasi sistem antrian pesan yang dapat menyatukan interaksi entitas, membuat kode anda mudah dikelola dan mudah dipelihara karena tumbuh dalam kompleksitas.

Pengantar

Bom bisa berinteraksi dengan karakter dengan meledak dan menyebabkan kerusakan, sebuah alat medis dapat menyembuhkan suatu entitas, sebuah kunci bisa membuka pintu, dan seterusnya. Interaksi dalam permainan tidak terbatas, tapi bagaimana kita bisa menjaga kode permainan tetap terkendali saat masih bisa menangani semua interaksi itu? Bagaimana kita memastikan kodenya dapat berubah dan terus bekerja saat interaksi baru dan tak terduga muncul?

Interactions in a game tend to grow in complexity very quickly — Interaksi dalam permainan cenderung tumbuh dalam kompleksitas dengan sangat cepat.

Seiring interaksi ditambahkan (terutama yang tak terduga), kode anda akan terlihat lebih dan lebih berantakan. Implementasi yang naif akan segera membawa anda mengajukan pertanyaan seperti:

"Ini adalah entitas A, jadi saya harus memanggil metode damage() di atasnya kan? Atau itu damageByItem ()? Mungkin DamageByWeapon () ini merupakan metode yang tepat? "

Bayangkan bahwa kekacauan kekacauan menyebar ke semua entitas permainan Anda, karena mereka semua berinteraksi satu sama lain dengan cara yang berbeda dan aneh. Untungnya, ada cara yang lebih baik, sederhana, dan lebih mudah dikelola untuk melakukannya.

Antrian Pesan

Masukkan message queue (antrian pesan) . Ide dasar dibalik konsep ini adalah menerapkan semua interaksi game sebagai sistem komunikasi (yang masih bisa digunakan saat ini): pertukaran pesan. Orang telah berkomunikasi melalui pesan (surat) selama berabad-abad karena ini adalah sistem yang efektif dan sederhana.

Dalam layanan pos dunia nyata kita, isi setiap pesan bisa berbeda, namun cara mereka dikirim dan diterima secara fisik tetap sama. Seorang pengirim memasukkan informasinya ke dalam amplop dan mengirimkannya ke tujuan. Tujuan dapat menjawab (atau tidak) dengan mengikuti mekanisme yang sama, cukup ganti bidang "dari / ke" pada amplop.

Interactions made using a message queue system — Interaksi dilakukan dengan menggunakan sistem antrian pesan.

Dengan menerapkan gagasan itu pada permainan Anda, semua interaksi antar entitas dapat dilihat sebagai pesan. Jika sebuah entitas game ingin berinteraksi dengan yang lain (atau kelompoknya), yang harus dilakukan hanyalah mengirim pesan. Tujuan akan menangani atau bereaksi terhadap pesan berdasarkan isinya dan siapa pengirimnya.

Dalam pendekatan ini, komunikasi antar entitas game menjadi terpadu. Semua entitas dapat mengirim dan menerima pesan. Tidak peduli seberapa kompleks atau anehnya interaksi atau pesannya, saluran komunikasi selalu tetap sama.

Pada bagian selanjutnya, saya akan menjelaskan pada anda bagaimana caranya menerapkan pendekatan antrian pesan pada permainan anda.

Merancang Amplop (Pesan)

Mari kita mulai dengan merancang amplop, yang merupakan elemen paling mendasar dalam sistem antrian pesan.

Amplop bisa digambarkan seperti pada gambar di bawah ini:

Dua bidang pertama (sender dan destination) adalah referensi ke entitas yang dibuat dan entitas yang akan menerima pesan ini. Dengan menggunakan bidang-bidang itu, baik pengirim maupun penerima dapat mengetahui dari mana pesan tersebut akan dikirim dan dari mana asalnya.

Dua bidang lainnya (Type dan Data) bekerja sama untuk memastikan pesan ditangani dengan benar. Bagian Type menggambarkan apa pesan ini; misalnya, jika tipe ini "damage", penerima akan menangani pesan ini sebagai perintah untuk mengurangi poin kesehatan; jika tipenya adalah "pursue", penerima akan menganggapnya sebagai instruksi untuk mengejar sesuatu - dan seterusnya.

Bagian data terhubung langsung dengan bidang type. Seperti contoh sebelumnya, jika tipe pesannya adalah "damage", maka bidang data akan berisi angka-katakan, 10-yang menggambarkan jumlah kerusakan yang harus diaplikasikan pada poin kesehatan. Jika jenis pesannya adalah "pursue", data akan berisi objek yang menggambarkan target yang harus diupayakan.

Bidang data dapat berisi informasi apapun, yang menjadikan amplop sarana komunikasi yang serbaguna. Apa pun dapat ditempatkan di bidang itu: bilangan bulat, pelampung, senar, dan bahkan benda lainnya. Aturan praktisnya adalah bahwa penerima harus tahu apa yang ada di bidang data berdasarkan apa yang ada di bidang type.

Semua teori tersebut dapat diterjemahkan dalam kelas yang sangat sederha bernama Message . Ini mengandung empat properti. Satu untuk setiap bidang.

Message = function (to, from, type, data) {
    // Properties
    this.to = to;        // a reference to the entity that will receive this message
    this.from = from;    // a reference to the entity that sent this message
    this.type = type;    // the type of this message
    this.data = data;    // the content/data of this message
};

Sebagai contoh penggunaan ini, jika suatu entitas A ingin mengirim sebuah pesan "damage" ke entitas B, hal yang harus dilakukan adalah melakukan instantiate objek kelas Message, setel properti untuk B, atur properti dari dirinya sendiri (entity A), atur type untuk "damage" dan terakhir, atur data ke beberapa nomor (10, misalnya):

// Instantiate the two entities
var entityA = new Entity();
var entityB = new Entity();

// Create a message to entityB, from entityA,
// with type "damage" and data/value 10.
var msg = new Message();

msg.to = entityB;
msg.from = entityA;
msg.type = "damage";
msg.data = 10;

// You can also instantiate the message directly
// passing the information it requires, like this:
var msg = new Message(entityB, entityA, "damage", 10);

Sekarang kita punya cara untuk membuat pesan, sekarang saatnya memikirkan kelas yang akan menyimpan dan mengantarkannya.

Menerapkan Antrian

Kelas yang bertanggung jawab untuk menyimpan dan menyampaikan pesan akan dipanggil sebagai MessageQueue (antrian pesan). Ini akan bekerja sebagai kantor pos: semua pesan diserahkan ke kelas ini, yang memastikan mereka akan dikirim ke tempat tujuan mereka.

Untuk saat ini, kelas MessageQueue akan memiliki struktur yang sangat sederhana:

/**
 * This class is responsible for receiving messages and
 * dispatching them to the destination.
 */
MessageQueue = function () {
    this.messages = [];  // list of messages to be dispatched
};

// Add a new message to the queue. The message must be an
// instance of the class Message.
MessageQueue.prototype.add = function(message) {
    this.messages.push(message);
};

Properti messages adalah sebuah array. Ini akan menyimpan semua pesan yang akan dikirimkan oleh MessageQueue. Metode add() menerima objek kelas Message sebagai parameter, dan menambahkan objek itu ke dalam daftar pesan.

Begini cara contoh entitas A kita sebelumnya mengirim pesan pada entitas B tentang kerusakan yang akan bekerja dengan menggunakan kelas MessageQueue:

// Instantiate the two entities and the message queue
var entityA = new Entity();
var entityB = new Entity();
var messageQueue = new MessageQueue();

// Create a message to entityB, from entityA,
// with type "damage" and data/value 10.
var msg = new Message(entityB, entityA, "damage", 10);

// Add the message to the queue
messageQueue.add(msg);

Sekaranf kita memiliki cara membuat dan menyimpan pesan dalam antiran (quenue). Sekarang waktunya membuat mereka mencapai tujuannya.

Mengirim Pesan

Untuk membuat kelas MessageQueue sebenarnya kirimkan pesan yang diposting, pertama kita perlu mendefinisikannya bagaimana entitas akan menangani dan menerima pesan. Cara termudah adalah dengan menambahkan metode yang dinamai onMessage () untuk setiap entitas yang dapat menerima pesan:

/**
 * This class describes a generic entity.
 */
Entity = function () {
    // Initialize anything here, e.g. Phaser stuff
};

// This method is invoked by the MessageQueue
// when there is a message to this entity.
Entity.prototype.onMessage = function(message) {
    // Handle new message here
};

Kelas MessageQueue akan memanggil metode onMessage () dari masing-masing entitas yang harus menerima pesan. Parameter yang dilewatkan ke metode tersebut adalah pesan yang disampaikan oleh sistem antrian (dan diterima oleh tujuan).

Kelas MessageQueue akan mengirimkan pesan ke antreannya sekaligus, di metode dispatch():

/**
 * This class is responsible for receiving messages and
 * dispatching them to the destination.
 */
MessageQueue = function () {
    this.messages = [];  // list of messages to be dispatched
};

MessageQueue.prototype.add = function(message) {
    this.messages.push(message);
};

// Dispatch all messages in the queue to their destination.
MessageQueue.prototype.dispatch = function() {
    var i, entity, msg;

    // Iterave over the list of messages
    for(i = 0; this.messages.length; i++) {
        // Get the message of the current iteration
        msg = this.messages[i];

        // Is it valid?
        if(msg) {
            // Fetch the entity that should receive this message 
            // (the one in the 'to' field)
            entity = msg.to;

            // If that entity exists, deliver the message.
            if(entity) {
                entity.onMessage(msg);
            }

            // Delete the message from the queue
            this.messages.splice(i, 1);
            i--;
        }
    }
};

Metode ini mengulai semua pesan dalam antrian dan, untuk setiap pesan, bidang to yang digunakan untuk mengambil referensi ke penerima. Metode onMessage () penerima kemudian dipanggil, dengan pesan saat ini sebagai parameter, dan pesan yang disampaikan kemudian dihapus dari daftar MessageQueue. Proses ini diulang sampai semua pesan dikirim.

Menggunakan Antrian Pesan

Saatnya untuk melihat semua rincian pelaksanaan ini bekerja sama. Mari kita gunakan sistem antrian pesan kita dalam sebuah demo yang sangat sederhana yang terdiri dari beberapa entitas bergerak yang saling berinteraksi satu sama lain. Agar sederhana, kita akan bekerja dengan tiga entitas: Healer (penyembuh), Runner (pelari) dan Hunter (pemburu).

Runner memiliki bar kesehatan dan bergerak secara acak. Healer akan menyembuhkan setiap Runner yang lewat didekatnya; di sisi lain, Hunter akan menimbulkan kerusakan di tempat terdekat dari Runner. Semua interaksi akan ditangani dengan menggunakan sistem antrian pesan.

Menambahkan Antrian Pesan

Mari kita mulai dengan membuat PlayState yang berisi daftar entitas (healer, runner, dan hunter) dan sebuah instance dari kelas MessageQueue:

var PlayState = function() {
    var entities;  	// list of entities in the game
	var messageQueue;	// the message queue (dispatcher)

	this.create = function() {
		// Initialize the message queue
		messageQueue = new MessageQueue();

		// Create a group of entities.
		entities = this.game.add.group();
	};

	this.update = function() {
		// Make all messages in the message queue
    	// reach their destination.
		messageQueue.dispatch();
	};
};

Dalam lingkaran permainan (game loop), diwakili oleh metode update(), antrian pesan dari metode dispatch() dipanggil, jadi semua pesan dikirim di akhir setiap frame permainan.

Menambahkan Runner

Kelas Runner memiliki struktur sebagai berikut:

/**
 * This class describes an entity that just
 * wanders around.
 */
Runner = function () {
    // initialize Phaser stuff here...
};

// Invoked by the game on each frame
Runner.prototype.update = function() {
    // Make things move here...
}

// This method is invoked by the message queue
// to make the runner deal with incoming messages.
Runner.prototype.onMessage = function(message) {
    var amount;

    // Check the message type so it's possible to
    // decide if this message should be ignored or not.
    if(message.type == "damage") {
        // The message is about damage.
        // We must decrease our health points. The amount of
        // this decrease was informed by the message sender
        // in the 'data' field.
        amount = message.data;
        this.addHealth(-amount);

    } else if (message.type == "heal") {
        // The message is about healing.
        // We must increase our health points. Again the amount of
        // health points to increase was informed by the message sender
        // in the 'data' field.
        amount = message.data;
        this.addHealth(amount);

    } else {
        // Here we deal with messages we are not able to process.
        // Probably just ignore them :)
    }
};

Bagian yang paling penting adalah metode onMessage() yang dipanggil oleh antrian pesan setiap kali ada pesan baru untuk contoh ini. Seperti yang sudah dijelaskan sebelumnya, bidang type dalam pesan tersebut digunakan untuk memutuskan apa komunikasi ini.

Berdasarkan jenis pesannya, tindakan yang benar dilakukan: jika tipe pesannya adalah "damage", titik kesehatan menurun; jika tipe pesannya adalah "heal", poin kesehatan meningkat. Jumlah poin kesehatan yang meningkat atau menurun ditentukan oleh pengirim di bidang pesan data.

Dalam PlayState, kami menambahkan beberapa runner ke daftar entitas:

var PlayState = function() {
    // (...)

	this.create = function() {
		// (...)

		// Add runners
		for(i = 0; i < 4; i++) {
			entities.add(new Runner(this.game, this.game.world.width * Math.random(), this.game.world.height * Math.random()));
		}
	};

	// (...)
};

Hasilnya adalah empat pelari bergerak secara acak.:

Menambahkan Hunter (pemburu)

Kelas Hunter mengikuti struktur sebagai berikut:

/**
 * This class describes an entity that just
 * wanders around hurting the runners that pass by.
 */
Hunter = function (game, x, y) {
    // initialize Phaser stuff here
};

// Check if the entity is valid, is a runner, and is within the attack range.
Hunter.prototype.canEntityBeAttacked = function(entity) {
    return  entity && entity != this &&
            (entity instanceof Runner) &&
            !(entity instanceof Hunter) &&
            entity.position.distance(this.position) <= 150;
};

// Invoked by the game during the game loop.
Hunter.prototype.update = function() {
    var entities, i, size, entity, msg;

    // Get a list of entities
    entities = this.getPlayState().getEntities();

    for(i = 0, size = entities.length; i < size; i++) {
        entity = entities.getChildAt(i);

        // Is this entity a runner and is it close?
        if(this.canEntityBeAttacked(entity)) {
            // Yeah, so it's time to cause some damage!
            msg = new Message(entity, this, "damage", 2);

            // Send the message away!
            this.getMessageQueue().add(msg); // or just entity.onMessage(msg); if you want to bypass the message queue for some reasong.
        }
    }
};

// Get a reference to the game's PlayState
Hunter.prototype.getPlayState = function() {
    return this.game.state.states[this.game.state.current];
};

// Get a reference to the game's message queue.
Hunter.prototype.getMessageQueue = function() {
    return this.getPlayState().getMessageQueue();
};

Hunter juga akan bergerak, tapi akan menyebabkan kerusakan pada semua pelari yang mendekat. Perilaku ini diterapkan di metode update(), di mana semua entitas permainan diperiksa dan pelari diberi pesan tentang kerusakan.

Pesan kerusakan dibuat sebagai berikut:

1	msg = new Message(entity, this, "damage", 2);

Pesan berisi informasi tentang tujuan (entitas, dalam kasus ini, yang merupakan entitas yang dianalisis dalam iterasi saat ini), pengirim (ini, yang mewakili hunter yang melakukan serangan tersebut), jenis pesannya (" damage ") dan jumlah damage / kerusakan (2, dalam hal ini, ditugaskan ke bidang pesan data).

Pesan tersebut kemudian diposting ke tujuan melalui perintah this.getMessageQueue () menambahkan (msg), yang menambahkan pesan yang baru dibuat ke antrian pesan.

Akhirnya, kita tambahkan Hunter ke daftar entitas di PlayState:

var PlayState = function() {
    // (...)

    this.create = function() {
		// (...)
        
		// Add hunter at position (20, 30)
    	entities.add(new Hunter(this.game, 20, 30));
	};

	// (...)
};

Hasilnya adalah beberapa runner bergerak, menerima pesan dari hunter saat mereka saling berdekatan:

Saya menambahkan amplop terbang sebagai bantuan visual untuk membantu menunjukkan apa yang sedang terjadi.

Menambakan Healer (Penyembuh)

Kelas Healer memiliki struktrur sebagai berikut:

/**
 * This class describes an entity that is
 * able to heal any runner that passes nearby.
 */
Healer = function (game, x, y) {
    // Initializer Phaser stuff here
};

Healer.prototype.update = function() {
    var entities, i, size, entity, msg;

    // The the list of entities in the game
    entities = this.getPlayState().getEntities();

    for(i = 0, size = entities.length; i < size; i++) {
        entity = entities.getChildAt(i);

        // Is it a valid entity?
        if(entity) {
            // Check if the entity is within the healing radius
            if(this.isEntityWithinReach(entity)) {
                // The entity can be healed!
                // First of all, create a new message regaring the healing
                msg = new Message(entity, this, "heal", 2);

                // Send the message away!
                this.getMessageQueue().add(msg); // or just entity.onMessage(msg); if you want to bypass the message queue for some reasong.
            }
        }
    }
};

// Check if the entity is neither a healer nor a hunter and is within the healing radius.
Healer.prototype.isEntityWithinReach = function(entity) {
    return !(entity instanceof Healer) && !(entity instanceof Hunter) && entity.position.distance(this.position) <= 200;
};

// Get a reference to the game's PlayState
Healer.prototype.getPlayState = function() {
    return this.game.state.states[this.game.state.current];
};

// Get a reference to the game's message queue.
Healer.prototype.getMessageQueue = function() {
    return this.getPlayState().getMessageQueue();
};

Kode dan strukturnya sangat mirip dengan kelas Hunter, kecuali beberapa perbedaan. Sama halnya dengan hunter yang diimplementasikan, metode update() healer diualang atas daftar entitas dalam permainan, pesan setiap entitas dalam jangkauan penyembuhannya:

1	msg = new Message(entity, this, "heal", 2);

Pesan ini juga memiliki tujuan (entitas), pengirim (ini, penyembuh yang melakukan aksinya), jenis pesan ("heal / penyembuhan") dan jumlah titik penyembuhan (2, yang ditugaskan di bidang pesan data).

Kami menambahkan healer ke daftar entitas di PlayState cara yang sama dengan hunter kita dan hasilnya adalah adegan dengan runner, hunter dan healer:

Dan itu dia! Kita memiliki tiga entitas yang berbeda yang berinteraksi satu sama lain dengan bertukar pesan.

Diskusi Mengenai Fleksibilitas

Sistem antrian pesan ini merupakan cara serbaguna untuk mengelola interaksi dalam sebuah game. Interaksi dilakukan melalui saluran komunikasi yang bersatu dan memiliki satu antarmuka yang mudah digunakan dan diimplementasikan.

Seiring bertambahnya permainan anda berada dalam kompleksitas, interaksi baru mungkin dibutuhkan. Beberapa dari mereka mungkin benar-benar tak terduga, jadi anda harus menyesuaikan kode anda untuk menghadapinya. Jika anda menggunakan sistem antrian pesan, masalah ada pada menambahkan pesan baru di suatu tempat dan menanganinya di tempat lain.

Misalnya, bayangkan Anda ingin membuat hunter berinteraksi dengan healer; Anda hanya perlu membuat hunter mengirim pesan dengan interaksi baru-misalnya, "flee" - dan pastikan bahwa healer bisa mengatasinya di metode onMessage:

// In the Hunter class:
Hunter.prototype.someMethod = function() {
    // Get a reference to a nearby healer
    var healer = this.getNearbyHealer();
    
    // Create message about fleeing a place
    var place = {x: 30, y: 40};
    var msg = new Message(entity, this, "flee", place);

    // Send the message away!
    this.getMessageQueue().add(msg);
};

// In the Healer class:
Healer.prototype.onMessage = function(message) {
    if(message.type == "flee") {
        // Get the place to flee from the data field in the message
        var place = message.data;
        
        // Use the place information
        flee(place.x, place.y);
    }
};

Mengapa Tidak Mengirim Pesan secara Langsung?

Meski bertukar pesan antar entitas bisa bermanfaat, anda mungkin berpikir mengapa MessageQueue sangat dibutuhkan. Tidak bisakah anda memanggil receiver itu? Metode onMessage() sendiri tidak mengandalkan pada MessageQueue, seperti pada kode di bawah ini?

Hunter.prototype.someMethod = function() {
    // Get a reference to a nearby healer
    var healer = this.getNearbyHealer();
    
    // Create message about fleeing a place
    var place = {x: 30, y: 40};
    var msg = new Message(entity, this, "flee", place);

    // Bypass the MessageQueue and directly deliver
    // the message to the healer.
    healer.onMessage(msg);
};

Anda pasti bisa menerapkan sistem pesan seperti itu, tapi penggunaan sebuah MessageQueue memiliki beberapa keuntungan.

Misalnya, dengan memusatkan pengiriman pesan, anda dapat menerapkan beberapa fitur keren seperti pesan tertunda, kemampuan untuk memberi pesan pada sekelompok entitas, dan informasi debug visual (seperti amplop terbang yang digunakan dalam tutorial ini).

Ada ruang untuk kreativitas di kelas MessageQueue, terserah pada anda dan persyaratan permainan anda.

Kesimpulan

Menangani interaksi antara entitas permainan menggunakan sistem antrian pesan adalah cara agar kode anda tetap teratur dan siap dimasa depan. Interaksi baru dapat dengan mudah dan cepat ditambahkan, bahkan gagasan anda yang paling rumit sekalipun, selama mereka dienkapsulasi sebagai pesan.

Seperti yang dibahas dalam tutorial, anda bisa mengabaikan penggunaan antrian pesan utama dan hanya mengirim pesan langsung ke entitas. Anda juga bisa memusatkan komunikasi menggunakan pengiriman (kelas MessageQueue dalam kasus kita) untuk memberi ruang bagi fitur baru di masa depan, seperti pesan tertunda.

Saya harap Anda menemukan pendekatan ini berguna dan menambahkannya ke sabuk utilitas pengembang game Anda. Metode ini mungkin tampak berlebihan untuk proyek kecil, namun pastinya akan membuat Anda sedikit sakit kepala dalam jangka panjang untuk permainan yang lebih besar.