เล่น ELITE ด้วย LEVEL51 DECK

Elite Dangerous อีกหนึ่งเกมที่ผมหวังว่าสักวันนึงจะขุดมันกลับมาเล่นอีกครั้ง แถมเมื่อต้นปี ตอนที่ภาค Horizon ลดราคา ผมก็ไปสอยเก็บไว้เรียบร้อยอีกต่างหาก ก็เป็นอีกหนึ่งเกมที่ผมใช้เวลามากกว่า 150 ชั่วโมงจมอยู่กับมัน เรียกได้ว่าเป็นเวลาของครอบครัวของผมเลยละเพราะว่าเล่นกับน้อง เล่นเองทั้งหมดตั้งแต่หัดขับยาน จนตอนท้ายๆ เรามียานระดับยานสำรวจที่แทบจะ Jump ข้ามกาแลคซี่ได้เลยทีเดียว (และก็เคยไปเยี่ยมเนบิวลามารอบนึงแล้ว ใช้ทั้งหมด 52 Jump ขาไป และ 50 Jump ขากลับ Jump กันอยู่สองสามวันได้กว่าจะถึง)

แต่ถ้าใครเคยเปิดเกมนี้ขึ้นมา (มีเกมฟรีด้วยนะ เป็นขับยานยิงกัน) จะทราบว่า เกมนี้ น่าจะเป็นเกมที่มีปุ่มเยอะที่สุดในโลกแล้วละ เยอะแค่ไหน ลองดูในจอนี้แล้วกัน >.<

ผมจำได้เลยว่า ไปถึงขั้นซื้อ Chatpad ของจอย XBOX360 (ซึ่งเป็นจอยที่ทนมากจริงๆ ใช้มา 10 กว่าปีแล้วมั๊งเนี่ย ยังไม่พังเลย) มาเสียบเพิ่มกันเลย ก่อนจะพบว่ามันใช้งานไม่ได้บนคอมนะ เหอๆ แต่เขาแก้แล้วนะ ถ้าจอย XBOX One ใส่ Chatpad จะสามารถกดปุ่มบน Chatpad แทนคีย์บอร์ดได้เลย

แต่ทำไมผมจะต้องไปเสียตังค์ซื้อจอย XBOX One กะ Receiver และ Chatpad รวมแล้วประมาณเกือบ 5 พัน มาด้วยละล่ะและในเมื่อตอนนี้ผมได้คิดค้นระบบ DECK ขึ้นมาแล้ว~ งั้นก็ต้องหยิบขึ้นมาใช้ซะหน่อย~ เย้ ซึ่ง DECK จะต้องโปรแกรม systemX นะ ถ้ายังไม่มี ดาวน์โหลดได้จากที่นี่เลย

ติดตั้ง systemX

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

และความสามารถล่าสุด ที่ผมเพิ่งไปหยิบเอาไอเดียโปรแกรมเก่าโบราณที่เคยเขียนมารวมกับความรู้ใหม่ที่สะสมมาในช่วงหลังๆ นี้ ก็คือ DECK เนี่ยแหละ (ก็คือก่อนนู้นเลย ผมต่อคอมกะทีวีที่บ้าน เลยอยากจะกด Play/Pause/ปรับเสียง โดยไม่ต้องเดินไปที่หน้าคอมน่ะครับ แหะๆ)

อะไรคือ DECK?

อธิบายด้วยวีดีโอน่าจะง่ายที่สุด ก็ด้วย DECK เราจะสามารถใช้หน้าจอมือถือ หรือ Tablet เพื่อกดปุ่มบนคีย์บอร์ด เปิด Shortcut บนหน้า Desktop ของ หรือว่าเปิดเว็บขึ้นมาก็ได้ แบบนี้

หลังจากติดตั้งโปรแกรม systemX แล้ว ก็สามารถเปิดใช้งานได้จากหน้า LEVEL51 DECKเลย และเรื่องความปลอดภัยก็ไม่ต้องห่วง เพราะมือถือที่จะต่อเข้ามาดูหน้าจอ DECK และ SystemZ ได้ จะต้องอยู่ในเครือข่ายเดียวกัน/ต่อ WiFi เดียวกันกับเครื่องที่เปิด systemX เท่านั้น จะไม่ใช่โปรแกรม Remote Support ที่ให้ใครก็ได้ต่อเข้ามาที่เครื่องเรานะ (แต่ถ้าอยากจะต่อมาจากข้างนอก ก็ไปทำ Port Forwarding ก็ได้)

