Ittipon.Bay

ตอนนี้ผมลองใช้ Unet อยู่ Version ของ Unity ณ ตอนที่เขียนนี้ เป็น Version 5.4 ซึ่งระบบ Unet เขาก็ยังมีปัญหาอยู่บ้าง วันนี้เลยมาเขียนปัญหาเกี่ยวกับ SyncList และแนวทางแก้ปัญหา Client Join Game แล้วไม่ได้ข้อมูลใน SyncList เลย เหตุการณ์สมมติของปัญหานี้คือ ตัวละครมี Item จำนวนหนึ่งเก็บไว้ใน SyncListStruct ข้อมูลฝั่ง Server ก็ครบถ้วนดี แต่พอ Client Join Game ไป กลับไม่มีข้อมูลอะไรเลย เท่าที่ลองหามา…

ศึกษา Modern OpenGL ด้วย WebGL – Part 4 : การกำหนดตำแหน่ง, แกนหมุน และขนาด (Position, Rotation and Scale)

ในการปรับ Position, Rotation และ Scale นั้นเรามาสามารถ ส่งค่า Matrix ที่คำนวนได้ ไปให้ Shader ในการประมวลผลภาพ แต่ใน Part นี้ จะไม่เขียนเกี่ยวกับการ คำนวน Matrix จะใช้ Library ชื่อว่า glMatrix การช่วยคำนวน ส่วนเรื่องการคำนวน Matrix ไว้จะเขียนใน Part ย่อย แต่อย่างน้อยก็ควรมีความรู้เกี่ยวกับ Vector 3D บ้างนะ :p ต่อจาก Part ก่อนๆ เรามี สามเหลี่ยมที่มี Texture ใน Part นี้ จะเพิ่มการหมุนรอบตัวมันเอง…

ไปโหลด SourceTree มาลงก่อน ไปโหลด SourceTree แล้วลงก่อน URL: https://www.sourcetreeapp.com/ เปิด SourceTree แล้วเริ่มต้นจากการ Clone repository เลย Clone repository ก่อนจะเริ่มทำสิ่งต่างๆ กับ Project ที่เคยสร้างไว้ ต้องไป Clone ไฟล์จาก Server มาไว้ที่เครื่องเราก่อน โดยมีขั้นตอนดังต่อไปนี้ 1. กดเมนู + New Repositiory เลือก Clone from URL 2. ใส่ Source URL กำหนด Destination Path, ตั้งชื่อ ตามใจ…

Open Source เกมเก่า: Rune War

เกม Rune War เป็นเกมที่ทำเพื่อประกวดเมื่อสามปีก่อน เป็นเกม Flash ซึ่งตอนนี้ Developer คงให้ความสนใจน้อยลงแล้ว โปรเจคนี้ ใช้ FlashDevelop, ภาษา ActionScript3 และ Starling พัฒนาฝั่ง Client ส่วนด้าน Backend ใช้ PHP เป็นหลัก มีระบบต่อสู้แบบ Real-time multiplayer พัฒนาด้วย Java ด้วย สามารถดู Codes ได้ที่ – https://github.com/insthync/runewar-client – https://github.com/insthync/runewar-webservice –…

ตัวอย่างการโหลด Lua script โดย Asset Bundles มาใช้กับ Unity

ในการอัพเดทข้อมูลในเกม บางครั้งต้องแก้ไข Logic แล้ว Build ใหม่ กว่าจะได้ปล่อยอัพเดทใหม่ บางทีก็เป็นเรื่องที่เสียเวลามาก คงจะดีไม่น้อย หากเราสามารถใช้ Lua script ในบางส่วนของการทำงานในเกมได้ แล้วพออัพเดท ก็แค่สร้าง Patch อัพขึ้น Server แล้วปล่อยให้ตัวเกมโหลด Patch เอง ผมเลยทำ Project ตัวอย่างดังกล่าว โดยใช้ SLua ร่วมกับระบบ AssetBundle ของ Untiy สามารถเข้าไปดูได้ที่: AssetBundleWithSLua

ในการทำ Draw Loop อาจจะทำง่ายๆ แบบใน Part 3 หรือทำโดยการใช้คำสั่ง setInterval() เพื่อทำให้วาดเฟรมใหม่ทุก 60 วินาที (60 fps) แบบนี้ setInterval(function() { Draw(); }, 1000/60); แต่มันมีวิธีที่ดีกว่าคือใช้ requestAnimationFrame() ซึ่งมันดีกว่าเพราะ – โดยปกติ Browser สามารถ Optimize การทำงานหลายๆ อย่าง ให้อยู่ในรอบการ Reflow และ Repaint รอบหนึ่งได้ ทำให้ลื่นขึ้น เราสามารถใช้ Function นี้ในการบอกให้…

