SlideShare a Scribd company logo
HTML5 Animation
in Mobile Web Games

Sangmin, Shim
Speaker
What is Animation?
HTML5 Animation in Mobile Web Games
文, 絵 ゾングダゾング



twitter @yameyori
e-mail usamibabe@naver.com
webtoon http://comic.naver.com/webtoon/list.nhn?titleId=409630
Animation is the rapid display of
a sequence of images to create
   an illusion of movement.
Each image contains small
changes in movement, rotation,
           scale …
HTML5 Animation in Mobile Web Games
Let’s see more detail
1. Resource Management
Resource Management




    Loading Image
Resource Management

• Game or Animation contains many
  resources. Each resource size is bigger
  than resources in web pages(larger than
  3Mbytes)
Resource Management

• Loading screens are required to load
  resources
Resource Management

• Always load resources asynchronously
  var img = document.createElement(“img”);
  img.onload = function () {
      alert("ok!");
  };
  img.onerror = function () {
      alert("error");
  };

  img.src = "test.png";
  document.body.appendChild(img);
2. Objectivation
Objectivation




  abstraction into an object
Objectivation

• DOM Elements can be handled separately.
  However objects cannot be handled
  separately in HTML5 Canvas




 DOM Elements have regions each   Canvas draw object to one Context
Objectivation
          Objects that contain the necessary information is required
          when drawing

                                     Canvas
Objectivation

• Contains position and properties for
  display.
            var oItem = new Item();
            oItem.width = 100;
            oItem.height = 100;
            oItem.x = 50;
            oItem.y = 150;
            oItem.color = "#123456";
            oItem.visible = true;
3. Animation
Animation




            Animation
Animation

• Rendering-Pipeline must be used to tackle
  multiple objects simultaneously.

                           no


                Register        Is there    yes     Draw
   Initialize                   updated
                Pipeline        object?             object




                                   one tick cycle
Animation
 // drawing
 function draw() {
     // clear canvas
     ctx.clearRect(0, 0, ctx.canvas.width,
 ctx.canvas.height);

      // draw each object.
      for (var i = 0; i < list.length; i++) {
          list[i].drawEachObject();
      }
 };

 // repeat 60 times per second
 setInterval(draw, 1000 / 60);
Animation




     draw   draw   draw   draw   draw


       Repeat 60 times per second
Why is it repeated 60 times per second?
• Most PC monitors show 60 frames per
  second. Therefore, there is no point in
  making animation that is 60 FPS.
Using requestAnimationFrame
instead of setInterval
• requestAnimationFrame is the browser's native
  way of handling animations.
• Helps get a smooth 60 frames per second.
• iOS6 supports requestAnimationFrame.
 function draw() {
     requestAnimationFrame(draw);
     // ...
 }

 requestAnimationFrame(draw);
4. Drawing
Clear Canvas

• Using drawRect method
  var ctx = elCanvas.getContext("2d");
  ctx.fillStyle = "#ffffff";
  ctx.drawRect(0, 0, elCanvas.width, elCanvas.height);

  It's slow.



• Reset width or height attributes
  elCanvas.width = 100;
  elCanvas.height = 100;

  It's fast on old browser.
Clear Canvas

• Using clearRect method
  var ctx = elCanvas.getContext(“2d”);
  ctx.clearRect(0, 0, elCanvas.width, elCanvas.height);



  Fast on most browsers.
Sprite Animation

• A Sprite Animation is a two-dimension
  image that is integrated into a larger scene
Sprite Animation in Canvas

• Using drawImage method
  var ctx = elCanvas.getContext("2d");
  ctx.drawImage(target Element, sourceX,
  sourceY, sourceWidth, sourceHeight,
  targetX, targetY, targetWidth,
  targetHeight);

Source x,y,width,height               Target x,y,width,height


                          drawImage
Pixel Manipulation

• Using different size sources and targets
  results in low performance in iOS4. Use
  drawImage method with original dimension.



                               drawImage