นอกจากนี้ คุณยังสามารถเลือกได้ด้วยว่า จะให้เฉพาะคนที่แสกน QR Code เท่านั้น ที่สามารถเปิดเข้ามาดูได้ ป้องกันเพื่อนแกล้งเวลามาบ้าน และก็เปิด/ปิดการใช้งาน Script ซึ่งเป็นความสามารถขั้น Advance ของ DECK ได้ด้วย และท้ายสุดถ้าจะให้สามารถใช้งานได้ จะต้องกดที่เมนู SystemZ / Deck อย่างน้อย 1 ครั้ง เพื่อเปิดช่องใน Firewall ของ Windows ให้เครื่องอื่นสามารถต่อมาใช้งาน DECK ได้ ดังนั้นต้องตั้งใจจะใช้จริงๆ ถึงจะสามารถใช้ความสามารถนี้ได้นะ

และหน้าจอของโปรแกรม DECK ในมือถือ เราสามารถกำหนดหน้าตาเองได้ เพราะว่ามันเป็น HTML ธรรมดาใครเคยเขียนเว็บก็สบายเลย ซึ่งคุณสามารถส่งไฟล์นี้ แชร์ให้ใครใช้ก็ได้ เพียงแค่วางไฟล์ลงไปใน My Documents อย่างผมจะทำ DECK สำหรับเปิดเกม กับกดเปิด Steam Overlay ผ่าน Tablet แบบนี้ แล้วส่งให้เพื่อนใช้ ก็แค่ส่งไฟล์ gamedeck.html ให้เพื่อน พร้อมกับไฟล์รูปที่ใช้ เท่านั้นเอง

วิธีการสร้าง DECK ของคุณเอง

แน่นอนว่า พลังที่แท้จริงของ DECK มันคือการสร้าง DECK ของคุณเอง ที่ตอบโจทย์การทำงานของคุณที่สุด หรือ เอา DECK ที่เข้าท่า มาแชร์กันต่างหาก (เดี๋ยวคงต้องทำพื้นที่สำหรับแชร์ไฟล์ DECK แล้วสิ)

สำหรับไฟล์ DEC ตัวอย่าง จะมีเซฟไว้ให้อยู่ใน My Documents\SystemX\deck แล้ว ไฟล์ชื่อว่า index-sample.html สามารถใช้โปรแกรมแก้ไขไฟล์ อย่างเช่น Notepad แก้ไขได้เลย แต่ชีวิตจะดีกว่า ถ้าเราใช้โปรแกรมที่เอาไว้เขียนเว็บโดยเฉพาะ ก็ขอแนะนำ Visual Studio Code แล้วกันนะ

(อันที่จริงวิธีการเขียน HTML เบื้องต้นผมมีสอนไว้แล้วนิดหน่อย กับอีกฟีเเจอร์นึงที่ชื่อว่า SystemZ แต่ว่าหน้าจอของ SystemZ จะเขียนซับซ้อนกว่า ถ้าสนใจอยากรู้เพิ่ม ก็ไปติดตามอ่านดูได้เลย)

พอติดตั้ง Visual Studio Code แล้ว ก็ก็อปปี้ไฟล์ index-sample.html มาเป็น elite.html แล้วเริ่มแก้ที่ไฟล์นี้แล้วกันนะ โดยการ เปิด Folder My Documents\SystemX\deck ขึ้นมาใน VSCode ก่อน โดยใช้เมนู File->Open Folder แล้วก็เปิดไฟล์ elite.html ขึ้นมา

Deck ทำอะไรได้บ้าง

1) เปิด Shortcut บนหน้า Desktop

