Engine

เกมเอนจิน scene graph, component, การเขียนสคริปต์, ฟิสิกส์, ไปป์ไลน์ PBR, ตัวแก้ไขโลก และ native build สำหรับเดสก์ท็อปและมือถือ

สรุปในประโยคเดียว#

เกมเอนจินเต็มรูปแบบในเบราว์เซอร์: สร้างฉาก ใส่พฤติกรรมให้มัน กด play แล้วส่งออก ไปเป็นเว็บ หรือเป็นไฟล์ไบนารีเนทีฟสำหรับเดสก์ท็อปและมือถือ

มันคือสตูดิโอที่ใหญ่ที่สุดใน aukimi แบบทิ้งห่างคู่แข่ง หน้านี้จะไล่เรียงมันตามที่ อินเทอร์เฟซทำจริง คือตามลิ้นชักที่แต่ละแผงอาศัยอยู่ แทนที่จะเรียงฟีเจอร์ตามตัวอักษร

การจัดวางหน้าจอ#

Engine พร้อม Scene Graph, วิวพอร์ต, inspector และ console

แถบเมนูFile · Edit · View · Windows · Run · Plugins
แถบเครื่องมือชื่อโปรเจกต์, เลิกทำ/ทำซ้ำ, สวิตช์โหมดวิวพอร์ต (3D · 2.5D · 2D · TXT), ตัวเลือกฉาก, ปุ่มแผงทั้งสี่, FX Master, HUD, กล่องความละเอียด, transport (play, pause, stop) และ Build
ซ้ายคอลัมน์ไอคอน, Scene Graph, List, Audio, Console และแผงที่มันเปิดขึ้นมา
กลางวิวพอร์ต พร้อม gizmo bar ของตัวเอง (translate, rotate, scale, world/local, กริด, สแนป, จัดเฟรม) และตัวเลือกคุณภาพ
ขวาinspector สำหรับ entity ที่เลือกอยู่
ล่างConsole และ Profiler เคียงข้างกัน
แถบสถานะโหมด, ขนาดวิวพอร์ต, จำนวน entity, สถานะกริด

ปุ่มแผงทั้งสี่#

แถบเครื่องมือของ Engine: ชื่อฉาก, undo, สวิตช์โหมดวิวพอร์ต, ปุ่มแผงทั้งสี่ และ transport

ปุ่มเหล่านี้ไม่ได้ทำงานแบบเดียวกันหมด และความต่างนี้ควรรู้ไว้ก่อนที่คุณจะไปหา อะไรสักอย่าง:

ปุ่มพฤติกรรม
Systemsเปิดลิ้นชักหนึ่ง
Toolsเปิดลิ้นชักเดียวกัน Systems กับ Tools ปิดกันเอง
Assetsเปิด/ปิด dock ที่ค้างอยู่ตลอด
Scriptsเปิดโมดัลหนึ่ง

Systems กับ Tools ใช้ช่องเดียวกันโดยตั้งใจ มันถูกวางไว้เคียงข้างกันเพื่อให้เห็น ชัดว่าเป็นแบบนั้นจริง ๆ

Systems#

ระบบย่อยของเอนจินเอง: สิ่งที่ฉากหนึ่ง มี มากกว่าสิ่งที่คุณ ใช้สร้าง

กลุ่มแผง
Pluginsตัวเรียกดูปลั๊กอิน
RenderingRendering · Rendering Pipeline · Look Presets · Shader Lab · Render Style · Shadows · Mesh LOD · Post Process Volumes
GameplayMultiplayer room · Physics · AI & Navigation · Gameplay Zones
WorldScene Graph · Level Streaming · Baking · Light Probes · Decals

Rendering#

สวิตช์ FX Master บนแถบเครื่องมือเปิด/ปิดทั้ง post pipeline ได้ในคลิกเดียว: วิธีที่เร็วที่สุดในการดูว่ามันกินต้นทุนไปเท่าไหร่ ทีละตัว: bloom, depth of field, SSR, SSAO, GTAO, SSGI, temporal AA, FXAA, motion blur, volumetric fog, contact shadows, colour grading, film grain, chromatic aberration, vignette และ tonemapping บวกกับเรขาคณิตสไตล์ Nanite และ Hi-Z occlusion

Look Presets คือการตั้งค่าทั้งชุดของสิ่งข้างต้น Render Style เปลี่ยนโทน ของภาพ ไปทางสไตไลซ์แทนที่จะเป็นภาพสมจริง Shader Lab คือที่ที่คุณเขียน shader ของตัวเอง Mesh LOD และ Post Process Volumes เป็นสองตัวที่คุ้มค่า ที่สุดบนฉากขนาดใหญ่: level-of-detail ต่อ mesh และ post-processing ที่มีผลเฉพาะ ภายใน volume เท่านั้น

ตัวเรนเดอร์คือ Babylon.js มันเริ่มต้นด้วย WebGL แล้วสลับตัวเองไปใช้ WebGPU เมื่อเบราว์เซอร์รองรับ และย้อนกลับไปใช้ WebGL เองถ้าล้มเหลว

ระบบ Gameplay#

Physics ครอบคลุมทั้งตัวคำนวณฟิสิกส์ 3D (Havok) และตัว 2D AI & Navigation คือ navmesh และเอเจนต์บนมัน Gameplay Zones คือ trigger volume ที่มี พฤติกรรมผูกไว้ Multiplayer room เชื่อมฉากเข้ากับเซิร์ฟเวอร์ Colyseus (ดู ด้านล่าง)

ระบบ World#

Level Streaming โหลดและเลิกโหลดส่วนต่าง ๆ ของด่านตามที่ผู้เล่นเคลื่อนที่ Baking คำนวณแสงล่วงหน้า Light Probes จับแสงทางอ้อมและการสะท้อนที่จุด ต่าง ๆ ในอวกาศ Decals ฉายรายละเอียดลงบนพื้นผิวโดยไม่ต้องเพิ่มเรขาคณิต

Tools#

สิ่งที่คุณ ใช้สร้าง

