پیشنهاد فرادرس

آموزش ساخت بازی های HTML5 از ابتدا - ترسیم و انیمیشن

دسته بندی ها: آموزش HTML ، آموزش انیمیشن سه بعدی ، آموزش ساخت بازی ، آموزش طراحی وب ، آموزش های WintellectNOW ، انیمیشن دوبعدی ، دیزاین

بدون انیمیشن، یک بازی چیزی بیش از عناصر استاتیک در یک صفحه نیست که سرگرم کننده نخواهد بود. در این دوره با ترسیم به وسیله HTML5 Canvas API، انیمیشن canvas، نمایش game loop، نحوه استفاده از requestAnimationFrame و نحوه اطمینان از حرکت مداوم در طول زمان، حتی زمانی که نرخ فریم متفاوت باشد آشنا می شوید.

سرفصل:

  • مقدمه
  • ترسیم در Canvas
  • آماده سازی برای ترسیم
  • مثال شکل
  • مثال Bitmap
  • مثال متن
  • ترسیم در Canvas
  • انیمیشن
  • Game Loop
  • requestAnimationFrame
  • ایجاد انیمیشن با Game Loop
  • تنظیمات انیمیشن
  • تطبیق انیمیشن ها
  • منابع اضافی
  • خلاصه
Developing HTML5 Games from Scratch: Drawing and Animation Publisher:WintellectNOW Author:G. Andrew Duthie Duration:00:35:48

Without animation, a game is nothing more than static elements on a page...which, let’s face it, isn’t very entertaining. In this session, Andrew reviews the basics of drawing using the HTML5 Canvas API, and then introduces canvas animation. Among other things, you'll learn how to enact a game loop, how to use requestAnimationFrame, and how to ensure consistent movement over time, even when the frame rate varies.
00:00:03 - Introduction
00:00:35 - Drawing on Canvas
00:01:11 - Preparing to Draw
00:01:57 - Shape Examples
00:03:35 - Bitmap Examples
00:05:03 - Text Examples
00:06:09 - Drawing on Canvas (Demo)
00:15:12 - Animation
00:16:12 - The Game Loop
00:18:07 - requestAnimationFrame
00:20:41 - Driving Animation using the Game Loop (Demo)
00:26:56 - Throttling Animations
00:27:56 - Smoothing Animations
00:30:01 - Throttling and Smoothing Animations (Demo)
00:34:44 - Additional Resources
00:35:08 - Summary

پیشنهاد فرادرس

captcha