Pixel manipulation occurs when using different dimensions
                       with source.
Avoid Floating Coordinates

• When floating point coordinates are used,
  anti-aliasing is automatically used to try to
  smooth out the lines.
5. Event
Event Processing
• Inspect and see if the location the event occurred is in
  each object’s region in order to find objects that are
  related to event.
 for (var i in list) {
     if (
          list[i].x <= mouseX &&
          mouseX <= list[i].x + list[i].width &&
          list[i].y <= mouseY &&
          mouseY <= list[i].y + list[i].height
     ) {
          // region of this object contains mouse
 point
     }
 }
Event Processing
• The aforementioned method only recognizes objects as
  rectangles.
• More detail is needed to detect objects.
Event Processing
• getImageData method can be used to get pixel data
 var imageData = ctx.getImageData(mouseX,
 mouseY, 1, 1);

 if (imageData.data[0]       !== 0 ||
 imageData.data[1] !==       0 ||
 imageData.data[2] !==       0 ||
 imageData.data[3] !==       0) {
     // a pixel is not       empty data
 }
Security with Canvas Element
• Information leakage can occur if scripts from one origin
  can access information (e.g. read pixels) from images
  from another origin (one that isn't the same).
• The toDataURL(), toBlob(), and getImageData() methods
  check the flag and will throw a SecurityError exception
  rather than leak cross-origin data.
Animation Demo

      iOS5
Animation Demo

      iOS4
What the?!?!
Hardware Acceleration
• Safari in iOS5 and up has GPU accelerated Mobile
  Canvas implementation.
• Without GPU Acceleration, mobile browsers generally
  have poor performance for Canvas.
Using CSS 3D Transforms
• CSS 3D Transforms supports iOS4 and Android 3 and
  above.
• Using the following CSS3 style with webkit prefix

  .displayObject {
  -webkit-transform:translate3d(x,y,z)
  scale3d(x, y, z) rotateZ(deg);
  -wekit-transform-origin:0 0;
  -webkit-transform-style:preserve-3d;
  }
Sprite Animation in DOM
• A child image element is needed to use only the CSS 3D
  Transforms.


              overflow:hidden

              DIV

               IMG
Sprite Animation in DOM
 <div style="position:absolute;
 overflow:hidden; width:100px;
 height:100px; -webkit-
 transform:translate3d(100px, 100px, 0);
 ">
     <img src="sprite.png"
 style="position:absolute; -webkit-
 transform:translate3d(-100px, 0, 0); "
 border="0" alt="" />
 </div>
CSS 3D Transforms
 Animation Demo
       iOS4
Is that all?
HTML5 Animation in Mobile Web Games
Performance different on each device

• iOS4 supports CSS 3D Transforms with
  Hardware Acceleration(H/A)
• iOS5 supports Canvas with H/A
• There is no solution on Anroid 2.x devices.
• Androind ICS supports CSS 3D
  Transforms with H/A
Choose Rendering method


                                               under     over
  Device/    iPhone     iPhone       iPhone
                                              Android   Android
    OS         3GS         4           4S
                                                 3         3

                         CSS3D
                      (under iOS4)            Canvas
 Rendering
             CSS3D                   Canvas     or      CSS3D
  Method
                        Canvas                 DOM
                      (over iOS5)
Be careful using Android CSS 3D Transforms
• Unfortunately, Android ICS has many bugs associated
  with CSS 3D Transforms
• The image turns black if an image that has a dimension
  of over 2048 pixels is used.
• When an element that has a CSS overflow attribute with
  a hidden value is rotated, then that hidden area becomes
  visible.
Need to optimize detailed
• Tick occurs 60 times per second.
• If 100 objects are made, a logic in drawing object occurs
  6,000 times per second.
There is a solution for you
Collie
HTML5 Animation in Mobile Web Games
Collie

• Collie is a high performance animation library for
  javascript
• Collie supports more than 13 mobile devices
  and PCs with its optimized methods.
Collie

• Collie supports retina display
Collie

• Collie supports detail region to detect object in
  both Canvas and DOM
• Collie provides tool to make path about object
  shape.
Collie

• Collie supports object cache for better speed
• Collie is most effective for drawing that requires
  a lot of cost.




                                  Drawing
Collie is an opensource project

      LGPL v2.1
For more detailed information, visit
 http://jindo.dev.naver.com/collie
HTML5 Animation in Mobile Web Games

More Related Content

What's hot

3Dtexture_doc_rep
3Dtexture_doc_rep3Dtexture_doc_rep
3Dtexture_doc_rep
Liu Zhen-Yu
 
Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
Henry Osborne
 
HTML 5_Canvas
HTML 5_CanvasHTML 5_Canvas
HTML 5_Canvas
Vishakha Vaidya
 
HTML 5 Canvas & SVG
HTML 5 Canvas & SVGHTML 5 Canvas & SVG
HTML 5 Canvas & SVG
Ofir's Fridman
 
Chapter 02 sprite and texture
Chapter 02 sprite and textureChapter 02 sprite and texture
Chapter 02 sprite and texture
boybuon205
 
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics
PSTechSerbia
 
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Ontico
 
Getting Started with 3D Game Development on Nokia Series 40 Asha Phones
Getting Started with 3D Game Development on Nokia Series 40 Asha PhonesGetting Started with 3D Game Development on Nokia Series 40 Asha Phones
Getting Started with 3D Game Development on Nokia Series 40 Asha Phones
Microsoft Mobile Developer
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
Robin Hawkes
 
Android Vector Drawable
 Android Vector Drawable Android Vector Drawable
Android Vector Drawable
Phearum THANN
 
MIDP: Game API
MIDP: Game APIMIDP: Game API
MIDP: Game API
Jussi Pohjolainen
 
ENEI16 - WebGL with Three.js
ENEI16 - WebGL with Three.jsENEI16 - WebGL with Three.js
ENEI16 - WebGL with Three.js
José Ferrão
 
The Ring programming language version 1.5.3 book - Part 48 of 184
The Ring programming language version 1.5.3 book - Part 48 of 184The Ring programming language version 1.5.3 book - Part 48 of 184
The Ring programming language version 1.5.3 book - Part 48 of 184
Mahmoud Samir Fayed
 
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation FrameworkAndroid 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Jussi Pohjolainen
 
XNA L03–Models, Basic Effect and Animation
XNA L03–Models, Basic Effect and AnimationXNA L03–Models, Basic Effect and Animation
XNA L03–Models, Basic Effect and Animation
Mohammad Shaker
 
XNA L02–Basic Matrices and Transformations
XNA L02–Basic Matrices and TransformationsXNA L02–Basic Matrices and Transformations
XNA L02–Basic Matrices and Transformations
Mohammad Shaker
 
Canvas - HTML 5
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5
Jaeni Sahuri
 
Lec2
Lec2Lec2
Css5 canvas
Css5 canvasCss5 canvas
Css5 canvas
Vadim Spiridenko
 

What's hot (19)

3Dtexture_doc_rep
3Dtexture_doc_rep3Dtexture_doc_rep
3Dtexture_doc_rep
 
Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
 
HTML 5_Canvas
HTML 5_CanvasHTML 5_Canvas
HTML 5_Canvas
 
HTML 5 Canvas & SVG
HTML 5 Canvas & SVGHTML 5 Canvas & SVG
HTML 5 Canvas & SVG
 
Chapter 02 sprite and texture
Chapter 02 sprite and textureChapter 02 sprite and texture
Chapter 02 sprite and texture
 
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics
 
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...
 
Getting Started with 3D Game Development on Nokia Series 40 Asha Phones
Getting Started with 3D Game Development on Nokia Series 40 Asha PhonesGetting Started with 3D Game Development on Nokia Series 40 Asha Phones
Getting Started with 3D Game Development on Nokia Series 40 Asha Phones
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
Android Vector Drawable
 Android Vector Drawable Android Vector Drawable
Android Vector Drawable
 
MIDP: Game API
MIDP: Game APIMIDP: Game API
MIDP: Game API
 
ENEI16 - WebGL with Three.js
ENEI16 - WebGL with Three.jsENEI16 - WebGL with Three.js
ENEI16 - WebGL with Three.js
 
The Ring programming language version 1.5.3 book - Part 48 of 184
The Ring programming language version 1.5.3 book - Part 48 of 184The Ring programming language version 1.5.3 book - Part 48 of 184
The Ring programming language version 1.5.3 book - Part 48 of 184
 
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation FrameworkAndroid 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
 
XNA L03–Models, Basic Effect and Animation
XNA L03–Models, Basic Effect and AnimationXNA L03–Models, Basic Effect and Animation
XNA L03–Models, Basic Effect and Animation
 
XNA L02–Basic Matrices and Transformations
XNA L02–Basic Matrices and TransformationsXNA L02–Basic Matrices and Transformations
XNA L02–Basic Matrices and Transformations
 
Canvas - HTML 5
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5
 
Lec2
Lec2Lec2
Lec2
 
Css5 canvas
Css5 canvasCss5 canvas
Css5 canvas
 

Viewers also liked

ロケタッチの裏側
ロケタッチの裏側ロケタッチの裏側
ロケタッチの裏側
livedoor
 
REDRAFT - Resume Martin Firth 2017-01-03
REDRAFT - Resume Martin Firth 2017-01-03REDRAFT - Resume Martin Firth 2017-01-03
REDRAFT - Resume Martin Firth 2017-01-03
Martin Firth
 
Solr Payloads for Ranking Data
Solr Payloads for Ranking Data Solr Payloads for Ranking Data
Solr Payloads for Ranking Data
BloomReach
 
RocksDB meetup
RocksDB meetupRocksDB meetup
RocksDB meetup
Javier González
 
Web Animation Buffet
Web Animation BuffetWeb Animation Buffet
Web Animation Buffet
joshsager
 
HxRefactored: Rebounding with Web Animation by Nick Snyder
HxRefactored: Rebounding with Web Animation by Nick SnyderHxRefactored: Rebounding with Web Animation by Nick Snyder
HxRefactored: Rebounding with Web Animation by Nick Snyder
HxRefactored
 
Crafting animation on the web
Crafting animation on the webCrafting animation on the web
Crafting animation on the web
Benjy Stanton
 
Facilitating product discovery in e-commerce inventory, The Fifth elephant, 2016
Facilitating product discovery in e-commerce inventory, The Fifth elephant, 2016Facilitating product discovery in e-commerce inventory, The Fifth elephant, 2016
Facilitating product discovery in e-commerce inventory, The Fifth elephant, 2016
Ekta Grover
 
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Rami Sayar
 
Understanding Computers: Today and Tomorrow, 13th Edition Chapter 10 - Multim...
Understanding Computers: Today and Tomorrow, 13th Edition Chapter 10 - Multim...Understanding Computers: Today and Tomorrow, 13th Edition Chapter 10 - Multim...
Understanding Computers: Today and Tomorrow, 13th Edition Chapter 10 - Multim...
yaminohime
 
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)
brianskold
 