กลุ่มแผง
EditorsScripts · Blueprint Editor · UI Editor · Tilemap
WorldSky Studio · Terrain · Water · Tree Generator · Plant Generator · Rock Generator · Kitbash
GameplayInventory · Data tables · Dialogue Trees
AnimationTimeline · Cinematic Sequencer · Camera Tools
AudioAudio Manager
DebugProfiler

ตัวสร้างโลก#

Terrain, water, sky และตัวสร้างเนื้อหาอีกสี่ตัว คือ trees, plants, rocks และ ชิ้นส่วน kitbash มันมีบทของตัวเองอยู่ด้านล่าง

การสร้างเนื้อหา Gameplay#

Inventory, Data tables (Tools → Data) และ Dialogue Trees คือ สามตัวแก้ไขที่ทำให้เกมมีเนื้อหาได้โดยไม่ต้องให้เนื้อหานั้นอยู่ในโค้ด อธิบายละเอียดด้านล่าง

Animation#

Timeline สำหรับแอนิเมชันของ entity, Cinematic Sequencer สำหรับช็อต และ Camera Tools สำหรับการจัดเฟรม ดู Animation และกล้อง

ตัวแก้ไขโลก#

เจ็ดแผงภายใต้ Tools → World มันคือวิธีเร็วในการเติมเต็มฉาก และเป็นเหตุผลที่ ด่านหนึ่งไม่จำเป็นต้องเริ่มจากเซสชันโมเดลลิ่ง

Terrain#

ฉากหนึ่งเก็บ terrain ได้หลายอัน แต่ละอันเป็นหนึ่งแถวในรายการ Terrains และ ถูกสร้างที่หนึ่งในสามความละเอียด คือ 128² (เร็ว), 256² (สมดุล) หรือ 512² (ละเอียด)

แผงนี้มีสิบโหมด และทุกโหมดมีสิ่งหนึ่งที่เหมือนกัน: มาสก์ ที่ระบายไว้ใน Masks จำกัดขอบเขตของทุกโหมด

โหมดสิ่งที่มันทำ
Sculptสิบเจ็ดแปรงบน height field
Paintเลเยอร์พื้นผิวสูงสุดแปดชั้น กระจายบนสอง splatmap
Generatenoise, การลงพื้นผิวอัตโนมัติ และการนำเข้าระดับความสูงจากโลกจริง
Sketchวาดสันเขาและหุบเขา แล้วสังเคราะห์ terrain ให้ตรงกัน
Masksจำกัดโหมดอื่นทุกโหมดให้อยู่แค่บางส่วนของพื้นผิว
Waterระดับน้ำทะเล และตัวเลือกระหว่าง terrain water กับ FFT ocean
Pathsถนนแบบเบซิเยร์ที่ bake ลงบนพื้น
Vegetationการกระจายด้วยแปรงหรือด้วยกฎ
SDFterrain แบบ raymarch เรนเดอร์แทนที่จะเป็น mesh
Biomesดิน พืช ต้นไม้ และหินในครั้งเดียว

Sculpt Raise 1, Lower 2, Smooth 3, Flatten 4, Pinch 5, Inflate 6, Noise 7, Sharpen 8, Stamp 9, Terrace 0, Erode E, Fill F, Clone C (คลิกพร้อม Alt เพื่อกำหนดจุดต้นทาง), Blur B, Ramp R, บวกกับ เครื่องมือน้ำอีกสองตัว คือ River วาดเส้นทางน้ำ และ Lake เติมน้ำที่จุด หนึ่ง

ตัวแปรงเองมีไดนามิก: pressure curve, lazy mouse, falloff, สมมาตร, pattern และ jitter ทั้งขนาดและความแรง Stamp มีหกรูปทรง คือ crater, mountain peak, plateau, river valley, dome, noise hill การกัดเซาะมีสองแบบ: แปรง E เป็นแบบ เฉพาะจุด ส่วน Adjustments รัน erosion แบบ hydraulic, thermal และ wind ทั่วทั้ง terrain

Paint แปดเลเยอร์ เพราะ splatmap แบบ RGBA สองอันเก็บได้อันละสี่ช่อง คลัง วัสดุถูกจัดเรียงตามหมวดหมู่ คือ grass, dirt, forest, rocks, roads and surfaces, cliffs, sand, snow, volcanic, wetland, fantasy และของคุณเอง และ แต่ละเลเยอร์มี UV scale, displacement, detail map และ surface relief (bump strength และ parallax depth) Break texture tiling (cell bombing) คือการ ตั้งค่าที่หยุดไม่ให้พื้นผิวพื้นดินที่ซ้ำกันดูเป็นตาราง

Generate สร้างจาก noise จากนั้น Generate Textures กำหนดวัสดุตามความสูง และความชัน พร้อมความแตกต่างของเฉดเหนือ/ใต้ และชายฝั่งทรายหรือกรวดในบริเวณที่มี น้ำ Real World นำเข้าไทล์ระดับความสูงสาธารณะของ NASA/USGS: เลือกจุดสังเกต หรือพิมพ์พิกัด เลือกระดับซูม แล้วแผงจะรายงานช่วงความสูงที่มันดึงกลับมา

Sketch คือทางเข้าอีกแบบหนึ่ง วาดจังหวะสันเขาและหุบเขาบนแผนที่ 2D เลือก ภูมิประเทศต้นแบบจริงได้สูงสุดสามแบบ แล้ว terrain จะถูกสังเคราะห์ให้ตรงกับ ภาพร่าง ผสมเข้ากับสิ่งที่มีอยู่แล้วได้ตามต้องการ ลงพื้นผิวอัตโนมัติ และกัดเซาะ ในขั้นตอนเดียวกัน

Masks ถูกระบายด้วยแปรงแล้วแก้ไขทั้งชุดได้: clear, invert, blur, grow, shrink smart mask สร้างมาสก์ขึ้นจาก terrain เองโดยตรง ตามความสูง ตาม ความชัน ตามเลเยอร์ หรือตามช่องเว้า