จาก Part ก่อนๆ จะเห็นว่าโค้ดในส่วนของ Javascript เป็นการเขียนเพื่อทดสอบผลลัพท์อย่าง ง่ายๆ ภาพที่เห็นจาก Part ก่อนๆ จะเป็นภาพจากเฟรมเดียว และทำงานครั้งเดียวจบ ซึ่งในงานต่างๆ มันต้องทำงานไปเรื่อยๆ จนกว่าผู้ใช้จะออก การเขียนโค้ดมันจึงควรมีลำดับการทำงาน เช่น การเตรียมข้อมูล และสร้างสิ่งต่างๆ (Initialize), การโหลดข้อมูลต่าง, การ Update ข้อมูลต่างๆ และ การวาดภาพออกมา (Draw/Render) เป็นต้น ซึ่งจะทำการ…

การ Build Unity3d Plugin ของ Soomla (Mac OSX)

Soomla มี Open Source Plugin สำหรับ Game Engine/Framework ต่างๆ มากมาย แต่ที่ผมได้ใช้มีอย่างเดียวคือ Store ใช้ทำระบบ In-App Purchase ในเกม

แต่ก่อนเขามีตัวที่ Build ให้แล้วใน Github แต่ตอนนี้ตัวที่ Build ให้แล้ว เขาทำขายใน Asset Store วันนี้เลยมาเขียนวิธีการ Build

จริงในเว็บเขาก็มีบอกวิธีการ Build ให้คร่าวๆ แหละนะ แต่นี่พอลองแล้วเจอปัญหาบ้าง เลยมาเขียนเกี่ยวกับ ปัญหาและวิธีการแก้ปัญหาต่างๆ

** OS…

ช่วงนี้กำลัง Build เกมลง iOS อยู่ แต่เจอปัญหาแปลกๆ ทำให้ต้องเสียเวลาแก้ไปบ้าง ซึ่งตัว Unity รุ่นที่ใช้กับงานนี้คือรุ่น 5.2.4

Build เป็น XCode Project แต่เปิดไม่ได้ มันบอก “Cannot be parsed” -_- ปัญหาเกิดจาก ตอน Unity เขียนไฟล์ Unity-iPhone.xcodeproj มันไม่เขียนอะไรเลยลงไปในไฟล์ Unity-iPhone.xcodeproj -> project.pbxproj

วิธีแก้ก็คือ Copy ข้อมูลจากในไฟล์ Unity-iPhone.xcodeproj ->…

ศึกษา Modern OpenGL ด้วย WebGL – Part 2 : ลงสีด้วย Texture

หลังจากทำสามเหลี่ยมสามสีโดยการลงสีแผ่นจุด Vertex แล้ว ในตอนก่อน มาตอนนี้จะลงสีโดยใช้ Texture

โดยใช้โค้ดเก่าเอามาแก้นิดหน่อย เริ่มตั้งแต่การเปลี่ยน Shader จากรับค่าสีจากแต่ละ Vertex เป็นรับค่าตำแหน่ง Texture Coordinates และค่า Texture

