بازی خرگوش اسکیتباز
یک خرگوش کوچک روی یخ اسکیت میکند. صحنه سهبعدی است و کف زمین مثل آینه میدرخشد. انگشتت را روی یخ بکش تا دنبالت بیاید. هر جا ببری، آرام به همان سمت سر میخورد. 🐰
روی صفحه ضربه بزن تا بپرد. روی کامپیوتر با ماوس هدایتش کن و برای پرش کلیک کن یا Space را بزن. اینجا برنده و بازندهای نیست. پس فقط بازی کن و حرکت نرم خرگوش را تماشا کن. ⛸️
حالا خودت بازی کن
انگشتت را روی یخ بکش تا خرگوش دنبالت بیاید و برای پرش ضربه بزن. روی کامپیوتر با ماوس هدایتش کن و کلیک کن یا Space را بزن. 🐰
بازتاب خرگوش را روی یخ هم ببین. همان تصویر است که وارونه کشیده میشود. ⛸️
صحنهی سهبعدی چطور ساخته میشود
مرورگر خودش سهبعدی بلد نیست، برای همین این بازی از three.js کمک میگیرد. این یک کتابخانهی جاوااسکریپت (JavaScript) است. تو به آن میگویی چه چیزی در صحنه باشد و کجا بایستد.
سه چیز لازم داری: صحنه، دوربین و نور. صحنه ظرف همهی اجسام است و دوربین مشخص میکند از کجا نگاه میکنی. بعد three.js هر فریم کل صحنه را روی بوم (canvas) میکشد. همین که این کار دهها بار در ثانیه تکرار شد، تصویر زنده به نظر میرسد. 🎥
پرش خرگوش و کف آینهای
پرش را three.js انجام نمیدهد؛ این کار با GSAP است. GSAP یک کتابخانهی انیمیشن است. تو فقط میگویی ارتفاع خرگوش در نیم ثانیه به چه عددی برسد. بقیهاش با خودش.
بدون آن باید هر فریم ارتفاع را دستی حساب کنی. ولی GSAP این حسابها را برایت انجام میدهد و پرش نرم درمیآید. کف یخ هم آینهای است. تصویر خرگوش یک بار دیگر و وارونه روی زمین کشیده میشود تا حس بازتاب بدهد. ✨
ببینیم یاد گرفتی
دو ابزار جدا این بازی را میسازند. یک سوال کوتاه دربارهی اینکه هر کدام چه کار میکنند.
در «بازی خرگوش اسکیتباز» هر کدام از three.js و GSAP چه کاری میکنند؟
این بازی دو ابزار جدا دارد و هر کدام کار خودش را میکند.
three.js صحنهی سهبعدی را میسازد: خرگوش، یخ، دوربین و کف آینهای که بازتاب میدهد. هر فریم هم همین صحنه را دوباره میکشد.
GSAP سراغ صحنه نمیرود و فقط انیمیشن پرش را اجرا میکند. وقتی روی صفحه ضربه میزنی، ارتفاع خرگوش را نرم بالا و پایین میبرد. روی کامپیوتر کلیک یا Space همین کار را میکند.
حرکت روی یخ جدا از پرش است. خرگوش دنبال انگشت یا نشانگر تو میآید و آرام به سمتش میرود.