Paths คลิกเพื่อวาง control point แล้วเส้นโค้งเรียบจะวิ่งผ่านมัน ลากจุดสี อำพันเพื่อย้ายมัน ลากแฮนเดิลสีฟ้าอมเขียวเพื่อบิดเส้นโค้ง Bake Path ทำให้ พื้นดินใต้มันแบนราบ ระบายพื้นผิว และยกคันดินขึ้น

Vegetation มีสองส่วน แปรงวางและลบอินสแตนซ์ด้วยมือ ส่วน scatter rules วางตามเงื่อนไข น้ำหนักเลเยอร์ seed ขนาดต่ำสุด/สูงสุด และช่วงความสูงกับความชัน ที่ asset แต่ละชิ้นยอมรับ หญ้าและดอกไม้จะจางหายไปเกินระยะวาดที่ตั้งค่าได้ และ Export to Scene เปลี่ยนอินสแตนซ์ให้กลายเป็นวัตถุในฉาก

Biomes คือเวอร์ชันคลิกเดียวของทุกอย่างข้างต้น: เลือก biome หนึ่ง ติ๊กหมวด ที่ต้องการ (ดิน, ต้นไม้, พืชและหญ้า, ดอกไม้, สาหร่ายใกล้น้ำ, หิน) ตั้งความ หนาแน่น แล้ว Apply Biome จะระบายพื้นดินและกระจายทุกอย่าง พร้อมรายงานว่าวาง อินสแตนซ์ของแต่ละอย่างไปกี่ชิ้น age variety ของต้นไม้ผสมตั้งแต่ต้นกล้าไป จนถึงต้นแก่ แทนที่จะปั๊มต้นไม้แบบเดียวกันซ้ำไปทั่ว และ ground blend (RVT) ผสานฐานหินแต่ละก้อนเข้ากับสีของ terrain ข้างใต้

SDF เป็นตัวเรนเดอร์คนละตัว ไม่ใช่เครื่องมือคนละตัว: terrain ถูก raymarch จาก distance field รูปทรงกำหนดด้วย octaves, lacunarity และ persistence ลง พื้นผิวด้วย grass/rock/snow พร้อมเส้นหิมะและค่าขีดจำกัดความชัน และมี soft shadow, ambient occlusion และหมอกเป็นของตัวเอง

terrain ขนาดใหญ่มี ระบบ LOD พร้อม skirt geometry (ซึ่งเป็นตัวปิดช่องว่าง ระหว่างระดับ), การเปลี่ยนระดับที่นุ่มนวล, frustum culling และภาพซ้อนทับแสดง สถิติ Heightmap นำเข้าและส่งออกเป็น PNG 16 บิต, PNG 8 บิต หรือ RAW 16 บิต; splatmap เป็น RGBA PNG หนึ่งไฟล์ หรือไฟล์แยกต่อเลเยอร์; และทั้ง terrain หรือ แค่การตั้งค่าของมัน เป็นพรีเซ็ตได้

Sky Studio#

บรรยากาศ ท้องฟ้าสี่ประเภท คือ solid, gradient, HDRI และ physical atmosphere พร้อม Rayleigh และ Mie scattering, Mie absorption, ozone, ground albedo, turbidity, planet radius และ atmosphere thickness

ทุกอย่างขึ้นอยู่กับ time of day ซึ่งหมุนวนได้เอง: ดวงอาทิตย์กำหนดด้วย elevation, azimuth และ intensity พร้อมความเข้มเงาของตัวเอง; ดวงจันทร์ตาม phase; ดาวพร้อมประกาย; และแสงเหนือ Volumetric clouds มี thickness, erosion, noise scale และ curl distortion และแสงผ่านทาง absorption, scatter, ambient และ powder term; cirrus กับ Belt of Venus แยกต่างหาก Aerial perspective คือหมอกที่หนาขึ้นตามระยะทางและทำให้เรขาคณิตที่อยู่ไกลจางลงสู่ เส้นขอบฟ้า เป็นการตั้งค่าที่ทำให้ภูมิประเทศดูกว้างใหญ่

สิบพรีเซ็ตให้เริ่มต้น: clear day, dawn, sunset, dusk, night, overcast, stormy, desert, arctic และ space

Water#

สองแท็บ: Ocean (FFT) สำหรับทะเลเปิด, Shore & lakes สำหรับที่เหลือ ทั้งหมด

⚠️ Water ถูกสร้างขึ้นในตัวแก้ไข Terrain: ด้วยเครื่องมือ river และ lake หรือ Show Water แล้วมาปรับแต่งที่นี่ การเปิดแผงนี้บนฉากที่ไม่มีน้ำจะให้คุณ ได้แค่การตั้งค่าที่ไม่มีอะไรให้นำไปใช้

น้ำชายฝั่งมีสี, ความทึบ, ความแรงและความเร็วของคลื่น, choppiness, ความกว้างของ ฟองและ Fresnel พร้อม screen-space reflection และ refraction blur ข้างใต้คือ ตัว WGSL shader เอง: normal scale สองชุดพร้อมทิศทางและความเร็วเลื่อนของตัวเอง, foam threshold และความนุ่มนวล, ความแรงของ refraction และ index of refraction และแสงภายในน้ำ คือ absorption, turbidity, scattering และ translucency

Tree Generator#

สองโหมด คือ Tree และ Trunk ต้นไม้หนึ่งต้นเป็นได้ทั้งผลัดใบหรือไม่ ผลัดใบ มีอายุตั้งแต่ต้นกล้าไปจนถึงต้นแก่ และเป็นได้ทั้งมีชีวิต ตาย เป็นตอ หรือเป็นท่อนล้ม ทุกอย่างมาจาก seed ดังนั้น Randomize seed คือวิธีเร็วที่สุด ในการได้ต้นไม้ต่างต้นที่ยังมีคาแรกเตอร์เดียวกัน