ถามว่าทำไมต้องเป็น Shortcut บน Desktop อันนี้ก็เพื่อความปลอดภัยนั่นแหละ เพราะว่าถ้าไปปล่อยให้เปิด .EXE ตัวไหนก็ได้ เกรงว่าจะเป็นช่องโหว่ด้านความปลอดภัยไป ดังนั้น ผมจึงตัดสินใจว่า เอาแค่ Shortcut เนี่ย พอแล้ว และก็คงจะเป็นอะไรที่เราใช้บ่อยอยู่แล้วด้วย จริงไหมละ

ซึ่งโค๊ดสำหรับเปิด Shortcut จะเป็นลักษณะนี้ สังเกตคำว่า deck-shortcut="ชื่อ shortcut"

แบบนี้ หมายถึงว่า ให้ Deck เปิดไอคอน Elite Dangerous ที่วางอยู่บนหน้า Desktop ขึ้นมา เมื่อเราแตะปุ่มนี้ และเพื่อความสมบูรณ์แบบ เราก็จะต้องเติมไอคอนลงไปซะหน่อย ผมค้นๆ แล้วเจอไอคอนเท่ห์มากใน Deviant Art เลยดาวน์โหลดมาใช้ โดยเซฟเอาไว้ใน Folder My Documents\SystemX\deck ซึ่ง Visual Studio Code ก็จะรู้เห็นเป็นใจ และเราสามารถเพิ่มโค๊ด <img src="..." /> พิพม์ตัว e ไปหนึ่งตัวแล้ว VSCode ก็จะทำการแสดง Autocomplete ให้เราเลย แบบนี้ สามารถกดลูกศรลง แล้วกด Tab เพื่อรับ Autocomplete ได้เลยไม่ต้องคลิกเมาส์ (ส่วนถ้าอันที่มันเลือกให้อันแรกถูกอยู่แล้ว ก็กด Tab ได้เลย)

ส่วนที่เห็น < กับ > อันนี้เรียกว่า Tag อย่าง <button></button> แบบนี้้ หมายถึงว่าเราจะให้มีปุ่มขึ้นมา เรียกว่า Tag Button โดย Tag ที่มี </ > แบบนี้ลงท้าย แปลว่ามะันเป็น Tag ที่มีอย่างอื่นอยู่ในตัวมันได้ แต่ Tag img ที่ไม่มี </img> หมายถึงว่า มันเป็น Tag ตัวย่อยสุดแล้ว ข้างในมีอะไรเพิ่มอีกไม่ได้

2) กดปุ่ม

โค๊ดสำหรับกดปุ่ม จะเป็นลักษณะนี้ สังเกตคำว่า deck-keypress

แบบนี้ หมายถึงว่า ปุ่มนี้บน DECK จะเป็นการกดปุ่ม Shift+TAB บนคีย์บอร์ด เพื่อเปิด Steam Overlay และถ้าดูตัวอย่างปุ่มอื่นๆ ก็จะมีเขียนว่า alt ctrl ด้วย นั่นก็หมายถึงว่า ถ้าเราเขียนแบบนี้

จะเป็นการกดปุ่ม CTRL+ALT+SHIFT และ F1 พร้อมกัน

ทำให้เราสามารถใช้ปุ่มบน Deck แทนการกดปุ่ม Hotkey ในทุกโปรแกรมได้ โดยสมมุติว่าเราจะใช้ systemx Deck ควบคุมการเปลี่ยน Scene ของ OBS (OBS ต้องคลิกขวา Run As Admin ถึงจะสามารถจับ Hotkey โดยที่หน้าต่างโปรแกรมไม่ถูกคลิกอยู่ได้นะ) เราก็เปิดหน้า OBS แล้วทำการกดปุ่มบน Deck ใส่ลงไปในหน้าจอเลย แบบนี้ ก็เป็นอันเรียบร้อย

หรือเราอาจจะใช้คู่กับ AutoHokey เพื่อใช้สั่งงานที่ซับซ้อนขึ้นอีกก็ได้นะ ก็เขียน AutoHotkey แล้วจับ Hotkey จากนั้นให้ DECK เป็นคนกดปุ่ม เพื่อไปเรียก AutoHotkey ให้ทำงานอีกทีนึง

