0
• Công ty Cổ phần AI &T hoạt động chuyên nghiệp trong lĩnh vực sản xuất phầnmềm, thực hiện các dự án CNTT phục vụ trực tiế...
• Họ và tên : Nguyễn Minh Tuấn• Công ty: Công ty cổ phần AI&T• Vị trí: Project Manager• Sở thích: đọc sách, chém gió với b...
Game Animation    with HTML5&CSS3             Nguyễn Minh Tuấn                  0988516666              tuannm1@ai-t.vn
Nội dung chính  1. HTML 5 tương lai của lập trình web.  2. Một số ứng dụng thực tế trong game của AIT.  3. Tổng quan về HT...
HTML5 tương lai của lập trình web            Bảng thống kê tỷ lệ người dùng internet4035                                  ...
Sự bùng nổ của internetThời gian     Số người dùng   Thời gian    Số người dùng1995          16 triệu        2004         ...
Trái tim của internet là World Wide Web (WWW) 1974. Xuất hiện thuật ngữ internet 1986. Thời kỳ bùng nổ internet lần 1 với ...
Trái tim của internet là World Wide Web (WWW) Code của tôi chạy được trên IE nhưng ko chạy được trên chrome Code của tôi c...
Trái tim của internet là World Wide Web (WWW)
Một số ứng dụng thực tế trong game của AIT     Movie 1: Race         Movie 2: Battle
Một số ứng dụng thực tế trong game của AIT     Movie 3: VR           Movie 4: Battle Noel
Một số ứng dụng thực tế trong game của AIT     Movie 3: Cafeidol     Movie 4: 3012
Một số ứng dụng thực tế trong game của AITMovie nào được làm hoàn toàn bằng HTML 5
Tổng quan về HTML 5
Animation với CSS3&HTML5     Transform: CSS3_Function1() CSS3_Function2()            -webkit-transform: css_function…     ...
Animation with CSS3&HTML5   CSS Function (2D Transformation)                       Translate(x,y)                       Ro...
Animation with CSS3&HTML5   CSS Function (3D Transformation)   TranslateX(x)                        RotateX(x)   Translate...
Animation with CSS3&HTML5   Transition   Transition-property : Tên thuộc tính được áp dụng transition (all)   Transition-d...
Animation with CSS3&HTML5   Animation   Tạo ra animation trong CSS3 có 2 bước:         1. Khai báo frame         2. Áp dụn...
Animation with CSS3&HTML5   Animation – Tạo frame   @keyframes „vidu1‟ {      0% {width: 100px, opacity: 0}      30% {widt...
Animation with CSS3&HTML5   Animation – Thi hành animation   Một số thuộc tính của animation trong CSS3      Animation-nam...
Kinh nghiệm làm animation với HTML5   1. Animation không thể làm hoàn toàn bằng tay (flash,   wallaby)   2. Android 2.x kh...
Kinh nghiệm làm animation với HTML5   7. Hiện tại xử lý canvas trong HTML 5 bằng cpu nên xử   lý chậm, với iOS 6 có hỗ trợ...
Làm game animation bằng HTML5/CSS3
Upcoming SlideShare
Loading in...5
×

Làm game animation bằng HTML5/CSS3

3,437

Published on

Speaker: Nguyễn Minh Tuấn
Work at: AI&T

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,437
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
163
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Làm game animation bằng HTML5/CSS3"

  1. 1. • Công ty Cổ phần AI &T hoạt động chuyên nghiệp trong lĩnh vực sản xuất phầnmềm, thực hiện các dự án CNTT phục vụ trực tiếp cho khách hàng tại thị trườngViệt Nam và Nhật Bản.• Thành lập: 23/09/2005• Quy mô công ty: 140 nhân viên• Trụ sở: Tầng 5, Tòa nhà Agribank, 266 Đội Cấn, Ba Đình, Hà Nội• Tel: 84-4-3762-4015• Fax: 84-4-3762-1594• Website: http://www.ai-t.vn/
  2. 2. • Họ và tên : Nguyễn Minh Tuấn• Công ty: Công ty cổ phần AI&T• Vị trí: Project Manager• Sở thích: đọc sách, chém gió với bạn bè• Số điện thoại: 0988516666• Email: tuannm1@ai-t.vn
  3. 3. Game Animation with HTML5&CSS3 Nguyễn Minh Tuấn 0988516666 tuannm1@ai-t.vn
  4. 4. Nội dung chính 1. HTML 5 tương lai của lập trình web. 2. Một số ứng dụng thực tế trong game của AIT. 3. Tổng quan về HTML 5. 4. Animation với CSS3. 5. Kinh nghiệm làm animation với HTML 5.
  5. 5. HTML5 tương lai của lập trình web Bảng thống kê tỷ lệ người dùng internet4035 32.7 34.330 28.8 26.625 23.5 2020 15.7 16.715 11.1 12.7 8.6 9.410 5 0 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 Jun-12 => Sự bùng nổ của internet
  6. 6. Sự bùng nổ của internetThời gian Số người dùng Thời gian Số người dùng1995 16 triệu 2004 817 triệu1996 36 triệu 2005 1,018 triệu1997 70 triệu 2006 1,093 triệu1998 147 triệu 2007 1,319 triệu1999 284 triệu 2008 1,574 triệu2000 361 triệu 2009 1,802 triệu2001 513 triệu 2010 1,971 triệu2002 587 triệu 2011 2,267 triệu2003 719 triệu 6/2012 2,405 triệu2010 – 2011: Tăng 296 triệu người dùng2011 – 6/2012: Tăng 138 triệu người dùng
  7. 7. Trái tim của internet là World Wide Web (WWW) 1974. Xuất hiện thuật ngữ internet 1986. Thời kỳ bùng nổ internet lần 1 với sự kết nối giữa các trường đại học. Cho đến lúc này đối tượng sử dụng vẫn chủ yếu là các nhà nghiên cứu 1991. Thời kỳ bùng nổ internet lần 2 với sự ra đời của WWW. Trong thời kỳ đầu, các trang web chỉ đơn thuần là kí tự và ảnh tĩnh. Nhu cầu của con người ngày càng nâng cao, đòi hỏi các trang web phải cung cấp nhiều nội dung hơn => nhiều công nghệ mới được ra đời. Nhiều trình duyệt mới được ra đời
  8. 8. Trái tim của internet là World Wide Web (WWW) Code của tôi chạy được trên IE nhưng ko chạy được trên chrome Code của tôi chạy được trên chrome nhưng không chạy được trên Firefox Plugins là gì, tôi có thể download ở đâu => Chúng ta cần phải có một chuẩn thống nhất => HTML5 Khi chúng ta nói về HTML5, chúng ta không chỉ nói về đặc tả HTML5 mà còn bao gồm tất cả công nghệ đi cùng với nó. Ví dụ: CSS3, Web Workers, Web Storage… Đây là các công nghệ được sử dụng cùng với HTML5 nhưng chúng là các công nghệ độc lập và có các đặc tả riêng của mình. HTML5 The future of web development
  9. 9. Trái tim của internet là World Wide Web (WWW)
  10. 10. Một số ứng dụng thực tế trong game của AIT Movie 1: Race Movie 2: Battle
  11. 11. Một số ứng dụng thực tế trong game của AIT Movie 3: VR Movie 4: Battle Noel
  12. 12. Một số ứng dụng thực tế trong game của AIT Movie 3: Cafeidol Movie 4: 3012
  13. 13. Một số ứng dụng thực tế trong game của AITMovie nào được làm hoàn toàn bằng HTML 5
  14. 14. Tổng quan về HTML 5
  15. 15. Animation với CSS3&HTML5 Transform: CSS3_Function1() CSS3_Function2() -webkit-transform: css_function… -moz-transform: css_function… -o-transform: css_function… -ms-transform: css_function… -webkit-transform: scale(2,2) translate(100,100)
  16. 16. Animation with CSS3&HTML5 CSS Function (2D Transformation) Translate(x,y) Rotate(degree) Scale(x,y) transform example
  17. 17. Animation with CSS3&HTML5 CSS Function (3D Transformation) TranslateX(x) RotateX(x) TranslateY(y) Translate3d(x,y,z) RotateY(y) Rotate3d(x,y,z) TranslateZ(z) RotateZ(z) ScaleX(x) Skew3d(x,y,z) ScaleY(y) Scale3d(x,y,z) ScaleZ(z)
  18. 18. Animation with CSS3&HTML5 Transition Transition-property : Tên thuộc tính được áp dụng transition (all) Transition-duration : thời gian thi hành hiệu ứng (5s) (500ms) Transition-delay : thời gian trễ của hiệu ứng, có thể nhận giá trị âm ??? Transition-timming-function : Ease : chậm – nhanh – chậm Ease-in : chậm - nhanh Ease-in-out : nhanh – chậm Linear : đều -webkit-transion: all 5s 0s linear
  19. 19. Animation with CSS3&HTML5 Animation Tạo ra animation trong CSS3 có 2 bước: 1. Khai báo frame 2. Áp dụng frame vào trong animation
  20. 20. Animation with CSS3&HTML5 Animation – Tạo frame @keyframes „vidu1‟ { 0% {width: 100px, opacity: 0} 30% {width: 150px, opacity: 0.5} 100% {width: 150px, opacity: 1} Tại thời điểm bắt đầu animation phần tử có width = 100px, và opacity = 0 Đến khi thời gian thi hành animation được 1/3 phần tử có width = 150px, opacity = 0.5 Tại thời điểm kết thúc animation phần tử có width = 150px, opacity = 1
  21. 21. Animation with CSS3&HTML5 Animation – Thi hành animation Một số thuộc tính của animation trong CSS3 Animation-name: tên của keyframes được định nghĩa trước Animation-duration: thời gian thi hành animation Animation-delay: thời gian trễ của animation, có thể âm Animation-timming-function: giống transition Animation-iteration-count: số lần lặp lại animation, (infinite lặp vô hạn) <div style=“-webkit-animation: vidu1 12s 0ms linear”>
  22. 22. Kinh nghiệm làm animation với HTML5 1. Animation không thể làm hoàn toàn bằng tay (flash, wallaby) 2. Android 2.x không hỗ trợ SVG 3. Android 2.x không hỗ trợ thời gian delay âm 4. Android 2.x không hỗ trợ fill-out 5. translate3d(x,y,z) có hardware accelerate trên iphone nhưng chết trên Android 2.x 6. Cùng một phiên bản hệ điều hành android, sự hỗ trợ animation khác nhau tùy theo vendor
  23. 23. Kinh nghiệm làm animation với HTML5 7. Hiện tại xử lý canvas trong HTML 5 bằng cpu nên xử lý chậm, với iOS 6 có hỗ trợ GPU nên canvas chạy tốt hơn. 8. Xử lý CSS3 với hàm rotateX, rotateY, rotateZ trong iOS dễ dẫn đến hiện tượng memleak. Tránh sử dụng các hàm này khi làm animation nếu bạn không muốn game bị die đột ngột. 9. Thiết kế animation ở mức 8-10 FPS là khá đảm bảo về độ mượt trên iPhone và performance. 10. Việc quản lý bộ nhớ khi lập trình game HTML5 là rất quan trọng, có thể sử dụng công cụ WebDevTool của Chrome để theo dõi bộ nhớ và khoanh vùng xử lý từng màn hình.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×