[EN] Hosting Unity WebGL game on the sever

This article discusses bringing a Unity-developed WebGL-style game onto a server running Ubuntu operating system in the Google Compute Engine.

Developing a game with Unity, we can code a game once and create a game on multiple systems, whether it’s Windows, Android or the web, etc. Before we can put our game on the server, we need to modify it. Build target to WebGL first by going to File > Build Settings and selecting Platform as WebGL as shown in Figure 1.

Figure 1 Selecting WebGL platform

In browsers, compressed files are encoded to reduce data usage, we need to select the compression that the browser supports in Player Settings > Publishing Settings > Compression Format. If we don’t want compression, it can be set to Disabled.

Figure 2 Set Compression Format to Disabled

Then build and select the location to store the files, we will get the files roughly as shown in Figure 3.

Figure 3 File from building

The game will be able to run on the web, allowing us to upload all the files to the server immediately. But don’t forget the location or URL that can be accessed from outside as well. By the way, we upload the file in apache to be able to access it.

Figure 4 The sample game

After uploading and specifying the URL location, we can play the game right away. Everyone can go and try it out at https://www.jarutex.com/www/html/lab/

Conclusion

Uploading games to the server is easy. Since the games obtained from Unity are HTML files, they can be used in the browser immediately. But the thing to be concerned about is compression. If the browser does not support the required compression, our game will not work.

(C) 2022, By Jarut Busarathid and Danai Jedsadathitikul

Updated 2022-03-30

[TH] Hosting Unity WebGL game on the sever

บทความนี้กล่าวถึงการนำตัวเกมที่พัฒนาจาก Unity ในลักษณะของ WebGL ขึ้นไปไว้บนเซิฟเวอร์ที่ใช้ระบบปฏิบัติการ Ubuntu ใน Google compute engine

การพัฒนาเกมด้วยโปรแกรม Unity เราสามารถที่จะสร้างเกมเพียงครั้งเดียวและสร้างตัวเกมในหลายระบบได้ ไม่ว่าจะเป็น Windows, Android หรือเว็บ เป็นต้น ก่อนที่เราจะนำเกมของเราขึ้นเซิฟเวอร์ได้ต้องทำการปรับเปลี่ยน build target เป็น WebGL เสียก่อน โดยเข้าที่ File > Build Settings และเลือก Platform เป็น WebGL ดังภาพที่ 1

ภาพที่ 1 เลือก Platform เป็น WebGL

ในเบราเซอร์จะมีการเข้ารหัสบีบอัดไฟล์เพื่อลดการใช้งานข้อมูลลงซึ่งเราจำเป็นต้องเลือกการบีบอัดที่เบราเซอร์สนับสนุนใน Player Settings > Publishing Settings > Compression Format หากเราไม่ต้องการบีบอัดสามารถเลือกเป็น Disabled ได้ครับ

ภาพที่ 2 ปรับ Compression Format เป็น Disabled

จากนั้นทำการ Build และเลือกตำแหน่งที่ต้องการเก็บไฟล์เราจะได้ไฟล์คร่าวๆ ดังภาพที่ 3

ภาพที่ 3 ไฟล์ที่ได้จากการ Build

เกมที่ได้จะสามารถรันบนเว็บได้ให้เรานำไฟล์ที่ได้ทั้งหมดอัพโหลดขึ้นเซิฟเวอร์ได้ทันทีครับ แต่ต้องไม่ลืมตำแหน่งหรือ URL ที่สามารถเข้าถึงจากภายนอกได้ด้วยนะครับ โดยทางเราอัพโหลดไฟล์ไว้ใน apache เพื่อให้เข้าถึงได้ครับ

ภาพที่ 4 ตัวอย่างเกม

หลังจากอัพโหลดและระบุตำแหน่ง URL เรียบร้อยเราสามารถเข้าเล่นเกมได้ทันทีเลยครับ ทุกท่านสามารถเข้าไปทดลองเล่นได้ที่ https://www.jarutex.com/www/html/lab/

สรุป

การอัพโหลดเกมขึ้นเซิฟเวอร์นั้นสามารถทำได้ง่ายดาย เนื่องจากเกมที่ได้จาก Unity เป็นไฟล์ html ทำให้สามารถใช้งานบนเบราเซอร์ได้ทันที แต่ข้อควรระวังคือการบีบอัด หากเบราเซอร์ไม่สนับสนุนการบีบอัดที่กำหนด เกมของเราก็จะไม่สามารถใช้งานได้ครับ

(C) 2022, อ.จารุต บุศราทิจ / อ.ดนัย เจษฎาฐิติกุล