Animation meet web
Animation meet webAnimation meet web
Animation meet web
Taufshwara Diasriandaru
 
Animation
AnimationAnimation
Animation
ankur bhalla
 
Network Security Threats and Solutions
Network Security Threats and SolutionsNetwork Security Threats and Solutions
Network Security Threats and Solutions
Colin058
 

Viewers also liked (14)

ロケタッチの裏側
ロケタッチの裏側ロケタッチの裏側
ロケタッチの裏側
 
REDRAFT - Resume Martin Firth 2017-01-03
REDRAFT - Resume Martin Firth 2017-01-03REDRAFT - Resume Martin Firth 2017-01-03
REDRAFT - Resume Martin Firth 2017-01-03
 
Solr Payloads for Ranking Data
Solr Payloads for Ranking Data Solr Payloads for Ranking Data
Solr Payloads for Ranking Data
 
RocksDB meetup
RocksDB meetupRocksDB meetup
RocksDB meetup
 
Web Animation Buffet
Web Animation BuffetWeb Animation Buffet
Web Animation Buffet
 
HxRefactored: Rebounding with Web Animation by Nick Snyder
HxRefactored: Rebounding with Web Animation by Nick SnyderHxRefactored: Rebounding with Web Animation by Nick Snyder
HxRefactored: Rebounding with Web Animation by Nick Snyder
 
