Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Game Development
Gamedevelopment

Amazon Lumberyard: Bagaimana Menggunakan Sistem Grafik Aliran

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Amazon Lumberyard.
Amazon Lumberyard: UI Editor

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana menggunakan sistem grafik mengalir di Lumberyard Amazon. Anda akan bermain dengan sistem scripting visual untuk menghidupkan tombol dan menciptakan interaksi antara kanvas UI dan adegan-adegan 3D Anda. Kemudian, Anda akan membuat script lain untuk memodifikasi adegan 3D dengan mempertimbangkan lokasi avatar Anda. Akhirnya, Anda akan dihadapkan dengan tantangan.

Catatan bahwa Anda disarankan untuk membaca sisa seri untuk memahami sepenuhnya dengan notasi dari bagian ini.

Siapa yang Harus Membaca Seri Tutorial Ini?

Seri tutorial ini terutama ditujukan pada dua kelompok pengembang permainan: orang-orang yang benar-benar tidak terbiasa dengan game engine sama sekali, dan mereka yang akrab dengan game engine lainnya (seperti Unity, Unreal Engine, atau Cry Engine), tetapi tidak dengan Lumberyard. Saya menganggap bahwa Anda memiliki pengetahuan tentang komputer grafis notasi, jadi saya tidak akan secara mendalam menutupi semua notasi.

Aliran grafik

Aliran grafik adalah sistem scripting visual yang memungkinkan Anda untuk melaksanakan kompleks permainan logika tanpa perlu program satu baris kode. Logika dapat dibuat, dimodifikasi dan dihapus dengan hanya beberapa interaksi UI. Aliran grafik ini juga berguna untuk skenario permainan prototyping, efek, dan suara.

Pada intinya, Flow Graph terdiri dari node dan tautan. Yang pertama biasanya mewakili entitas tingkat atau tindakan yang dapat melakukan tindakan tertentu pada entitas target. Yang terakhir digunakan untuk menghubungkan node dan digambarkan sebagai panah yang menghubungkan input dan output antara node.

Flow Graph dapat dibuka dalam dua cara utama; yang pertama adalah melalui menu utama, menggunakan link di View > Open View Pane > Flow Graph.

View - Open View Pane - Flow Graph

Cara kedua adalah melalui ikon mengalir grafik yang tersedia pada Editor toolbar.

Open Flow Graph through the Editor toolbar

Buka Grafik mengalir menggunakan salah satu pilihan yang tersedia.

Flow Graph after being opened for the first time

Editor Flow Graph terdiri dari komponen-komponen berikut:

  1. Node graph: jendela utama grid untuk menampilkan aliran grafik node dan koneksi.
  2. Components: browser tree panel untuk semua node yang dapat Anda gunakan.
  3. Flow Graphs: browser tree panel untuk grafik dan entitas; setiap grafik aliran yang dibuat akan ditempatkan di sini.
  4. Properties: panel untuk menampilkan node input dan output properti.
  5. Search: panel untuk mencari grafik dan node.
  6. SearchResults: panel untuk menampilkan hasil penelusuran.
  7. Breakpoints: panel untuk menampilkan breakpoints; cara terbaik untuk debug permainan atau prototipe.

Flow Graph Scripts

Sebelum melompat tepat ke action, Anda perlu belajar dasar-dasar Flow Graph scripts.

Flow Graph script diatur ke dalam empat kategori yang berbeda dan terkandung dalam pohon folder Flow Graphs (nomor 3 pada gambar sebelumnya) dalam Flow Graph Editor.

  • Level: Direktori ini berisi script yang ditujukan khusus untuk tingkat yang saat ini terbuka. Ini berisi Entities, Components dan Modules. Entitas file adalah flow graphs diciptakan dan terkait dengan entitas saat ini tersedia di tingkat. Komponen serupa, tetapi sekarang grafik aliran terkait dengan komponen tingkat. Modul mewakili daftar modul yang ditujukan khusus untuk tingkat.
  • Global: Berisi tindakan UI yang digunakan untuk merangkum UI logika untuk mudah debugging dan pemeliharaan.
  • Prefabs: Mirip dengan entitas cetakan, Anda juga dapat membuat grafik prefabs. Anda dapat membuat sebuah event di dalam cetakan, memberinya nama, dan kemudian referensi contoh cetakan seperti yang biasa Anda lakukan untuk entitas.
  • File eksternal: Mewakili daftar impor atau dibuat mengalir grafik script.

Aliran grafik Scripting: UI kanvas sebagai tampilan Default

Dalam tutorial sebelumnya, Anda membuat sebuah kanvas UI yang berisi beberapa tombol. Anda mungkin juga ingat bahwa itu tidak sepenuhnya diuji. Sekarang saatnya untuk kembali dan menyelesaikan itu.