อ้อ! แล้วถ้าต้องการไอคอนสวยๆ ก็เอามาจากเว็บ icons8 ได้เลย แค่เข้าเว็บ แล้วก็เลือกไอคอน จากนั้นเลือก Embed HTML แล้วก็อปโค๊ดมาวางก็ใช้ได้เลย (จริงๆ เราต้องเอาลิงค์ไปเว็บ icons8 วางในหน้าเว็บให้เขาด้วย แต่เราใช้เอง เห็นอยู่คนเดียว คงจะไม่ต้องก็ได้ :P)

3) เปิด URL

โค๊ดสำหรับเปิด URL ขึ้นมา ก็จะเป็นโค๊ดแบบนี้ ไม่มีอะไรซับซ้อน ก็ Windows จะเปิด Browser มาตรฐานของเครื่องออกมา แล้วไปที่ URL ที่เราเขียนไว้

4) Script

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

วิธีการเพิ่มปุ่ม และทดสอบปุ่ม

สำหรับไฟล์ตัวอย่างที่ผมทำเอาไว้ให้ จะแสดงผลออกมาเป็น Grid หรืออารมณ์คล้ายๆ กับตาราง มีปุ่มเรียงกัน โดย 1 แถว จะมีปุ่มได้สูงสุด 5 ปุ่ม และถ้าใส่ปุ่มน้อยกว่า 5 ปุ่ม ปุ่มที่มีอยู่ก็จะขยายตัวให้พอดีกับพื้นที่ที่มีในแถวนั้นโดยอัตโนมัติ ดังนั้นถ้าคุณต้องการจะเพิ่มปุ่ม ก็เพียงแค่ก็อปปี้ปุ่มที่มีอยู่ออกมา แล้ววางลงไปได้เลย

อย่างตอนนี้ถ้าลองเอาเราลองเอาปุ่มวางลงไปตามผม ก็จะได้ปุ่มออกมาแบบนี้

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

http://localhost:5293/deck/[ชื่อไฟล์ Deck].html

เช่น ตอนนี้เรากำลังแก้ไฟล์ elite.html อยู่ ถ้าเราอยากจะทดสอบ ก็พิมพ์ว่า http://localhost:5293/deck/elite.html ลงในช่อง Address เป็นต้น ปุ่มที่อยู่ในหน้านี้ก็สามารถใช้งานได้จริง ลองกดดูได้เลยจากในหน้า Browser นี้แหละ

ตัวอย่าง: หน้าจอ Deck สำหรับ Elite Dangerous และ HTML+CSS เบื้องต้น

คราวนี้สำหรับ Elite Dangerous เราจะต้องทำให้มันเข้า Theme ซะหน่อย เราก็ต้องมาดูกันก่อนว่า มีปุ่มอะไรที่เราจะต้องใช้บ่อยๆ และเหมาะที่จะเอามือออกจากจอย ไปกดบ้าง (ผมเล่นด้วยจอยนะ) ก็สรุปได้ว่า คงจะต้องเป็นปุ่มของโหมดสำรวจ ลงจอด อะไรแบบนี้ เพราะว่าถ้าเราขับยานยิงกันอยู่ เอาปุ่มที่จะใช้ตอนยิงมาอยู่บนจอยแต่แรกจะดีกว่า

ผมก็เลยคิดไว้คร่าวๆ ว่า จะทำหน้าจอแบบนี้แหละ ปุ่มไหนต้องกดเวลาลนๆ ก็ให้มันใหญ่หน่อย แบบนี้

อย่างแรกเลย เราก็เอาปุ่มที่เราต้องการ วางลงไปให้หมดซะก่อน ให้เป็นระเบียบ แยกตามกลุ่ม แบบนี้ โดยมองจากแนวตั้งมานะ สังเกตว่า เนื่องจากเราไม่ได้จำเป็นจำต้องใช้อะไรอ้างอิงแล้วว่าปุ่มอะไรควรอยู่ไหน ก็ใช้ปุ่ม Q W E R T Y ... ไล่ไปเลย อารมณ์นี้

แต่ตอนในหน้าจอ ปุ่มมันก็จะเรียงแถวกันไปนะ ยังไม่ออกมาแบบที่เราต้องการเท่าไหร่ เราก็จะต้องมาจัดกลุ่มมันซะหน่อย