รูปทรงกำหนดต่อระดับกิ่ง: children, length, radius, taper, gnarliness, twist, sections, segments, angle และ start height บวกกับความแปรผันตามธรรมชาติ, phototropism และ gravitropism: สองตัวที่ทำให้ต้นไม้เอนเข้าหาแสงและ โน้มลงภายใต้น้ำหนักตัวเอง และแรงส่วนกลางที่มีความแรงของตัวเอง ฐานต้นมี root flare (lobes และ height) และ buttress

ใบเป็น billboard ด้านเดียวหรือสองด้าน มี count, size, angle, variance, clump, curl, droop, sheen และ rounded normal เปลือกไม้มีหกสไตล์ คือ ridged, aspen, pine, birch, smooth, palm พร้อม relief, มอส, ฐานชื้น, sun bleach, canopy ambient occlusion และการเปลี่ยนสีใบไม้ร่วง สี่ฤดูสลับลุคทั้งหมดพร้อมกัน

Forest กระจายต้นไม้จำนวนมากพร้อมกัน: count, spread radius, scale variance และการผสมช่วงอายุ (single, natural, young, old, even) Add age progression วางช่วงชีวิตทั้งห้าเรียงกัน ซึ่งเป็นวิธีเร็วที่สุดในการเทียบดู เคียงข้างกัน ต้นไม้ออกไปเป็น scene entity หรือเป็น GLB และการตั้งค่าใด ๆ บันทึกเป็นพรีเซ็ตได้

Plant Generator#

ห้าชนิด คือ flower, cluster, herb, fern, grass ใช้ stem ร่วมกัน (count, height, thickness, curve, colour) และใบ (count, size, width, angle) เฟิร์น เพิ่ม leaflet pairs, leaflet sweep และ frond arch; หญ้าเพิ่ม blade count และ arch

ดอกไม้เป็นตัวเลือกเสริมสำหรับทุกชนิด: petals, petal rows, length, width, curl, tip sharpness, bloom, centre size และสามสี คือ petal, petal tip และ centre พร้อม translucency และ roughness สำหรับวิธีที่แสงผ่านใบ เพิ่มหนึ่งต้น ลงในฉาก กระจายหลายต้น หรือส่งออกเป็น GLB

Rock Generator#

สามชนิด คือ rock, stone, cliff ในสามสไตล์: realistic, toon หรือ low poly พร้อมเส้นขอบ

รูปทรงคือ noise บนทรงกลม: scale, strength, octaves, persistence, warp และ ตัวเลือก ridged บวกกับ strata ที่มี frequency ของตัวเอง และ facet cuts ที่มี depth และ sharpness สำหรับหินเหลี่ยม รัศมี, detail, flatten, shape variance และฐานแบนเป็นตัวกำหนดเส้นซิลูเอตต์ และสี่พรีเซ็ตกัดเซาะ คือ fresh, weathered, natural, eroded ขยับทุกอย่างพร้อมกัน

พื้นผิวมีความแปรผันของสี, mineral veins, lichen และมอส, detail texture พร้อม tiling และความแรง, triplanar blending และ parallax relief มันใช้วัสดุ Stone ที่มากับชุดเป็นค่าเริ่มต้น ส่งวัสดุจาก Matter มายัง Engine เพื่อแทนที่มันได้

Kitbash ไลบรารีเดียวกับ Sculpt#

Kitbash ใช้ร่วมกับ Sculpt: แผงนี้กับ Edit Forge ของ Sculpt อ่านไลบรารีเดียวกัน ชิ้นส่วนที่สร้างที่นั่นจะถูกวางที่นี่ และชิ้นส่วนที่วางไว้ที่นี่ก็บันทึกกลับไปที่นั่นได้

สิ่งที่ฉากเก็บไว้คือ ชิ้นส่วนและขนาดของมัน ไม่ใช่จุดยอดของมัน: ซึ่งเป็น เหตุผลที่อาคารที่ประกอบด้วย kitbash แทบไม่กินพื้นที่ในไฟล์เลย และอัปเดตได้ ภายหลังจากต้นทางของมัน

เลือกชิ้นส่วนจากแคตตาล็อกแล้วคลิกซ้ายแต่ละครั้งเพื่อวาง สามโหมดสแนปตัดสินว่า มันจะลงตรงไหน: on terrain (ชิ้นส่วนตามความสูงพื้นดินใต้มัน), on water (ระนาบก่อสร้างอยู่ที่ระดับน้ำ) และ snap to sockets เล็งจุด เชื่อมต่อบนชิ้นส่วนที่วางไว้แล้ว ชิ้นใหม่จะหมุนเข้าหามันเอง โซ่หนึ่งจะเติบโต จากปลายที่ว่างของมัน socket ที่ถูกใช้แล้วจะหลุดออกจากตัวเลือก และแต่ละคลิก เป็นขั้น undo ของตัวเอง Ctrl/Cmd ถูกสงวนไว้สำหรับการเลือก และ Alt สำหรับการหมุน Collection เก็บแหล่งที่มาและเวอร์ชันของมันไว้ ดังนั้นอินสแตนซ์ หนึ่งจะอัปเดตได้เมื่อต้นฉบับเปลี่ยนไป

ตัวแก้ไขอื่น ๆ#

ตัวแก้ไขโลกใช้เติมเต็มฉาก ส่วนกลุ่มนี้ให้มันมีอินเทอร์เฟซ แผนที่ ตารางเนื้อหา และเครื่องมือตรวจสอบต้นทุนของมัน

ตัวแก้ไข HUD#

Tools → Editors → UI หกแท็บ คือ Templates, Elements, Layers, Preview, Style และ Script อยู่เหนือพรีวิวที่สลับระหว่างขนาด อุปกรณ์สามแบบ: เดสก์ท็อป 960×540, แท็บเล็ต 768×432, มือถือ 375×667

Elements มีสามกลุ่ม (Display, Data, Input) และซ้อนกันได้: panel กับ flex เก็บ children ไว้ ดังนั้นแท็บ Layers จึงเป็นโครงสร้าง ต้นไม้จริง ๆ ไม่ใช่แค่รายการแบน History ลึกห้าสิบขั้น