Crafting animation on the web
Crafting animation on the webCrafting animation on the web
Crafting animation on the web
 
Facilitating product discovery in e-commerce inventory, The Fifth elephant, 2016
Facilitating product discovery in e-commerce inventory, The Fifth elephant, 2016Facilitating product discovery in e-commerce inventory, The Fifth elephant, 2016
Facilitating product discovery in e-commerce inventory, The Fifth elephant, 2016
 
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
 
Understanding Computers: Today and Tomorrow, 13th Edition Chapter 10 - Multim...
Understanding Computers: Today and Tomorrow, 13th Edition Chapter 10 - Multim...Understanding Computers: Today and Tomorrow, 13th Edition Chapter 10 - Multim...
Understanding Computers: Today and Tomorrow, 13th Edition Chapter 10 - Multim...
 
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)
 
Animation meet web
Animation meet webAnimation meet web
Animation meet web
 
Animation
AnimationAnimation
Animation
 
Network Security Threats and Solutions
Network Security Threats and SolutionsNetwork Security Threats and Solutions
Network Security Threats and Solutions
 

Similar to HTML5 Animation in Mobile Web Games

High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
Sangmin Shim
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
deanhudson
 
Mapping the world with Twitter
Mapping the world with TwitterMapping the world with Twitter
Mapping the world with Twitter
carlo zapponi
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
Framgia Vietnam
 