ปรับปรุงเมื่อ 2022-03-10

[EN] Scanning a QR Code and displaying 3D objects in Unity3D

As for the ultimate game creation program like Unity3D, it has a lot to offer as mentioned before. One of which is that the program can create games on almost every platform such as computer or mobile. This article will talk about the use on mobile phones. Of course, there must be a component that the computer does not have, such as a camera, which will discuss how to scan a QR Code to operate according to the text that can be extracted and ordered it to be rendered as a 3D object.

QR Code

Introductory bit for everyone to understand that QR Code is similar to Barcode, that is, the text is converted into a specified format which looks like a square. There are three direction points to know which side is the top and use the program to scan to extract text which can be letters, numbers, various characters, links, etc.

To decode a QR code to text, you can either scan it with a camera or save an image and use a decoder.

Figure 1 QR code of text “Hello world!! we are Jarutex!!”
Read More

[EN] Unity3D The great game maker

This article introduces Unity3D, a very popular game creation program. Because there are so many facilities needed to make a game. Called quite complete, such as the manipulation of three-dimensional objects, gravity, system movement of objects, can create games on multiple platforms for example. Controlling objects requires knowledge of a programming language which can be practiced.

Figure 1 Unity’s logo
Read More

[TH] การสแกน QR Code และแสดงวัตถุสามมิติใน Unity3D

สำหรับสุดยอดโปรแกรมสร้างเกมอย่าง Unity3D แล้วนั้นมีจุดเด่นมากมายดังที่เคยกล่าวไป ซึ่งข้อหนึ่งนั้นคือการที่โปรแกรมสามารถสร้างเกมได้ในแทบทุกแพลตฟอร์มไม่ว่าจะเป็น คอมพิวเตอร์หรือมือถือ ซึ่งในบทความนี้จะกล่าวถึงการใช้งานบนมือถือ ซึ่งแน่นอนว่าต้องมีอุปกรณ์ที่คอมพิวเตอร์ไม่มีเช่น กล้อง โดยจะกล่าวถึงวิธีการแสกน QR Code เพื่อสั่งงานตามข้อความที่ถอดมาได้ และสั่งให้แสดงเป็นวัตถุ 3 มิติ

QR Code

เกริ่นสักนิดก่อนเพื่อให้ทุกท่านเข้าใจว่า QR Code มีลักษณะคล้ายกับ Barcode คือมีการแปลงข้อความให้อยู่ในรูปแบบที่กำหนด โดยมีลักษณะเป็นสี่เหลี่ยมจตุรัส มีจุดบอกทิศอยู่ 3 มุม เพื่อให้รู้ว่าด้านไหนเป็นด้านบน และใช้โปรแกรมในการแสกนเพื่อถอดข้อความซึ่งเป็นได้ทั้ง ตัวอักษร ตัวเลข อักขระต่างๆ ลิงค์ ฯ

เมื่อต้องการถอดรหัส QR code เป็นข้อความสามารถทำได้ทั้งการใช้กล้องแสกน หรือ บันทึกรูปภาพและใช้โปรแกรมถอดรหัส

ภาพที่ 1 QR code ของข้อความ “Hello world!! we are Jarutex!!”
Read More

[TH] การใช้ GPS ใน Unity3D

จากบทความ Unity3D ครั้งที่แล้วได้กล่าวถึงฟีเจอร์บางส่วนในโปรแกรม ในบทความนี้จึงขอกล่าวฟีเจอร์หนึ่งที่น่าสนใจ คือการใช้งาน GPS ใน Unity3D โดยเฉพาะผู้เริ่มต้นใหม่ เนื่องจากในโปรแกรมมีการใช้งาน GPS ที่ค่อนข้างง่าย

Read More

[TH] Unity3D สุดยอดโปรแกรมสร้างเกม

บทความนี้แนะนำเกี่ยวกับโปรแกรม Unity3D ซึ่งเป็นโปรแกรมสร้างเกมที่ได้รับความนิยมอย่างมาก เนื่องจากมีสิ่งอำนวยความสะดวกที่จำเป็นในการสร้างเกมอย่างมากมาย เรียกได้ว่าครบถ้วนเลยทีเดียว เช่น การจัดการวัตถุสามมิติ ระบบแรงโน้มถ่วง การเคลื่อนที่ของวัตถุ สร้างเกมได้หลายแพลตฟอร์ม เป็นต้น แต่อย่างไรก็ดี การควบคุมวัตถุต่างๆจำเป็นต้องใช้ความรู้ทางด้านภาษาโปรแกรม ซึ่งสามารถฝึกฝนได้

ภาพที่ 1 Unity
Read More