Ide utama di balik kanvas UI adalah sebagai berikut:

  1. Ketika Anda menjalankan permainan Anda (Control-G), kanvas UI harus dimuat (bukan tingkat pertama).
  2. Ketika Anda mengklik tombol Start Game, dua tindakan yang berurutan terjadi:
  3. 1) Kanvas UI fade.
  4. 2) Anda memuat CompleteFirstLevel Anda.

Fader komponen

Buka Editor Lumberyard dan kemudian UI Editor. Klik Open dan buka MyCanvases.uicanvas Anda.

Dibawah panel Hierarchy, pilih elemen Background. Sekarang, di bawah panel Properties, klik Add Component... dan kemudian pilih komponen Fader.

Add a Fader component into our Background element

Di bawah Image properties; sebuah properti baru yang disebut Fader akan ditampilkan.

The Fader component added to our Background element

Properti Fader ini akan digunakan untuk menghilangkan kanvas UI ketika Anda memuat tingkat Anda.

Flow Graph Scripting

Mulai dengan membuka CompleteFirstLevel dan kemudian buka Editor Flow Graph. Kosong grafik aliran akan muncul.

Empty Flow Graph

Di bawah panel Components, pilih grafik Start, di bawah kategori Game.

Components Game Start Graph

Catatan bahwa Anda juga dapat menggunakan kata kunci pencarian untuk mencari node tertentu (ketika Anda tahu apa yang harus dicari).

Components Game Start Graph using the Search Keyword

Sekarang, klik pada File > New untuk membuat grafik node baru. Nama Default adalah standar, dan ditempatkan di bawah bagian file eksternal di panel grafik.

Add a new default graph node

Sekarang, tarik Start node ke node grafik (Pusat layar).

Node graph with the Start node

Simpul awal adalah node default yang dijalankan saat Anda memulai permainan Anda menggunakan Switch to Game pilihan. Oleh karena itu, biasanya sebagian besar grafik node akan mulai di simpul ini.

Sebelum menambahkan node diperlukan untuk menampilkan kanvas UI, Anda perlu mempelajari informasi tambahan mengenai node grafik dan sifat node.

Flow Graph Node Deskripsi

Sebuah node direpresentasikan dalam Flow Graph sebagai sebuah kotak dengan input dan output.

MovementMoveEntityTo node graph - A complex node

Sebuah node terdiri dari input port di sebelah kiri untuk menerima informasi dan output port di sisi kanan untuk transmisi informasi. Output port diaktifkan tergantung pada fungsi node. Port dapat memiliki jenis data berikut.

Tipe data Warna Deskripsi
Any Hijau Tidak ditentukan, jenis data yang dapat diterima
Boolean Biru True atau False
EntityID Hijau/merah Nilai unik yang mengidentifikasi entitas di level
Mengambang Putih Nilai floating point 32-bit
Int Merah Sejumlah positif atau negatif 32-bit
UInt64
n/a Sejumlah positif atau negatif 64-bit
String Turquoise Serangkaian karakter yang digunakan untuk menyimpan teks
Vec3 Kuning 3D vektor terdiri dari tiga nilai floating-point. Dapat digunakan untuk menyimpan posisi, sudut, atau nilai warna
Void n/a Digunakan untuk port yang tidak menerima nilai apapun tetapi sebaliknya dipicu untuk lulus aliran kontrol melalui aliran grafik

Dengan mempertimbangkan gambar sebelumnya:

  • Teks dengan latar belakang biru mewakili nama node.
  • Teks dengan latar belakang merah mewakili entitas target.
  • Panah di bagian kiri node mewakili port input MoveEntityTo node.
  • Panah di bagian kanan node mewakili Port output MoveEntityTo node.

Untuk berkonsultasi dokumentasi lengkap mengenai node Flow Graph, Anda harus membaca dokumentasi resmi.

Flow Graph Scripting: Finishing Kanvas UI

Ketika permainan dimulai, Anda ingin memuat kanvas UI. Untungnya, Lumberyard memiliki sebuah node untuk itu. Pilih Load node di bawah UI > Canvas dan seret ke dalam grafik node.

Node graph with the UICanvasLoad node

Node ini memiliki dua sifat-sifat utama:

  1. Aktifkan: itu secara otomatis dipicu ketika node ini disebut.
  2. CanvasPathname: mewakili nama path ke kanvas UI Anda. Di sini Anda harus meletakkan nama kanvas UI yang dibuat dalam tutorial sebelumnya (MyCanvases.uicanvas).

Pilih Load node dan di bawah panel Properties, mengubah properti CanvasPathname ke MyCanvases.uicanvas.

UICanvasLoad changing the CanvasPathname

Ketika Anda menekan tombol Enter, properti CanvasPathname dalam Load node harus mengubah sesuai.

UICanvasLoad with the new CanvasPathname