วิธีที่จะทำได้มีหลายวิธีเลย แต่ว่าผมขอเลือกวิธีที่ถนัดแล้วกัน ก็คือผมจะจับมันใส่ tag Div ก่อน โดยมองว่า หน้าจอมี 3 column อันไหนอยู่กลุ่มเดียวกัน ก็ให้มันอยู่ Div เดียวกัน และอันไหนจะอยู่บรรทัดเดียวกัน ก็ซ้อนเข้าไปใน div อีกที

แต่ว่าพอแก้ไขแบบนี้ปุ๊บ หน้าจอจะพังเลย แต่ว่าโครงคร่าวๆ ออกมาถูกต้องละ

สาเหตุที่ปุ่มมันกลายเป็นแบบสี่เหลี่ยมเหมือนเดิม นั่นก็เพราะว่า Style ที่ผมกำหนดไว้ให้นั้น เขียนไว้ว่า เฉพาะปุ่มที่อยู่ใต้ class="deckgrid" เท่านั้น ที่จะเป็นพื้นสีเหลือง โดย Style ถูกกำหนดไว้ตรงนี้

จริงๆ เอา CSS ใส่ไว้ในไฟล์ HTML แบบนี้ น่าโดนตีมาก เราควรจะแยกไฟล์ออกไปจะดีกว่า สังเกตว่าบนๆ มีการเชื่อมไฟล์ .css เข้ากับไฟล์ HTML ไฟล์นี้อยู่ด้วยนะ จะเขียนไว้ประมาณนี้

แต่เพื่อความไม่งง เราจะเอารวมกันแบบนี้ไปน่ะแหละ

ทีนี้ลองมาดู Style จะเห็นว่าใน Style ที่ผมเขียนไว้ให้ดู มีหลายแบบด้วยนะ

.deckgrid (มีจุดข้างหน้า) หมายถึง style นี้ ใช้สำหรับ tag div ที่มี class="deckgrid" อยู่
.deckgrid > button หมายถึง tag button ที่อยู่ใต้ div class="deckgrid" เท่านั้น ถ้าย้อนกลับไปดูโค๊ด จะเห็นว่า ตอนแรกที่ปุ่มยังเป็นสีเหลือง เพราะว่า button มันอยู่ใต้ div ทันที แต่ตอนนี้มันมี div มาคลุม button เอาไว้ มันก็เลยไม่ถูกใช้งานแล้ว
button:active หมายถึง tag button แต่ว่าเป็นตอนที่ปุ่มโดนกด จะเห็นว่าสีเหลืองมันเปลี่ยนไปนิดนึงเวลากด
.deckgrid > button > img อัันนี้เป็นการกำหนดย่อยลงไปอีกว่า tag img ที่อยู่ใน tag button และ tag button นั้น จะต้องอยู่ใต้ tag div ที่มี class="deckgrid" อยู่ด้วยเท่านั้น

ทีนี้ถ้าเราจะแก้ให้ปุ่ม มันกลับเป็นเหมือนเดิม เราก็ทำได้สองวิธี

ลบ .deckgrid > ข้างหน้าออก เพื่อบอกว่า ให้ปุ่มทุกปุ่มบนหน้านี้เลย เป็นปุ่มสีเหลือง หรือ
เปลี่ยนจาก .deckgrid > button เป็น .deckgrid button (เอา > ออก) ก็ได้ แบบนี้จะหมายถึงว่า tag button ที่อยู่ใน .deckgrid แต่ว่า ไม่ต้องอยู่ข้างใต้แบบติดกันก็ได้ มีอะไรมาคั่นกลางก่อนก็ได้

ผมชอบให้มันมี structure เพราะว่าไม่งั้นหน้าจอมันยุ่งมากๆ จะชอบงง ผมจะใช้วิธีที่สองนะ คือเอา > ออก ปุ่มก็จะเป็นสีเหลืองเหมือนเดิมแล้ว แต่หน้าจอก็ยังจะไม่เป็นไปตามที่เราต้องการอยู่ดี

จัดหน้ากันต่อ ด้วย CSS ละกัน

