làm game animation bằng html5/css3

• 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ần mề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ường Việ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/

Thông tin diễn giả

• 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: [email protected]

mailto:[email protected]

Game Animation with HTML5&CSS3

Nguyễn Minh Tuấn0988516666

[email protected]

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.

HTML5 tương lai của lập trình web

2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 410610

5

10

15

20

25

30

35

40

8.6 9.4 11.1 12.715.7 16.7

2023.5

26.628.8

32.7 34.3

Bảng thống kê tỷ lệ người dùng internet

=> Sự bùng nổ của internet

Sự bùng nổ của internet

Thời gian Số người dùng Thời gian Số người dùng

1995 16 triệu 2004 817 triệu

1996 36 triệu 2005 1,018 triệu

1997 70 triệu 2006 1,093 triệu

1998 147 triệu 2007 1,319 triệu

1999 284 triệu 2008 1,574 triệu

2000 361 triệu 2009 1,802 triệu

2001 513 triệu 2010 1,971 triệu

2002 587 triệu 2011 2,267 triệu

2003 719 triệu 6/2012 2,405 triệu

2010 – 2011: Tăng 296 triệu người dùng

2011 – 6/2012: Tăng 138 triệu người dùng

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


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.

HTML5The future of web development

Một số ứng dụng thực tế trong game của AIT

Movie 1: Race Movie 2: Battle


Movie 3: VR Movie 4: Battle Noel


Movie 3: Cafeidol Movie 4: 3012


Movie 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…

-moz-transform: css_function…

-o-transform: css_function…

-ms-transform: css_function…

-webkit-transform: scale(2,2) translate(100,100)

Animation with CSS3&HTML5

CSS Function (2D Transformation)

Translate(x,y)

Rotate(degree)

Skew(x,y)

Scale(x,y)

transform example

http://www.css3maker.com/css3-transform.html


CSS Function (3D Transformation)

TranslateX(x)TranslateY(y)TranslateZ(z)

RotateX(x)RotateY(y)RotateZ(z)

SkewX(x)SkewY(y)SkewZ(z)

ScaleX(x)ScaleY(y)ScaleZ(z)

Translate3d(x,y,z) Rotate3d(x,y,z)

Skew3d(x,y,z) Scale3d(x,y,z)


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


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


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


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”>

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

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.

làm game animation bằng html5/css3

Technology