Iagc2
Iagc2Iagc2
Power of canvas
Power of canvasPower of canvas
Power of canvas
chrismartinez99
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
Paul Bakaus
 
Image_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.pptImage_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.ppt
LOUISSEVERINOROMANO
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
GaziAhsan
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
Vera Kovaleva
 
Whats new in Feathers 3.0?
Whats new in Feathers 3.0?Whats new in Feathers 3.0?
Whats new in Feathers 3.0?
Josh Tynjala
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
Blazing Cloud
 
Graphics on the Go
Graphics on the GoGraphics on the Go
Graphics on the Go
Gil Irizarry
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
Andrea Verlicchi
 
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive Images
Rami Sayar
 
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
Marakana Inc.
 
Picture Perfect: Images for Coders
Picture Perfect: Images for CodersPicture Perfect: Images for Coders
Picture Perfect: Images for Coders
Kevin Gisi
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Bin Shao
 
Pointer Events in Canvas
Pointer Events in CanvasPointer Events in Canvas
Pointer Events in Canvas
deanhudson
 

Similar to HTML5 Animation in Mobile Web Games (20)

High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
 
Stupid Canvas Tricks
Stupid Canvas TricksStupid Canvas Tricks
Stupid Canvas Tricks
 
Mapping the world with Twitter
Mapping the world with TwitterMapping the world with Twitter
Mapping the world with Twitter
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
 
Iagc2
Iagc2Iagc2
Iagc2
 
Power of canvas
Power of canvasPower of canvas
Power of canvas
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
Image_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.pptImage_Processing_LECTURE_c#_programming.ppt
Image_Processing_LECTURE_c#_programming.ppt
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Whats new in Feathers 3.0?
Whats new in Feathers 3.0?Whats new in Feathers 3.0?
Whats new in Feathers 3.0?
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
 