Load node ini hampir selesai. Langkah Anda selanjutnya adalah untuk menghubungkan Start node ke Load node. Ini dilakukan dengan menyeret link (atau panah) dari output Start menjadi Load Activate input.

Connecting the Start node to the Load node

Jika Anda membuat kesalahan saat menghubungkan Panah, Anda dapat dengan mudah memperbaikinya. Anda harus menggunakan tombol kanan mouse untuk mengklik pada panah dan menghapusnya. Catatan bahwa Anda juga dapat memilih opsi lain seperti Disable, Delay, atau apapun. Aku tidak akan menjelaskan mereka dalam tutorial ini karena mereka tidak penting bagi apa yang ingin kita capai.

Selecting an arrow to show its options

Karena kami ingin menggunakan tombol untuk memicu satu tindakan, kita perlu menambahkan satu ActionListener simpul. Di bawah UI > canvas, drag ActionListener ke grafik node.

Adding the ActionListener into the node graph

ActionListener memiliki tiga sifat yang sangat penting:

  1. CanvasID: Mewakili pengenal unik integer kanvas untuk mendengarkan. Dengan kata lain, berhubungan dengan kanvas yang dimuat di node sebelumnya. Oleh karena itu, harus sama dengan penciri sebagai MyCanvases.uicanvas.
  2. ActionName: Mewakili nama tindakan yang ActionListener akan mendengarkan. Nama tindakan ini dilewatkan ketika pengguna mengklik sebuah tombol.
  3. OnAction: Memicu output benar ketika kanvas mengirimkan tindakan; ia akan mengirimkan order untuk dilakukan.

Saya tidak menutupi Activate lagi karena sudah saya dijelaskan sebelumnya.

Langkah pertama adalah untuk menghubungkan OnLoad untuk Aktifkan ActionListener. Kemudian, untuk lulus id kanvas, Anda harus menghubungkan CanvasID output dan input. Perhatikan bahwa ketika Anda menghubungkan mereka CanvasID = 0 perubahan CanvasID.

ActionName ini tidak sederhana karena kita pertama kali harus mendefinisikan tindakan untuk tombol kami. Idenya adalah untuk menambah satu Action klik tombol Start Game.

Buka UI Editor, dan membuka MyCanvases.uicanvas. Pilih tombol Start Game, dan di bawah panel Properties, menambahkan string NewGameClick di Click Action.

Add an Action Click into the Start Game button

Simpan MyCanvases.uicanvas dan kembali ke editor Flow Graph. Pilih ActionListener node dan ubah properti ActionName ke NewGameClick.

ActionListener with the ActionName property configured

ActionListener sekarang dikonfigurasi. Apa yang tersisa sekarang adalah mengkonfigurasi aksi yang dilakukan ketika ActionListener ini dipicu. Memanggil kembali komponen Fader yang ditambahkan sebelumnya. Sekarang saatnya untuk menggunakannya.

Untuk itu, Anda perlu menambahkan node Animation dalam UI > Fader pohon ke node grafik.

UI Fader Animation node representation

Properties baru untuk dilihat adalah:

  1. ElementID: Mewakili pengenal unik integer unsur Fader.
  2. StartValue: Mewakili nilai untuk Fader untuk mulai; ini berkisar dari 0 ke 1.
  3. TargetValue: Mewakili nilai untuk Fader untuk mengakhiri; sekali lagi, ini berkisar dari 0 ke 1.
  4. Kecepatan: Mewakili detik yang diambil oleh Fader memudar; 1 mewakili 1 detik, 2 akan menjadi dua kali lebih cepat. 0 merupakan tindakan instan.
  5. OnComplete: Memicu output ketika Fader selesai.

Langkah pertama adalah untuk memverifikasi ElementID dari komponen Fader. Untuk itu, buka UI Editor, memuat kanvas, dan pilih komponen Background. Dalam panel Properties, mengambil melihat nomor dalam elemen Id.

Background with Element id and Fader component highlighted

Perhatikan bahwa Anda memilih elemen Background, karena itu adalah salah satu yang memiliki komponen Fader. Dekat UI Editor dan mengubah ElementID node Animation ke 2.

Selanjutnya, mengubah StartValue ke 1 dan TargetValue ke 0. Biarkan nilai Speed sebagai default.

Animation node configured

Sekarang, connect OnAction (ActionListener) ke input Activate (Animation). Sekali lagi, menghubungkan CanvasID bersama-sama (Load node ke node Animation).

Flow Graph ini hampir selesai. Untuk memahami apa hilang, memainkan permainan (Control-G). Apa yang Anda lihat? Menu Anda dengan tindakan yang benar di dalam tombol Start Game, tapi ada kursor mouse untuk membantu Anda. Mari kita memperbaiki itu, kemudian.