เรารู้จักการเลือกโครงสร้างใน CSS และการใช้ class="xxx" แล้ว เราก็เอามาประยุกต์ใช้ร่วมกันเลย ก็คือจากในหน้าจอของเรา เราจะมีคอลัมน์กว้าง 1 อัน กะคอลัมน์แคบสองอัน เราจะเรียกคอลัมน์แคบว่า narrow และ คอลัมน์กว้างว่า big โดยการเดิม class="narrow" และ class="big" ลงไป แบบนี้

แต่เติมแค่ class ลงไปเฉยๆ มันก็ไม่มีประโยชน์อะไรหรอก มันก็ออกมาเหมือนเดิมน่ะแหละ เราต้องเพิ่ม Style ลงไปด้วย แบบนี้ โดย .narrow เราบอกว่า flex-basis: 12.5% หมายถึงว่า ให้ความกว้างพื้นฐานข้อมันคือ 12.5% แต่ .big เราบอกว่า ให้มัน flex-grow: 1 แปลว่าให้มันขยายได้จนเต็มพื้นที่ไปเลย

        .deckgrid > .narrow {
            flex-basis: 12.5%
        }

        .deckgrid > .big {
            flex-grow: 1;
        }

แต่ว่าปุ่มข้างในเรายังไม่ค่อยถูกใจเท่าไหร่ เราอยากให้แถว Narrow ปุ่มมันขยายจนเต็ม ใช่ไหมละ เราก็เพิ่มไปตามนี้ เพื่อให้ปุ่มมันขยายเต็ม 100% ตามความกว้างของคอลัมน์

.deckgrid > .narrow > button
{
     width: 100%;
}

ส่วนแต่ละแถวๆ ของคอลมัน์ big เราอยากจะให้ปุ่มมันกระจายกันตามความกว้างด้วย เราก็จะต้องไประบุว่า ให้ div ที่อยู่ใต้ .big มันเป็น Flex Container ด้วย เพื่อให้มันกระจายความกว่้างปุ่มได้อัตโนมัติ แบบนี้

        .deckgrid > .big > div {
            display: flex;
        }

เราก็จะได้ผล เกือบจะเหมือนกับที่เราต้องการแล้วสิ ขาดแค่ FSD กัับ Jump ยังไม่ได้ขนาดปุ่มที่เราต้องการ เพราะว่าสองปุ่มนี้ มันไม่ได้อยู่ใต้ div แบบปุ่มอื่นๆ เขา

ทำยังไงดีละทีนี้? ก็ใช้ CSS อีกตามเคย เราก็ให้ปุ่ม มันแสดงผลเป็นแบบ Block ซึ่งมันจะแสดงผลเต็มความกว้างและดันสิ่งที่อยู่ต่อจากมันลงไปข้างล่างเลย ต่างจากปกติของมันที่เป็นแบบ inline ซึ่งสามารถมีคนอื่นมาต่อท้ายมันได้

        .deckgrid > .big > button {
            display: block;
            width: 100%;
        }

โดยระบบพวกนี้ ใน CCS เราเรีียกว่า FlexBox (Flexible Box) ลองตามไปอ่านเพิ่มได้ทางนี้ ถ้าอยากจะเรียงปุ่มได้ถูกใจมากขัึ้น มันเรียงได้หลายแบบมากตามชื่อเลยละ

แต่งหน้าจอให้สวยขึ้น

เริ่มเลยเลยเราก็จะมาแก้ฟอนต์กันหน่อย สำหรับฟอนต์ที่ใช้ในเกม Elite Dangerous นั้น จะเป็นฟอนต์ Eurocaps ซะเป็นส่วนมาก เราสามารถโหลดได้จากเว็บ dafont เลย ทางนี้ https://www.dafont.com/euro-caps.font พอโหลดมาแล้ว ก็ติดตั้งลงในเครื่องได้เลยโดยการ Double Click

แต่ว่า ถ้าเราเอาแค่ฟอนต์นี้ มาติดตั้งในเครื่องเรา เวลาแสดงผลในมือถือ ฟอนต์มันจะไม่ตามไปด้วยหรอกนะ เราจะต้องทำการแปลงฟอนต์นี้ สำหรับใช้งานบนเว็บก่อน โดยการไปที่เว็บ https://www.fontsquirrel.com/tools/webfont-generator แล้วเอาไฟล์ .TTF ที่ได้มาโยนลงไป

