کازینو رمزنگاری
دنده تورنت
تکنولوژی های رندر و گرافیک در اسلات های مدرن
1. خوانایی نمادها و برنده، 2. پایدار 60 FPS بدون بیش از حد، 3. بسته نرم افزاری آسان و شروع سریع، 4. «اثرات وای» بدون مصالحه با صداقت نتیجه (همه چیز بصری در بالای نتیجه قبلا محاسبه شده است).
در زیر یک راهنمای سیستم برای تکنولوژی، خط لوله و معیارها است.
1) رندر پشته: آنچه در آن تشکیل شده است
2D/WebGL/Canvas - PixiJS، Phaser، движки داخلی (HTML5/WebView).
2. 5D/3D - وحدت (WebGL/تلفن همراه)، PlayCanvas، سه. جی اس.
WebGPU (ظاهر می شود) - رشد در shader ها/پس پردازش و کنترل حافظه.
صوتی/جدول زمانی - WebAudio/Unity Audio + جدول زمانی انیمیشن (GSAP/ستون فقرات/جدول زمانی وحدت).
دارایی ها - اطلس اسپریت، فونت SDF/MSDF، ستون فقرات/DragonBones، کدک های ویدئویی/وب، بافت فشرده سازی.
ابزار - اسپکتور. js/DevTools/Unity Profiler، بسته بندی های اطلس، کمپرسورهای ASTC/ETC2/BCn.
2) مدل های گرافیکی: 2D، 2. 5D و متوسط 3D
خالص 2D: درام تخت، UI در لایه ها، فیلترها و ماسک. سریع و قابل پیش بینی
2. 5D: قرقره چشم انداز، اختلاف منظر، شیب/دور، ویژگی های 3D بیش از 2D UI بهترین نسبت وای/عملکرد.
3D کامل: جایزه/مقدمه صحنه، چرخ شانس، "دوربین در اطراف. "نیاز به نظم و انضباط: LOD، محدودیت های مادی، laytinґ ساده شده است.
توصیه: در اسلات، خوانایی کلیدی در 2D/UI لایه است ؛ 3D - برای مقدمه و نادر setpises.
3) سایه ها و اثرات پس از آن (ایمن و اقتصادی)
واحدهای شیدر معمولی:- درخشش/طرح کلی برای نمادها/برنده (SDF/تاری به رندر هدف).
- درجه بندی رنگ/HSV Shift برای مراحل موضوعی (روز/شب، پاداش).
- تحریف/Heatwave در پس زمینه به طوری که با متن دخالت نمی کند.
- ذرات افزودنی برای آتش بازی (ارزان در ترکیب).
- ماسک/استنسیل برای «پنجره» در درام، صرفه جویی در overdraw.
سطح معقول پس از فرآیند: بلوم با زنجیره downsample، Vignette، Chromatic aberration (حداقل). در تلفن همراه - غیر فعال کردن/ساده توسط LOD.
4) انیمیشن ها: جدول زمانی، پشت و «حس سود»
جدول زمانی: ماشین حالت «Idle → Spin → Stop → Count → Celebrate»، انیمیشن ها - تعیین شده توسط زمان، نتیجه در حال حاضر شناخته شده است.
انیمیشن اسکلت (ستون فقرات/DragonBones): قهرمانان طلسم/نمادها، مقرون به صرفه در حافظه، آسان برای تغییر کلیپ.
Tweening (GSAP/Animator): انیمیشن های عددی از رابط و برنده شمارنده (easeOutExpo برای «حس رشد»).
هماهنگ سازی با صدا: لحظات کلیدی (درام توقف/دسته کوچک موسیقی جاز) - از طریق نشانگر در جدول زمانی، و نه با توجه به منطق قاب.
قابلیت دسترسی حرکت: حالت «حرکت کمتر»، خاموش کردن گردن/اختلاف منظر.
5) بافت، اطلس و فشرده سازی
اطلسهای اسپریت: اطلسهای بزرگ (2048-4096) برای کاهش سوئیچ بافت ؛ گروه بندی با ترکیب.
فشرده سازی:- ASTC (iOS/اندروید مدرن)، ETC2 (اندروید)، BCn (دسکتاپ/WebGL2)، WEB/PNG.
- صرفه جویی در سطح mip برای زمینه های 3D و بزرگ (کاهش سوسو زدن).
- کانال آلفا Premultiplied: مخلوط کردن صحیح و هاله کمتر.
- فونت MSDF/SDF: عناوین روشن/اعداد با طرح/درخشش بدون بافت بزرگ.
6) ذرات (GPU دوستانه)
بیلبوردها با یک اطلس + GPU instancing (در 3D) و یا butching (در 2D).
افزودنی/ترکیب آلفا توسط لایه ؛ مدت زمان پخش کننده ها را محدود کنید.
دوز نازک: ذرات «نشان می دهد» پیروزی، اما نمادها همپوشانی ندارد.
جمع آوری اشیاء به طوری که برای تولید خوشه GC نیست.
7) ترکیب صحنه و سفارش نقاشی
Слои: بازگشت → قرقره → نمادها → FX → UI → پوشش.
اول مات، سپس شفاف.
ماسک ها/استنسیل ها بر روی درام ها - به طوری که پس زمینه «در زیر» مناطق شفاف ارائه نمی شود.
پاک کردن Z-منظور، غیر فعال کردن عمق در 2D به طوری که هیچ آزمون غیر ضروری وجود دارد.
8) دارایی های خط لوله و بارگیری
تولید اطلس (TexturePacker/Spine Export)، برش اتوماتیک، نام هش ("آیکون. AB12. PNG ').
بارگذاری تاخیر از صحنه های جایزه و FX سنگین (تنبل).
قالب بندی فونت (MSDF)، صادرات منحنی انیمیشن.
CDN & basting cache: دارایی های غیر قابل تغییر، TTL کوتاه در مانیفست.
WebCodecs/WebAssembly برای رمزگشایی سریع، OffscreenCanvas برای ارائه در خارج از موضوع اصلی (در صورت موجود بودن).
9) عملکرد: اهداف و اندازه گیری ها
اهداف: 60 FPS در دستگاه های مرجع ؛ اولین قابل پخش <5-10 ثانیه وب/< 10 ثانیه تلفن همراه ؛ دمای پایدار.
SLI های کلیدی:- تماس ها را بکشید (دکمه های بیشتر، سوئیچ های بافت کمتر).
- Overdraw (heatmap - اجتناب از ورق های شفاف).
- زمان GPU/فریم زمان CPU (زمان بندی رندر و منطق به طور جداگانه).
- حافظه/VRAM (سنبله، نشت).
- اندازه بسته نرم افزاری و بار دارایی p95.
- لکنت/GC (مقدار و مدت زمان).
ابزار: اسپکتور js، Chrome DevTools/Performance، Safari Web Inspector، Xcode/Android GPU Inspector، Unity Profiler/Frame Debugger.
10) بهینه سازی که «آب و هوا»
Butching: گروه بندی شده توسط مواد/اطلس/ترکیب ؛ in Pixi - الگوهای «محفظه ذرات »/« هندسه».
LOD: خاموش کردن سایه های سنگین/ذرات در دستگاه های ضعیف ؛ اطلس های جایگزین با وضوح پایین تر.
ضربه محکم و ناگهانی پیکسل و موقعیت عدد صحیح - تارهای کمتر هنگام پیمایش درام.
کاهش شفافیت: جایگزین آلفا بزرگ می میرد با مش مسطح/ماسک.
ما رندر هدف (RTT) را برای اثرات تکرار می کنیم.
فونت های کوتاه: یک مجموعه MSDF با سبک های پویا به جای دوازده فونت PNG.
پس از پردازش در نیمه رزولوشن (یک چهارم/نیمه رزولوشن) + مقیاس دو جانبه.
ضد انیمیشن: گیره قاب (بیش از N به روز رسانی در ثانیه).
فیزیک معقول: هیچ شبیه سازی «سنگین» - فقط منحنی های از پیش آماده شده.
11) رنگ، گاما و خوانایی
sRGB/رندر خطی: رنگ های صحیح و ترکیب.
کنتراست UI: شماره های برنده - کنتراست بالا و سایه ها/طرح کلی.
رنگ کور دوستانه: اجتناب از ترکیبات بحرانی (قرمز/سبز بدون فرم dopcoding).
درجه بندی رنگ مارک - با دقت، خواندن شخصیت ها را نمی کشد.
12) هماهنگ سازی گرافیک با گیم پلی و صوتی
نتیجه چرخش/پاداش قبل از انیمیشن محاسبه می شود ؛ گرافیک فقط اسکریپت را بازتولید می کند.
نقاط اوج (توقف درام، مگا برنده) - علائم جدول زمانی ؛ صدا و لرزش به آنها گره خورده است.
بودجه مدت زمان: درام متوقف می شود <1. 2–1. 6 ثانیه، شمارش برنده - سریع و با امکان «جست و خیز».
13) تست کیفیت گرافیک
عکس های فوری بصری (رگرسیون): نمادها، فونت ها، موقعیت.
ماتریس دستگاه: بودجه آندروید (مالی/Adreno)، آی فون/آی پد قدیمی، دسکتاپ.
نقشه های حرارتی و پروفایل های GPU را اضافه کنید.
قابلیت استفاده برای خوانایی: 3-5 پاسخ دهنده، قطر/روشنایی مختلف، شرایط تابش خیره کننده.
قابلیت دسترسی: «حرکت کمتر»، CTA های بزرگ، حالت کنتراست بالا.
14) دستور العمل های کوچک (قالب های آماده)
A. درام با شبه 3D
روبان شخصیت تخت + ماسک پنجره.
پس زمینه با اختلاف منظر آسان (دو بافت، سرعت های مختلف).
سایه بان «دور» لبه ها و سایه نور در داخل پنجره.
حالت های انیمیشن سوئیچینگ بر اساس جدول زمانی، نه منطق RNG.
B. اثر «پیروزی بزرگ»
هدر مقیاس گزاف گویی (0. 9 → 1. 1 → 1. 0، easeOutElastic).
ذرات افزودنی آتش بازی 0. 8–1. 2 پ.
درخشش متن SDF + شکوفه نرم با وضوح نیمه.
دکمه Skip همیشه در دسترس است.
ج ریتم آبشار «ارزان»
یک صدای کامپوزیت با نشانگر ؛ تصاویر فقط «چشمک می زند».
شمارنده X در مراحل رشد می کند، طرح شخصیت - از طریق طرح MSDF.
اثرات پست توسط LOD در دستگاه های ضعیف غیرفعال می شوند.
15) اشتباهات مکرر و چگونگی اجتناب از آنها
sprites شفاف بزرگ → overdraw وحشی. راه حل: برش «در شکل «/ماسک/RTT.
بیش از حد بسیاری از فونت ها/سبک → انفجار VRAM. راه حل: یک بسته MSDF، سبک در سایه زن.
تلفن های ویدئویی بدون فشرده سازی/مکث → قاب قطره/حرارت. راه حل: چرخه کوتاه، میزان ارسال بیت کم، توقف در هنگام تاشو.
تصادفی GC در طول تعداد پیروزی. راه حل: استخر های شیء، فرستنده های پیش گرم.
زمان بندی توسط فریم به جای زمان → خارج از همگام سازی. راه حل: اتصال به deltaTime/timeline.
شکوفه خیلی روشن → "صابون. "راه حل: زنجیره downsample + محدودیت شدت.
عوارض جانبی سنگین برای همه راه حل: LOD/پرچم های دستگاه.
16) چک لیست انتشار گرافیکی
عملکرد
- 60 FPS در مراجع ؛ حداکثر بودجه <بودجه هدف
- رسم تماس در راهرو ؛ ساتن/مواد بوچینگ
- بیش از حد بر روی قرقره ها و UI «قرمز» نیست
- حافظه/VRAM در بودجه، بدون نشت
دارایی ها
- هش، اطلس فشرده سازی: ASTC/ETC2/BCn + جایگزین
- فونت SDF/MSDF، یک مجموعه در هر پروژه
- نسخه LOD از اثرات/صحنه های پس زمینه
انیمیشن ها/جدول زمانی
- همه رویدادهای کلیدی - توسط نشانگر، جست و خیز در دسترس است
- هماهنگ با صوتی/ارتعاش
- حالت کاهش حرکت فعال می شود
تست ها
- عکس های تصویری سبز هستند
- GPU/CPU پروفایل در ماتریس دستگاه
- صحنه های بار (چند برنده، چند ذره)
توزیع محصولات
- CDN گرم شده، کار پایه کش
- پاداش تنبل در حال بارگذاری و FX سنگین
- بسته نرم افزاری در حد، اولین قابل پخش در هدف
گرافیک در اسلات ها تعادل زیبایی شناسی و مهندسی است: سایه ها و اثرات برای احساسات، فشرده سازی و فشرده سازی برای سرعت، جدول زمانی برای درام کنترل شده، دسترسی برای همه بازیکنان. تیم برنده زمانی که آنها طراحی بصری داده محور، اندازه گیری همه چیز از تماس قرعه کشی به overdraw، نگه داشتن بسته نرم افزاری نور و به بازیکن «وای» بدون از دست دادن FPS و خوانایی. این است که چگونه اسلات های مدرن متولد می شوند: زیبا، سریع و صادقانه.