Mencari node MouseCursor di dalam pohon Input dan menambahkannya ke node grafik. Node ini hanya memiliki dua input (Show dan Hide). Keduanya cukup jelas, kan?

Sambungkan Start output (Start node) ke input Show (MouseCursor node). Kemudian, sambungkan OnAction output ke input Hide.

MouseCursor node configured

Anda sekarang dapat menjalankan permainan dan mengujinya jika semuanya OK. Anda akan menyadari bahwa.

Namun, kami akan melakukan satu langkah tambahan kinerja. Karena kita tidak ingin untuk membuat permainan dengan kebocoran memori, kita harus masuk ke dalam kebiasaan dalam melakukan sesuatu dengan benar. Setelah animasi fade berakhir, kami harus unload kanvas.

Tambahkan node Unload (UI > Canvas) sebagai node terakhir anda ke node grafik. Hubungkan OnComplete (Animation) ke Aktifkan node (Unload). Akhirnya, menghubungkan CanvasID bersama-sama (Load node ke node Unload).

Flow graph lengkap:

The complete mygraphdemo flow graph

Simpan flow graph anda dan beri nama mygraphdemo.

Lebih Banyak Scripting Graph Flow

Langkah berikutnya dari tutorial ini adalah untuk menciptakan graph flow lain. Namun, kali ini, anda akan langsung berinteraksi dengan benda-benda dalam 3D scene untuk membangun grafik. Ide utama adalah dengan menggunakan lokasi pemain untuk berinteraksi dengan kedekatan pemicu untuk menghidupkan lampu.

Di RollupBar, pilih Entity > Triggers dan drag Proximity Trigger ke adegan 3D.

Add a Proximity Trigger Entity

Tempat Proximity Trigger dekat lampu. Kotak kuning 3d mewakili daerah memicu.

The Proximity Trigger at the right location

Klik kanan Proximity Trigger dan pilih opsi Create Flow Graph.

Proximity Trigger selected to create a new flow graph

Beri nama TriggerGraph dan klik OK. Editor Flow Graph akan terbuka. Anda akan melihat bahwa kali ini grafik akan ditempatkan di dalam Level > Entities bagian.

The representation of the Level Entities graph

Sekarang, mengatur ulang antarmuka anda untuk melihat Proximity Trigger, lampu (Light1) dan Flow Graph Editor pada waktu yang sama.

Dual interface options with the Proximity Trigger and the Flow Graph

Pilih Proximity Trigger dan, di dalam grafik node, gunakan tombol kanan mouse Anda dan pilih opsi Add Selected Entity.

Proximity Trigger added into the node graph

Node ProximityTrigger baru akan muncul.

ProximityTrigger node inside the flow graph

Satu-satunya properti yang akan kita gunakan adalah output Enter dan Leave. Yang pertama dipicu ketika pemain memasuki area Proximity Trigger, sementara yang kedua dipicu ketika pemain meninggalkan area Proximity Trigger.

Selanjutnya, pilih elemen Light1 Anda dan Hapus centang opsi Active dalam panel Entity Properties.

Light1 with the Active option not selected

Dengan Light1 yang dipilih, di dalam Flow Graph gunakan tombol mouse sebelah kanan dan pilih Add Selected Entity lagi.

Light node inside the flow graph

Sekarang Anda harus menghubungkan ProximityTrigger node dengan node Light. Hubungkan output Enter ke input Enable. Akhirnya, hubungkan output Leave ke Diseble input.

ProximityTrigger node connected to the Light node inside the node graph

Menyimpan flow graph dan beri nama TriggerGraph. Sekarang saatnya untuk menjalankan permainan dan memvalidasi grafik aliran baru. Segala sesuatu harus bekerja seperti yang diharapkan.

Tantangan

Untuk menguji pengetahuan yang Anda peroleh sejauh ini, Anda sekarang ditantang untuk menciptakan tempat Lumberyard getting-started-completed-level. Untuk itu, Anda akan perlu untuk bermain dengan brushes, lighting, materials, textures, terrains, dan flow graphs. Singkatnya, menerapkan segala sesuatu yang telah anda Pelajari sejauh ini. Tingkat akhir anda akan terlihat seperti berikut:

Complete level for the challenge

Kesimpulan

Ini mengakhiri tutorial ini pada Lumberyard. Dalam tutorial ini, saya telah menunjukkan kepada Anda bagaimana menggunakan Flow Graph System. Anda telah bermain dengan sistem scripting visual untuk mengatur UI kanvas sebagai tampilan default Anda, dan telah menciptakan interaksi antara kanvas UI dan 3D scene Anda. Kemudian, Anda menciptakan sebuah script untuk memodifikasi 3D scene, dengan mempertimbangkan lokasi pemain anda dan kedekatan memicu. Jika anda memiliki pertanyaan atau komentar, seperti biasa, jangan ragu untuk menjatuhkan garis di komentar.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.