แล้วเลือกแบบ "Basic" ไม่ต้องไป Process อะไรมันเยอะ และก็เลือก "Yes" ด้วย (ปล. Font EUROCAPS นั้นฟรีอยู่แล้วตามที่บอกใน dafont นะ) แล้วก็ดาวน์โหลดมาได้เลย จากนั้นเปิดไฟล์ Zip (ด้วย 7-zip! ถ้ายังใช้ WinRAR อยู่แล้วไม่ได้จ่ายตังค์เขา ก็โหลด 7-Zip มาใช้ได้แล้วละ) แล้วเอาใส่ folder fonts ไว้แบบนี้

แล้วเราก็เอา EUROCAPS มาใช้ โดยการ link ไฟล์ .css เข้ามา ด้วยโค๊ด (หมายเหตุ: ในตัวอย่างเขียนผิดนะ ต้องไม่มี / ข้างหน้าคำว่า fonts/)

<link rel="stylesheet" href="fonts/eurocaps.css" />

แล้วก็เปลี่ยน font ของปุ่ม โดยเพิ่ม font-family: 'eurocaps_regular' ลงไป (ซึ่งเรารู้ว่าต้องเขียนแบบนี้จากการเปิดดูไฟล์ eurocaps.css ที่เราได้มา

เย้ ได้ปุ่มคล้าย Elite Dangerous ละ ยกเว้นติ่ง SYS MAP เดี๋ยวแก้อีกที

ถัดมาก็ UI ของ Elite Dangerous จะต้องสีออกส้มๆ หน่อย เราก็ไปดูดสีจากหน้าเว็บของ Elite Dangerous ด้วย Tool ที่คนเขียนเว็บทุกคนพึงมี คือ ShareX แล้วก็มาปรับจูนสีอีกนิดหน่อยตามความชอบ ได้ออกมาเป็นสีประมาณนี้ (เหมือนจะดูยากกว่าเดิมนะ >.<)

ก็เลยต้องเพิ่มเงาตัวอักษร กับเงาขอบไปหน่อย เพื่อให้ได้ Effect แบบนี้ (ในที่สุดหน้านี้ก็แก้คำว่า SHIELF ซะที...)

สรุปโค๊ดที่เพิ่มไป ก็ประมาณนี้ (Color, background-color, text-shadow และ box-shadow และก็ต้องเปลี่ยนตรง active ด้วยนะ ไม่งั้นสีมันจะเพี้ยนตอนกด

ส่วนตรง sysmap ผมโกงนิดนึงโดยการใส่ Style hard code ความสูงของบรรทัดลงไปเลย ก็ได้ผลดีเหมือนกัน ออกมาดูสวย

           <button deck-keypress Key="P"
                   style="line-height: 75%">System<br/>Map</button>

แล้วจากนั้นผมก็ลองใช้กับ มือถือ (Huawei MediaPad M3) แล้วก็ขยายตัวอักษร กับขนาดปุ่มอีกหน่อย ก็ได้ผลน่าพอใจละ!~ ที่เหลือก็คือแค่ นั่ง Bind ปุ่ม แล้วก็หาเวลาเล่นเกม เท่านั้นเอง~~~!!!

ที่เหลือ อยู่ที่คุณแล้วละ!

ก็ถ้าเกิดว่าคุณมีไอเดีย ว่า DECK ควรจะทำอะไรได้อีก หรือว่า มีไฟล์ DECK เจ๋งๆ อย่าลิืมส่งมาให้เราได้ที่ [email protected] แล้วเราจะวางไว้ให้ในหน้านี้นะ~ ส่วนที่ผมแพลนไว้ว่าอยากจะทำเพิ่ม ก็คือ

ระบบให้อััพโหลด DECK มาแชร์กัน เลือกค้นหา DECK มาใช้งาน
สลับไฟล์ DECK อัตโนมัติ ตามโปรแกรม/เกม ที่กำลังเปิดอยู่ในตอนนั้น

แต่ตอนนี้ ต้องขอตัวไปทดสอบระบบกันหน่อยแล้ววว