บันทึกผู้สร้าง

เรื่องราวและบันทึกจากการสร้าง FleaWinder — ละครสัตว์แอนิเมชันจิ๋วที่ขับเคลื่อนด้วยแป้นพิมพ์และเมาส์ของคุณ

พาละครสัตว์ไปสู่หน้าจอเล็ก

FleaWinder ออกแบบมาสำหรับแถบกว้างบางเหนือแถบงาน — แนวนอนอย่างสบาย โทรศัพท์เป็นแนวตั้ง การทำให้ละครสัตว์ใช้งานได้บนหน้าจอเล็กหมายถึงการคิดเลย์เอาต์ใหม่โดยไม่สูญเสียความมีชีวิตชีวา

The embeddable widget flips to a tall canvas on mobile, stacking the acts vertically instead of spreading them across a ribbon. Anyone dropping FleaWinder into their own site gets a layout that adapts automatically. Four theme presets (dark, light, warm, cool) and a scale parameter let it blend with whatever surrounds it.

ความท้าทายที่ใหญ่กว่าคือความสามารถอ่านได้ บนหน้าจอโทรศัพท์ หมัดที่วาดในขนาดเดสก์ท็อปเป็นแค่จุด เราเพิ่มขั้นตอนซูมที่ขยายร่างกายหมัดเพื่อให้ชุด สีหน้า และเครื่องประดับของพวกมันมองเห็นได้จริง — ที่คาดผมของ Pip, หมวกกันน็อกของ Rex, มงกุฎเล็กๆ ของ Blaze รายละเอียดบุคลิกภาพที่มีมาตลอดก็อ่านได้ในระยะแขน

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

ชุดแต่งกาย ฤดูกาล และหัวหน้าคณะละครสัตว์

สัปดาห์นี้ทั้งหมดเกี่ยวกับความลึกทางภาพ หมัดทุกตัวในอาณานิคมตอนนี้สวมชุดเฉพาะตัว — Nova มีร่มบนเส้นลวด, Rex สวมหมวกกันน็อกในปืนใหญ่, Blaze ได้มงกุฎสำหรับการแสดงพ่นไฟ รายละเอียดเล็กๆ แต่ให้ตัวตนที่จำได้แค่ชำเลืองมอง

เวทีเปลี่ยนไปตามปฏิทิน ระบบอนุภาคตามฤดูกาลโปรยหิมะในฤดูหนาว ดอกซากุระในฤดูใบไม้ผลิ หิ่งห้อยในฤดูร้อน และใบไม้ร่วงหล่นในฤดูใบไม้ร่วง ยังมีโทนสีกลางวัน/กลางคืนที่ละเอียดอ่อนผูกกับนาฬิกาจริงของคุณ — แถบอุ่นขึ้นในชั่วโมงทอง และหรี่ลงหลังมืด พร้อมดาวที่สว่างกว่าบนท้องฟ้ายามค่ำ

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

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

v1.1.0: การแสดงใหม่สองชุด

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

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

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

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

ประวัติศาสตร์เบื้องหลังหน้าประวัติศาสตร์

หน้าประวัติศาสตร์ของ FleaWinder บันทึกละครสัตว์หมัดจริงมากกว่าสี่ร้อยปี — ตั้งแต่ภาพวาดกล้องจุลทรรศน์ของ Robert Hooke ในปี ค.ศ. 1665 จนถึงนักแสดงที่เทศกาล Oktoberfest ที่ยังคงทำงานอยู่ในปัจจุบัน การเขียนหน้านี้หมายถึงการอ่านใบปลิวยุควิกตอเรีย คลิปข่าวดิจิทัล และบทความวิชาการเกี่ยวกับความบันเทิงด้านกีฏวิทยาที่มากอย่างน่าประหลาดใจ

ส่วนที่ยากที่สุดคือการตัดสินใจว่าจะตัดอะไรออก Louis Bertolotto คนเดียวก็เขียนได้เป็นหนังสือ (และเขาก็เขียนจริง — หลายเล่มด้วย) ทางออกคือเส้นเวลาที่ครอบคลุมจุดสำคัญ และชุดหัวข้อที่ขยายได้สำหรับผู้ที่ต้องการเจาะลึก

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

ข้อความทั้งหมดมีให้ในภาษาอังกฤษ สเปน และเยอรมัน กระบวนการแปลทำให้ค้นพบประวัติศาสตร์ท้องถิ่นที่น่าสนใจ — เช่น ประเพณี Flohzirkus ของเยอรมันที่เทศกาล Oktoberfest มีสายเลือดเป็นของตัวเองที่แตกต่างจากฉากในลอนดอนและนิวยอร์ก

ทำไมผมถึงสร้าง FleaWinder

ผมอยากได้บางอย่างที่ทำให้คอมพิวเตอร์รู้สึกมีชีวิตชีวา — ไม่ใช่แบบรบกวน แต่เป็นเพื่อนเงียบ ๆ ที่ตอบสนองต่อการปรากฏตัวของคุณ สกรีนเซฟเวอร์ส่วนใหญ่เปิดทำงานเมื่อคุณจากไป แต่ FleaWinder เปิดทำงานเมื่อคุณมาถึง

ไอเดียนั้นเรียบง่าย: เอาอินพุตที่ไม่ได้ใช้ทั้งหมดที่ระบบปฏิบัติการเพิกเฉย — จังหวะการพิมพ์ ความเร็วเมาส์ จังหวะการคลิก — แล้วป้อนให้คณะละครสัตว์หมัดแอนิเมชัน ยิ่งคุณทำงานมาก โชว์ก็ยิ่งมีชีวิตชีวา

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

FleaWinder เป็นจดหมายรักถึงละครสัตว์หมัดยุควิกตอเรีย — ศิลปะที่มีอยู่จริงมาหลายศตวรรษ ที่ช่างนาฬิกาใช้หมัดจริงลากรถม้าจิ๋วและเดินเชือก หน้าประวัติศาสตร์เล่าเรื่องราวนั้นอย่างครบถ้วน