⚠️ แท็บ Style มีลักษณะ คล้าย CSS และความต่างนี้สำคัญ HUD ถูกวาดบน แคนวาสโดย GUI ของ Babylon และ CSS จริง ๆ เข้าไม่ถึงมัน กฎที่คุณเขียนตรงนี้ ถูก map ไปยังคุณสมบัติของ GUI; ตัวเลือกคือ #name สำหรับหนึ่ง element, .type สำหรับชนิดหนึ่ง (.text, .panel) และ * สำหรับทุกอย่าง

แท็บ Script คืออีกวิธีในการสร้างมันขึ้นมา: API ของ ui.* คือ createText, createPanel, createProgress, createButton พร้อมสองวิธีรัน Build Layout รันมันแบบ design-time แล้วทิ้ง element จริงไว้ให้คุณขยับด้วยมือ; Run Live รันมันในเกมจริง

สองการเชื่อมต่อออกไปข้างนอก: งานศิลป์ของ HUD เปิดใน Inkwell หรือ Vectra และถูก เชื่อมโยงกลับ ไม่ใช่ก็อปปี้ และเอกสารของ Vectra นำเข้ามาเป็น HUD element ได้ minimap element เป็นสิ่งของตัวเอง มี range, grid และ marker สำหรับผู้เล่น ศัตรู พันธมิตร ไอเทม และเป้าหมาย

ตัวแก้ไข tilemap#

สิบเอ็ดเครื่องมือ คือ brush, eraser, fill, rectangle, select, eyedropper, stamp, autotile, prop, zone และ path บนสี่รูปแบบการฉายแผนที่: orthogonal, isometric, staggered isometric และ hexagonal

Autotiling มากับสี่เทมเพลต และตัวเลขในแต่ละชื่อคือจำนวนไทล์ที่มัน คาดหวัง: Blob 47 (มุมและขอบเต็มรูปแบบ), Wang 16 (อิงตามขอบ), Simple 4 (NSEW) และ RPG Maker A2 (48 ไทล์ เข้ากันได้กับแผนที่ที่สร้างจากที่นั่น)

สองเลเยอร์อยู่เหนือไทล์เอง Zones ระบายความหมายด้าน gameplay คือ buildable, water, forest, road, farm, residential, commercial, blocked และ props วางวัตถุตามหมวดหมู่: trees, rocks, buildings, vegetation, water, paths แผนที่อยู่ในฐานข้อมูลของเบราว์เซอร์เอง ดังนั้นแผนที่ที่ยังไม่บันทึกจะ รอดจากการโหลดหน้าใหม่

Inventory, data table และ dialogue#

สามตัวแก้ไขที่ทำให้เกมมีเนื้อหาได้โดยไม่ต้องให้เนื้อหานั้นอยู่ในโค้ด

Inventory แก้ไขแคตตาล็อกแล้วนำไปใช้กับฉาก ไอเทมหนึ่งชิ้นมี action และ action หนึ่งคือ trigger: use, equip, unequip บวกกับหนึ่งใน types แปดแบบ: message, heal, damage, grant, remove, event, toast, scene ตัวแผงเองมีสามเลย์เอาต์ (grid, list, compact), สามพรีเซ็ตรูปลักษณ์ (graphite, midnight, warm) และช่องภาพสี่ช่อง คือ background, slot, equipment, tooltip ที่เปิดในอีกโมดูลหนึ่งเพื่อวาดใหม่อย่างเหมาะสม

Data tables มีชนิดกำกับ: คอลัมน์หนึ่งเป็น text, number, bool หรือ ref CSV เข้าและออกได้ ทุกการแก้ไขวิ่งผ่าน pure function ซึ่งเป็นสิ่งที่ทำ ให้ตารางที่การส่งออกเขียนออกมาเหมือนกับตารางที่ build อ่านเข้าไปทุกประการ

Dialogue trees คือโหนดที่มีผู้พูดและบทพูด โหนดหนึ่งจะไปต่อที่ next เดียว หรือแยกสาขาเป็น choices แต่ละอันมีข้อความและปลายทางของตัวเอง สวิตช์แยกสาขาคือการตัดสินใจเชิงโครงสร้างเพียงอย่างเดียวในตัวแก้ไขนี้

Animation และกล้อง#

Cinematic Sequencer สร้างลำดับงานพร้อม duration และ loop flag หนึ่ง แทร็กต่อหนึ่ง entity และคีย์เฟรมที่จับไว้ที่ playhead Add Key รับค่า ปัจจุบันของ entity แทนที่จะให้คุณพิมพ์เอง graph editor ข้างใต้แสดงเวลา เทียบกับความคืบหน้า พร้อมแฮนเดิลกลมสำหรับ easing: ความชันคือความเร็ว ช็อตแต่ละอันมี duration ของตัวเอง และมีการจัดเฟรมแบบ Cinemascope (1.422:1) ให้ใช้สำหรับ letterbox

Camera Tools ครอบคลุม FOV, position, target, mode และ speed บวกกับ bookmark สำหรับมุมมองที่คุณกลับมาใช้ซ้ำบ่อย ๆ และ camera layer

Audio#

Audio Manager เก็บ audio event, แทร็ก และ mixer พร้อมช่องสัญญาณและ หมวดหมู่ เอฟเฟกต์ต่อแหล่งเสียงคือ low-pass, high-pass และ reverb send; โหมด random เลือกสุ่มระหว่างหลายคลิป เพื่อไม่ให้เสียงที่เล่นซ้ำฟัง ดูเหมือนลูป การ scrub จะเล่นเสียงขณะที่คุณลาก playhead

Profiler#

การแบ่งเฟรมอย่างละเอียด ไม่ใช่แค่ตัวนับเฟรม: camera render, mesh evaluation, particles, sprites และ shader compilation แต่ละอันมีป้าย จริง (real) หรือ ประมาณ (estimated) กำกับไว้ เพื่อไม่ให้ตัวเลขที่มาจากการวัดจริง ถูกเข้าใจผิดว่าเป็นตัวเลขที่มาจากแบบจำลอง ตัวนับที่อยู่ข้าง ๆ คือ mesh และ mesh ที่ใช้งานอยู่, ไฟ, กล้อง, physics body