Graphics on the Go
Graphics on the GoGraphics on the Go
Graphics on the Go
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
 
FITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive ImagesFITC - Exploring Art-Directed Responsive Images
FITC - Exploring Art-Directed Responsive Images
 
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
 
Picture Perfect: Images for Coders
Picture Perfect: Images for CodersPicture Perfect: Images for Coders
Picture Perfect: Images for Coders
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
 
Pointer Events in Canvas
Pointer Events in CanvasPointer Events in Canvas
Pointer Events in Canvas
 

Recently uploaded

Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
Management Institute of Skills Development
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 

Recently uploaded (20)

Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 

HTML5 Animation in Mobile Web Games

  • 1. HTML5 Animation in Mobile Web Games Sangmin, Shim
  • 5. 文, 絵 ゾングダゾング twitter @yameyori e-mail usamibabe@naver.com webtoon http://comic.naver.com/webtoon/list.nhn?titleId=409630
  • 6. Animation is the rapid display of a sequence of images to create an illusion of movement.
  • 7. Each image contains small changes in movement, rotation, scale …
  • 11. Resource Management Loading Image
  • 12. Resource Management • Game or Animation contains many resources. Each resource size is bigger than resources in web pages(larger than 3Mbytes)
  • 13. Resource Management • Loading screens are required to load resources
  • 14. Resource Management • Always load resources asynchronously var img = document.createElement(“img”); img.onload = function () { alert("ok!"); }; img.onerror = function () { alert("error"); }; img.src = "test.png"; document.body.appendChild(img);
  • 16. Objectivation abstraction into an object
  • 17. Objectivation • DOM Elements can be handled separately. However objects cannot be handled separately in HTML5 Canvas DOM Elements have regions each Canvas draw object to one Context
  • 18. Objectivation Objects that contain the necessary information is required when drawing Canvas
  • 19. Objectivation • Contains position and properties for display. var oItem = new Item(); oItem.width = 100; oItem.height = 100; oItem.x = 50; oItem.y = 150; oItem.color = "#123456"; oItem.visible = true;
  • 21. Animation Animation
  • 22. Animation • Rendering-Pipeline must be used to tackle multiple objects simultaneously. no Register Is there yes Draw Initialize updated Pipeline object? object one tick cycle
  • 23. Animation // drawing function draw() { // clear canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // draw each object. for (var i = 0; i < list.length; i++) { list[i].drawEachObject(); } }; // repeat 60 times per second setInterval(draw, 1000 / 60);
  • 24. Animation draw draw draw draw draw Repeat 60 times per second
  • 25. Why is it repeated 60 times per second? • Most PC monitors show 60 frames per second. Therefore, there is no point in making animation that is 60 FPS.
  • 26. Using requestAnimationFrame instead of setInterval • requestAnimationFrame is the browser's native way of handling animations. • Helps get a smooth 60 frames per second. • iOS6 supports requestAnimationFrame. function draw() { requestAnimationFrame(draw); // ... } requestAnimationFrame(draw);
  • 28. Clear Canvas • Using drawRect method var ctx = elCanvas.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.drawRect(0, 0, elCanvas.width, elCanvas.height); It's slow. • Reset width or height attributes elCanvas.width = 100; elCanvas.height = 100; It's fast on old browser.
  • 29. Clear Canvas • Using clearRect method var ctx = elCanvas.getContext(“2d”); ctx.clearRect(0, 0, elCanvas.width, elCanvas.height); Fast on most browsers.
  • 30. Sprite Animation • A Sprite Animation is a two-dimension image that is integrated into a larger scene
  • 31. Sprite Animation in Canvas • Using drawImage method var ctx = elCanvas.getContext("2d"); ctx.drawImage(target Element, sourceX, sourceY, sourceWidth, sourceHeight, targetX, targetY, targetWidth, targetHeight); Source x,y,width,height Target x,y,width,height drawImage
  • 32. Pixel Manipulation • Using different size sources and targets results in low performance in iOS4. Use drawImage method with original dimension. drawImage Pixel manipulation occurs when using different dimensions with source.
  • 33. Avoid Floating Coordinates • When floating point coordinates are used, anti-aliasing is automatically used to try to smooth out the lines.
  • 35. Event Processing • Inspect and see if the location the event occurred is in each object’s region in order to find objects that are related to event. for (var i in list) { if ( list[i].x <= mouseX && mouseX <= list[i].x + list[i].width && list[i].y <= mouseY && mouseY <= list[i].y + list[i].height ) { // region of this object contains mouse point } }
  • 36. Event Processing • The aforementioned method only recognizes objects as rectangles. • More detail is needed to detect objects.
  • 37. Event Processing • getImageData method can be used to get pixel data var imageData = ctx.getImageData(mouseX, mouseY, 1, 1); if (imageData.data[0] !== 0 || imageData.data[1] !== 0 || imageData.data[2] !== 0 || imageData.data[3] !== 0) { // a pixel is not empty data }
  • 38. Security with Canvas Element • Information leakage can occur if scripts from one origin can access information (e.g. read pixels) from images from another origin (one that isn't the same). • The toDataURL(), toBlob(), and getImageData() methods check the flag and will throw a SecurityError exception rather than leak cross-origin data.
  • 42. Hardware Acceleration • Safari in iOS5 and up has GPU accelerated Mobile Canvas implementation. • Without GPU Acceleration, mobile browsers generally have poor performance for Canvas.
  • 43. Using CSS 3D Transforms • CSS 3D Transforms supports iOS4 and Android 3 and above. • Using the following CSS3 style with webkit prefix .displayObject { -webkit-transform:translate3d(x,y,z) scale3d(x, y, z) rotateZ(deg); -wekit-transform-origin:0 0; -webkit-transform-style:preserve-3d; }
  • 44. Sprite Animation in DOM • A child image element is needed to use only the CSS 3D Transforms. overflow:hidden DIV IMG
  • 45. Sprite Animation in DOM <div style="position:absolute; overflow:hidden; width:100px; height:100px; -webkit- transform:translate3d(100px, 100px, 0); "> <img src="sprite.png" style="position:absolute; -webkit- transform:translate3d(-100px, 0, 0); " border="0" alt="" /> </div>
  • 46. CSS 3D Transforms Animation Demo iOS4
  • 49. Performance different on each device • iOS4 supports CSS 3D Transforms with Hardware Acceleration(H/A) • iOS5 supports Canvas with H/A • There is no solution on Anroid 2.x devices. • Androind ICS supports CSS 3D Transforms with H/A
  • 50. Choose Rendering method under over Device/ iPhone iPhone iPhone Android Android OS 3GS 4 4S 3 3 CSS3D (under iOS4) Canvas Rendering CSS3D Canvas or CSS3D Method Canvas DOM (over iOS5)
  • 51. Be careful using Android CSS 3D Transforms • Unfortunately, Android ICS has many bugs associated with CSS 3D Transforms • The image turns black if an image that has a dimension of over 2048 pixels is used. • When an element that has a CSS overflow attribute with a hidden value is rotated, then that hidden area becomes visible.
  • 52. Need to optimize detailed • Tick occurs 60 times per second. • If 100 objects are made, a logic in drawing object occurs 6,000 times per second.
  • 53. There is a solution for you
  • 56. Collie • Collie is a high performance animation library for javascript • Collie supports more than 13 mobile devices and PCs with its optimized methods.
  • 57. Collie • Collie supports retina display
  • 58. Collie • Collie supports detail region to detect object in both Canvas and DOM • Collie provides tool to make path about object shape.
  • 59. Collie • Collie supports object cache for better speed • Collie is most effective for drawing that requires a lot of cost. Drawing
  • 60. Collie is an opensource project LGPL v2.1
  • 61. For more detailed information, visit http://jindo.dev.naver.com/collie