การสร้างกาแล็กซี
แผนของผมคือ สร้างแบบจำลองของกาแล็กซีแบบเป็นขั้นตอน เพื่อทำให้ข้อมูลดาวมีบริบท และหวังว่าจะให้มุมมองที่น่าประทับใจของสถานที่ของเราในทางช้างเผือก
![ต้นแบบระยะแรกของกาแล็กซี](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/S5ZbLFPB3RnfRTOT35mW.png?hl=th)
เพื่อสร้างทางช้างเผือก ฉันสร้างอนุภาค 100,000 ชิ้นและนำไปวางเป็นเกลียวโดยการจำลองการก่อตัวของแขนกาแล็กซี ฉันไม่กังวลเกี่ยวกับความเจาะจงของการก่อตัวของแขนเกลียว เพราะนี่เป็นรูปแบบการนำเสนอมากกว่าที่จะเป็นคณิตศาสตร์ อย่างไรก็ตาม ฉันพยายามทำให้ได้จำนวนแขนเกลียวที่ถูกต้องมากขึ้นหรือน้อยลง และหมุนไปใน "ทิศทางที่ถูกต้อง"
ในโมเดลทางช้างเผือกเวอร์ชันต่อๆ ไป ผมได้ลดความสำคัญของการใช้อนุภาคโดยนำภาพระนาบของกาแล็กซีมาใช้ร่วมกับอนุภาค โดยหวังว่าจะให้ภาพลักษณะของกาแล็กซีเหมือนกับภาพลักษณ์อื่นๆ ภาพจริงเป็นของกาแล็กซีกังหัน NGC 1232 ที่ห่างจากเราประมาณ 70 ล้านปีแสง โดยดัดแปลงให้ดูเหมือนทางช้างเผือก
![กำลังคำนวณขนาดของกาแล็กซี](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/dQZVXko0eZdufru9zpqr.png?hl=th)
![พลิก](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/73JKSfkcxMnLw661RnKA.png?hl=th)
หากรอบแว่น
เมื่อคุณพบแถวที่ถูกต้องในเครื่องมือติดตามสำหรับเกมของคุณแล้ว ขั้นตอนต่อไปคือการค้นหาลูปหลัก ลูปหลักจะมีลักษณะซ้ำๆ ในข้อมูลการติดตาม คุณสามารถไปยังส่วนต่างๆ ของข้อมูลการติดตามได้โดยใช้ปุ่ม W, A, S, D: A และ D เพื่อเลื่อนไปทางซ้ายหรือขวา (ย้อนเวลา) และ W และ S เพื่อซูมเข้าและออก หากเกมทำงานที่อัตรา 60 Hz คุณจะคาดว่าการวนซ้ำหลักจะอยู่ในรูปแบบวนซ้ำทุก 16 มิลลิวินาที
![ดูเหมือนว่าเฟรมการดำเนินการ 3 เฟรม](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/OaqgG1IveqQcmrvLbeHs.png?hl=th)
เมื่อคุณระบุฮาร์ตบีตของเกมแล้ว คุณจะสามารถเจาะลึกว่าโค้ดของคุณกำลังทำอะไรในแต่ละเฟรม ใช้ W, A, S, D เพื่อซูมเข้าจนกว่าคุณจะอ่านข้อความในช่องฟังก์ชันได้
![เจาะลึกลงในเฟรมการดำเนินการ](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/LZZ7mv7XoGiC01rIOaWh.png?hl=th)
ใช้คำแปลเพื่อเปลี่ยนมุมมอง
![กำลังแปลระหว่าง 2 มุมมอง](https://web.developers.google.cn/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZbdixE36RlDboM08jwGH.gif?hl=th)
เพื่อให้ชีวิตง่ายขึ้น สมมติว่ามีมุมมอง 2 มุมมอง คือ มุมมองรายการและมุมมองรายละเอียด เมื่อผู้ใช้แตะรายการในมุมมองรายการ มุมมองรายละเอียดจะเลื่อนเข้ามาและมุมมองรายการจะเลื่อนออก
คุณต้องมีคอนเทนเนอร์สำหรับข้อมูลพร็อพเพอร์ตี้ทั้ง 2 รายการที่ตั้งค่า overflow: hidden
เพื่อให้ได้ผลลัพธ์นี้ ด้วยวิธีนี้ ทั้งสองมุมมองสามารถอยู่ในคอนเทนเนอร์ควบคู่กันไปได้ โดยไม่แสดงแถบเลื่อนแนวนอนใดๆ และแต่ละมุมมองสามารถเลื่อนทั้งสองมุมมองไปข้างกันภายในคอนเทนเนอร์ได้ตามต้องการ