การบันทึกต้องกดเริ่มเอง และมันจบลงที่รายการ Issues แทนที่จะเป็นกราฟให้ ตีความ: low FPS, high draw calls, high triangles, high memory เทียบกับ target frame rate ที่คุณตั้งไว้

การสร้างฉาก#

Entity#

วิวพอร์ตของ Engine พร้อม gizmo บน entity ที่เลือกอยู่

ฉากใหม่หนึ่งมาพร้อม Main Camera, Directional Light, Skybox และ Ground Plane

Scene Graph พร้อม entity สี่ชิ้นที่ฉากใหม่เริ่มต้นด้วย

สิ่งที่คุณเพิ่มได้: Empty, Cube, Sphere, Cylinder, Plane, Light, Camera, Script, Mesh บวกกับสองตระกูลที่มาพร้อมต่อสาย ไว้แล้ว:

  • Characters: Third-Person, First-Person (FPS), Top-Down, Platformer, Basic
  • Props: Pickup (heal) และ Hazard (damage)

Scene Graph ค้นหาได้ กรองตามชนิดได้ และเพิ่ม ทำสำเนา หรือลบได้; entity ซ้อน กันได้ และการเปลี่ยนพ่อแม่ทำได้ด้วยการลาก การวางมีการสแนป และมี scatter brush สำหรับเติมเต็มพื้นดินอย่างรวดเร็ว

Inspector#

Transform (position, rotation, scale), สวิตช์ Enabled และ component ต่าง ๆ ของ entity: เพิ่ม ตั้งค่า และลบได้ที่นี่ พร้อม Add Script อยู่ ด้านล่าง เลือก entity หลายชิ้นแล้ว inspector จะสลับไปโหมดแก้ไขเป็นชุด ทำให้ การเปลี่ยนค่าหนึ่งช่องลงไปที่ทุกชิ้นพร้อมกัน

Console#

ไม่ใช่แค่ log ธรรมดา มันกรองตามระดับ (all, logs, info, warning, error) เชื่อม ข้อความกลับไปยัง entity ที่สร้างมันขึ้นมา และมี expression prompt: พิมพ์ นิพจน์หนึ่ง กด Enter เพื่อรันมันกับฉากที่กำลังทำงานอยู่จริง ปุ่มลูกศรไล่ดู ประวัติ

ใส่พฤติกรรมให้มัน#

สามเส้นทาง และมันอยู่ร่วมกันได้

Scripts#

JavaScript พร้อม lifecycle hook และ เอกสารอ้างอิงของตัวเอง:

function start() {}                     // once, when the entity starts
function update(dt) {}                  // every frame
function fixedUpdate(dt) {}             // fixed timestep, for physics
function onCollisionEnter(other) {}     // first frame of contact
function onCollisionStay(other) {}      // every frame while touching
function onCollisionExit(other) {}      // contact just ended
function onTriggerEnter(other) {}       // entered a trigger volume
function onTriggerExit(other) {}
function onMessage(msg, data, senderId) {}   // entity-to-entity messaging
function onAnimationEvent(name, data) {}
function onDestroy() {}

การชนกันและ trigger ทำงานได้ทั้งใน 2D และ 3D และแต่ละฝั่งได้รับ contact normal ของตัวเอง: other.contact.normal ชี้จาก entity อีกฝั่ง เข้าหา ตัวนี้ นั่นคือสิ่งที่ทำให้สคริปต์แยกออกว่า "ฉันลงไปทับมัน" กับ "มันลงมาทับ ฉัน" ได้: การกระโดดเหยียบแบบ platformer อ่านค่าจาก other.contact.normal.y > 0.5

ตัวแก้ไขสคริปต์#

F2 หรือ Add Script บน entity หนึ่งชิ้น ตัวแก้ไขแบบ Monaco พร้อมแท็บ เปิด หลายสคริปต์พร้อมกันได้ แต่ละอันถูกเก็บไว้ในฐานข้อมูลของเบราว์เซอร์เอง ไม่ใช่ ในไฟล์โปรเจกต์ ดังนั้น buffer ที่ยังไม่บันทึกจะรอดจากการโหลดหน้าใหม่

ห้าภาษาถิ่น หนึ่งโปรแกรม ตัวสลับภาษาเสนอ JavaScript, BASIC, Python, C# และ Rust สิ่งที่มันทำไม่ใช่สิ่งที่มันดูเหมือนจะทำ: JavaScript คือต้นฉบับ ที่แท้จริง ส่วนอีกสี่ภาษาเป็น มุมมอง ที่ transpile มาจาก JS ที่เก็บไว้ การสลับจาก Python ไป Rust ไม่ได้แปล Python โดยตรง แต่มันย้อนกลับไปที่ JS ที่ Python นั้นถูกสร้างขึ้นมาแล้วแปล JS นั้นแทน การแปลข้ามหลายทอดคือสิ่งที่ทำให้ โปรแกรมเสียหาย และตัวแก้ไขนี้ปฏิเสธที่จะทำแบบนั้น

สิบสาม template ใน 5 หมวดหมู่ แต่ละอันมีป้ายระดับความยาก:

หมวดหมู่Template
Basicsสคริปต์เปล่าพร้อม lifecycle stub
Movementauto-rotate · WASD · axis-based 3D movement · physics jump with ground detection · third-person camera follow
Gameplaytrigger zone · health bar with damage and heal · timed spawner
AIpatrol with player proximity alert
AdvancedVerse-style async cutscene · structured concurrency · full API surface test

พรีเซ็ต character-controller และ props เริ่มต้นเกม (pickup, hazard) ปรากฏ อยู่ในรายการเดียวกัน ซึ่งเป็นวิธีที่ใช้ได้จริงในการใส่ controller ที่ทำงาน ได้ลงบนตัวละครที่นำเข้ามา