Web GL attribute vec3 in_position; attribute vec2 in_texcoord; varying vec2 out_texcoord; void main() { gl_Position = vec4(in_position, 1.0); out_texcoord =…

ศึกษา MODERN OPENGL ด้วย WEBGL – PART 0.3 : Fragment Shader

Fragment Shader หน้าที่ของมันคือจัดสีให้แต่ละ Pixel ที่ถูก Rasterize, รูปแบบของมันจะเป็นประมาณนี้เสมอ

precision mediump float; void main() { gl_FragColor = {คำนวนหาสี}; }

Shader จะถูกเรียกใช้งานครั้งนึง ต่อ 1 Vertex, แต่ละครั้งที่มันถูกใช้งานเราต้องกำหนดค่าสี ให้ตัวแปร gl_FragColor

โดยเราสามารถส่งข้อมูลเพื่อคำนวนหาสี ได้ 3 ทาง 1. Uniforms ค่าที่จะเหมือนกันในทุก Pixel ตอนสั่ง Draw 2. Textures…

ศึกษา MODERN OPENGL ด้วย WEBGL – PART 0.2 : พักมาศึกษา Vertex Shader หน่อย

จากที่เคยอธิบายไปคร่าวๆ แล้วว่า Vertex Shader แต่ละแบบใช้ทำอะไรให้ Part 0

ใน Part นี้จะมาอธิบายรายละเอียดเกี่ยวกับ Vertex Shader อย่างลงลึกอีกหน่อย

Vertex Shader รูปแบบของมันจะเป็นประมาณนี้เสมอ

void main() { gl_Position = {คำนวนตำแหน่ง Clipspace} }

Shader จะถูกเรียกใช้งานครั้งนึง ต่อ 1 Vertex, แต่ละครั้งที่มันถูกใช้งานเราต้องกำหนดค่าตำแหน่ง Clipspace ให้ตัวแปร gl_Position

โดยเราสามารถส่งข้อม…

ศึกษา MODERN OPENGL ด้วย WEBGL – PART 1 : สามเหลี่ยมสามสี

มาต่อกันเลยกับพื้นฐาน ที่เว็บ Tutorial แทบทุกเว็บสอนเหมือนกันๆ :p

ใน Part นี้ จะมาทำการสร้างรูปสามเหลี่ยมโดยการส่งข้อมูลเป็น Float Array ไปยัง Vertex Shader ในการสร้างรูปสามเหลี่ยม และลงสีโดยการส่งข้อมูล Float Array เช่นกันไปยัง Fragment Shader

เนื่องจากเป็น WebGL การทำงานก็จะใช้โค้ดภาษา HTML ในการสร้างหน้าเว็บ/กำหนด Element ต่างๆ และ Javascript ในการเขียนโค้ดเกี่ยวกับการใช้งาน WebGL ต่างๆ ดังนั้น…

ศึกษา Modern OpenGL ด้วย WebGL – Part 0 : เกริ่นนำ

ช่วงนี้กลับมาลองๆ OpenGL อีกรอบ รอบนี้จริงจังละ :p จุดประสงค์ของการเขียน Blog หลักๆ ก็เอาไว้ทบทวนความเข้าใจของตัวเองนั่นแหละ

ทำไมถึงเลือก WebGL? เพื่อความรวดเร็วในการศึกษา เวลาย้ายไปเครื่องอื่น ผมไม่ต้องลงโปรแกรมอะไรใหม่ ผมแค่เปิดเครื่องมา Sync DropBox แล้วศึกษาต่อได้เลย

Part นี้เป็น Part เกริ่นนำ ก็จะเขียนเกี่ยวกับความแตกต่างระหว่าง OpenGL แบบเก่ากับแบบใหม่นิดหน่อย

ใน OpenGL จะมี Fixed Function…

ผมใช้โปรแกรม ShoeBox ในการทำ Bitmap font นะ

ขั้นตอนการทำ 1. เตรียมตัวอักษรที่ต้องการใช้งานทั้งหมด โดยใช้พวกโปรแกรมแต่งภาพอย่าง Photoshop เนี่ยแหละ พิมพ์และใส่เอฟเฟคอะไรให้เรียบร้อยเลย แต่ต้องเว้นระยะห่างระหว่างตัวอักษรด้วย แล้วเซฟไฟล์ 2. เปิดโปรแกรม ShoeBox เลือก Tab ชื่อ GUI ลากรูปที่เซฟไว้ ไปตรง Bitmap Font 3. จะปรากฏหน้าต่างชื่อ Bitmap Font กดปุ่ม Setting มุมขวาล่าง 4. จะปรากฏหน้าต่างชื่อ Bitm…

ต่อจาก Part-1

เราสามารถสร้าง Icon โดยใช้ภาพจากกล้องได้แล้ว ใน Part นี้จะเป็นการเขียนคำสั่งให้เซฟออกมาเป็นไฟล์รูป ซึ่งใน Part นี้จะเป็นโค้ดทั้งหมด

ในการเซฟไฟล์ที่มีส่วนที่ Transparent ผมได้วิธีการมาจาก Asset ชื่อ Transparency Capture ซึ่งมีขั้นตอนคือ – Capture รูปที่มีพื้นหลังสีดำ โดยการเปลี่ยน Depth color ของกล้อง – Capture รปที่มีพื้นหลังสีขาว โดยการเปลี่ยน Depth color ของกล้อง –…

การสร้าง Icon ตัวละคร จากโมเดล 3d ด้วย Unity3d (Version 4.6+)

ตอนนี้งานที่กำลังอยู่ของผม คือการเอาตัวละครที่ซื้อมาจาก Asset Store ซื้อมาเป็นเซตเลยมีรวมๆ 100 กว่าตัว

ซึ่งเซตที่ซื้อมาตัวละครแต่ละตัวก็มี Model/Texture/Animation แต่ไม่มีพวก Icon มาให้ ผมเลยต้องมาทำเอง

ก็เลยคิดจะทำโดยใช้ตัว Model นั่นแหละ ให้ทำท่า/วางกล้อง ตามที่ต้องการ แล้ว Capture Screenshot ไปตัดต่อเองอีกที แต่ถ้าทำแบบนั้น ก็ยังรู้สึกว่างานมันเยอะอยู่ดี เลยคิดหาวิธีที่จะสั่งให้ Unity…