การรันและดีบัก F5 รัน F9 ตั้ง breakpoint ตัวดีบักหยุดที่บรรทัดหนึ่ง เดินทีละเฟรม และรายงานค่าสดผ่าน watch expression Script Lab รันโปรแกรม โดยไม่มี entity ผูกอยู่เลย เป็นเหมือน scratchpad สำหรับ API มากกว่าเป็น component บนวัตถุหนึ่ง

นอกเหนือจากโค้ด: API reference, รายการ symbol ของไฟล์ที่เปิดอยู่ และคลัง snippet พร้อม favourite และ recent Ctrl+S บันทึก Ctrl+F ค้นหา Ctrl+H แทนที่ และตัวแก้ไขนี้มาพร้อมแปดธีม

Blueprint และพฤติกรรม#

กราฟภาพ คลังพฤติกรรมสำเร็จรูป และ state machine ที่วางซ้อนอยู่บนสแตกพฤติกรรม

กราฟนี้มี 267 โหนด ใน 22 กลุ่ม คือ Math, Scene, Entity, Animation, Flow Control, String, Events, Physics, UI, Array, Vector, Transform, Debug, Input, Utility, Game, Boolean, Camera, Tween, Variables, Audio และตระกูล 2D กับ 3D สามคุณสมบัติแยกพวกมันออกจากกัน และนั่นคือสิ่งที่กราฟนี้ประกอบขึ้น มาจาก: 17 event node เริ่มการทำงาน, 117 pure node คำนวณค่าโดยไม่มี ผลข้างเคียงและไม่มี execution pin, และ 9 latent node จบการทำงานทีหลัง: โหนดกลุ่มนี้คือตัวที่ทำให้ delay หรือ tween แสดงออกได้โดยไม่ต้องมี state machine ของตัวเอง

สี่เครื่องมือ: select V, pan H, comment C, reroute R อยู่บนแคนวาสที่ ซูมได้ตั้งแต่ 0.1× ถึง 3× พร้อมมินิแมป ตัวแปรมีหกชนิด คือ boolean, integer, float, string, vector3 และ object คำอธิบายของแต่ละโหนดอยู่บน tooltip ของมัน ซึ่งเป็นที่เดียวที่คลังขนาดนี้จะอธิบายตัวเองได้

State machine#

แผงของตัวเอง และตั้งใจแยกจากของ Animator: เงื่อนไขของ Animator เป็น enum แบนพร้อม UI ที่เขียนด้วยมือทีละกรณี ในขณะที่ของที่นี่มีโครงสร้างและพูดถึง world จริง ๆ

เจ็ดเงื่อนไข และแต่ละอันคือคำถามเกี่ยวกับฉาก: sees (เป้าหมายที่มีแท็ก อยู่ในระยะ อาจกำหนดมุมและแนวสายตาได้ด้วย), lost (ไม่มีเป้าหมายมา N วินาที), distance เทียบกับค่าขีดจำกัด, health, message received, timer (เวลาที่อยู่ในสถานะ ปัจจุบัน) และ flag (ค่าบน blackboard ที่ใช้ร่วมกัน) สอง combinator คือ and และ or ถูกใส่ไว้ ทั้งคู่ ทั้งที่ or มีอยู่แล้วโดยปริยาย สองทรานซิชันไปยังสถานะเดียวกันก็คือ or แต่ "มันเห็นฉัน AND ฉันยังมีเลือดเหลือ" ไม่มีรูปแบบให้ใช้เลยก่อนหน้านี้

⚠️ Health ถูกเทียบเป็นสัดส่วนของค่าสูงสุด ไม่ใช่ค่าสัมบูรณ์ ค่าขีด จำกัดแบบ "ต่ำกว่า 30 HP" จะอยู่ไม่รอดหลังการปรับสมดุลเกม ส่วน "ต่ำกว่า 0.3" อยู่รอด

เมื่อเข้าหรือออกจากสถานะหนึ่ง มีสี่เอฟเฟกต์: send ข้อความ, set blackboard key, play คลิปแอนิเมชัน หรือยิง named effect ไม่มีอันไหน ขยับอะไรเลย การเคลื่อนไหวยังอยู่กับพฤติกรรมต่าง ๆ และตัว machine เป็นผู้ ตัดสินใจว่าพฤติกรรม ไหน กำลังทำงานอยู่

ทรานซิชันหนึ่งเริ่มจาก * ได้ ซึ่งหมายถึงสถานะใดก็ได้ ตัวตรวจสอบคืน รายการ ปัญหาทั้งหมด แทนที่จะโยน error ตั้งแต่ตัวแรก ดังนั้น machine ที่ เขียนไว้ครึ่ง ๆ กลาง ๆ ก็ยังวาดออกมาได้ และคุณเห็นทุกอย่างที่ผิดพร้อมกันใน ครั้งเดียว ตำแหน่งของโหนดเป็นส่วนหนึ่งของข้อมูล: กราฟที่ layout ของมันอยู่ นอกฉากจะกลับมาสลับตำแหน่งใหม่สำหรับคนถัดไปที่เปิดมัน

BASIC#

โหมดวิวพอร์ต TXT คือสภาพแวดล้อม BASIC แบบคลาสสิกพร้อมโปรแกรมสาธิตมาให้ และภาษานี้มีเอกสารอ้างอิงของตัวเอง มันเป็นภาษาจริง ที่นี่ ไม่ใช่ของเล่น: มอดูลหลายไฟล์ (#INCLUDE), ตัวเลขมีชนิดกำกับ (signed และ unsigned 8/16/32/64 บิต, float32 และ float64), record ซ้อนกัน, method ของ object ผ่าน SELF, การอ้างอิง (REF/BYREF), TRY/CATCH/FINALLY แบบมีโครงสร้าง, การคอมไพล์แบบมีเงื่อนไข, coroutine, handle มีชนิดกำกับ และ WebGPU compute พร้อม storage buffer และ WGSL ดิบ

OPTION EXPLICIT เป็นตัวเลือกที่ต้องเปิดเอง ตัวแปรแบบ implicit ดั้งเดิมยัง เป็นค่าเริ่มต้นอยู่ เพื่อให้โปรแกรมที่นำเข้ามายังรันได้

การเล่นและการส่งมอบ#

Play#

Play, Pause, Stop เมื่อกด stop แบนเนอร์หนึ่งจะรายงาน สิ่งที่เซสชัน นั้นเปลี่ยนไป ดังนั้นการแก้ไขในโหมด play จะไม่ถูกเก็บไว้หรือหายไปแบบ เงียบ ๆ เลย เซสชันสามารถ บันทึกและเล่นซ้ำ ลงในรายงานบั๊กได้ และ scenario bookmark ให้การทดสอบเล่นเริ่มจากกลางด่านได้

Build#

Build รับประเภทเกม (ตรวจจับจากฉาก หรือกำหนดเอง: sidescroller/ platformer, first/third person, text-based) และเป้าหมาย

  • Web: WebGPU พร้อม WebGL สำรอง, WebXR (VR/AR) เป็นตัวเลือก, minification, ตัวนับ FPS และตัวเลือก embed assets ที่รวมทุกอย่างเป็น ไฟล์เดียว
  • Desktop และ mobile: native build ฉากถูกส่งออกเป็นข้อมูล (scene.glb + scene.json) แล้วคอมไพล์ผ่านโปรเจกต์ Bevy (Rust) ที่ สร้างขึ้น; สคริปต์รันเหมือนเดิมที่นั่นบน QuickJS runtime ที่ฝังไว้

การบีบอัดตั้งค่าได้แยกแกน คือ algorithm, textures, meshes พร้อมพรีเซ็ต คุณภาพที่ผูกทุกอย่างเข้าด้วยกัน build ต่าง ๆ ถูกเก็บไว้ในประวัติพร้อมขนาด ของมัน (ต้นฉบับเทียบกับที่บีบอัดแล้ว) และดาวน์โหลดกลับมาใหม่ได้ภายหลัง

native build มีแค่สิ่งที่ตัวส่งออกรู้วิธีส่งออกเท่านั้น glTF ไม่สามารถ บรรทุก custom shader, thin instance, ท้องฟ้าแบบ procedural หรือ post-processing ได้ ดังนั้นระบบรันไทม์ที่ยังไม่ถูกย้ายไปฝั่ง Bevy จะหาย ไปจาก build เดสก์ท็อปหรือมือถือ ทั้งที่ดูสมบูรณ์แบบบนเว็บ ตรวจสอบ native build ก่อนพึ่งพามัน

Multiplayer#

แผง Multiplayer room เชื่อมฉากเข้ากับเซิร์ฟเวอร์เกม Colyseus มีเซิร์ฟเวอร์ ทดสอบแบบใช้ร่วมกันฟรี ไม่ต้องมีบัญชีและไม่ต้องตั้งค่าใด ๆ โปรเจกต์หนึ่งยัง กำหนดเซิร์ฟเวอร์ของตัวเองได้ด้วย ห้องหนึ่งถูกกำกับด้วยรหัสแชร์ที่คุณเก็บไว้ เองหรือแจกจ่ายก็ได้

ไฟล์ที่อ่านและเขียนได้#

รูปแบบเนทีฟ.engine
นำเข้า.glb, .gltf, .obj, .fbx, .png, .svg, .mp4, .webm, .mov, .scene
ส่งออกweb build หนึ่งชุด, native build เดสก์ท็อป/มือถือ, scene.glb + scene.json

การส่งงานไปยังสตูดิโออื่น#

รับ mesh จาก Sculpt, Retopo และ Pigment, ฉากทั้งชิ้นจาก Render, pixel art, แอนิเมชัน, ชุดวัสดุ PBR จาก Matter, 2D rig, โปรเจกต์วิดีโอ, ภาพ, vector art และวัตถุของ Vectra

สร้าง 2D rig

งานจำลองหน้าจอจาก Vectra มาถึงในรูปแบบโครงสร้าง ไม่ใช่ภาพ มันกลายเป็น HUD hierarchy ที่ Engine จัดวางและเขียนสคริปต์ได้: ความต่างระหว่างงาน ออกแบบที่ต่อสายได้กับภาพหน้าจอของมัน

ปุ่มลัด#

Cmd/Ctrl + K เข้าถึงคำสั่งของ Engine เองได้จาก palette เคียงข้างกับ คำสั่งส่วนกลาง Engine ยังมีแผงปุ่มลัดเฉพาะทางที่ค้นหาได้ในการตั้งค่าของ ตัวเอง มันมีมากกว่าที่จะใส่ลงในหน้าปุ่มลัดได้

ข้อจำกัดและปัญหาที่พบบ่อย#

  • วิวพอร์ตว่างเปล่ามักเป็นเพราะเบราว์เซอร์ ไม่ใช่ฉาก Engine ต้องการ WebGL 2 ตรวจสอบว่าเปิด hardware acceleration ไว้
  • Systems กับ Tools ใช้ลิ้นชักเดียวกัน ถ้าแผงหนึ่ง "หายไป" มันน่าจะอยู่ ในอีกฝั่งหนึ่ง
  • Console คือที่แรกที่ควรดู ไม่ใช่ที่สุดท้าย: มันเชื่อมข้อผิดพลาดกลับ ไปยัง entity ที่ก่อมันขึ้นมา
  • component ที่เพิ่มในโหมด play อาจไม่รอดหลังกด stop อ่านแบนเนอร์ที่ ปรากฏขึ้นตอนกด stop
  • ฟิสิกส์ต่างกันระหว่าง 2D และ 3D ในตัวคำนวณของมัน ถึงแม้ script callback จะเหมือนกัน การสัมผัสแบบนิ่งใน 2D ถูกตรวจจับด้วย skin หนา 2 มม. เพราะตัวคำนวณดัน penetration ให้เป็นศูนย์พอดีก่อนที่การตรวจจับจะทำงาน