Physics Simulation - Simulation and Game Design

Chapter 4 Simulation and Game Design

4.2 Physics Simulation

Using HTML5, the developer or designer can now create the Physics simulation using canvas tag. The HTML 5 Canvas element can handle all different types of physics. Such as Gravity, weight distribution, speed and acceleration. Developer can also create 2D a canvas element. User can use these physics simulation on browsers it is very interesting and useful.

40 Physics Simulation Demo A: Shoot Box

Demo description:

This is simple physics shoot box. In this demo I use HTML 5 canvas element. To create small rectangle box and we can shoot that boxes and separate it like simple physics demo.

Function:

Physics Simulation Demo B: Physics Box Demo description:

This demo Idea I take from box2djs by Ando Yasushi, It is little physics simulation engine made to run in JavaScript. The physics demos which can interact with by left clicking with the mouse to add new objects in Demo. They use the popular Box2D physics library to JavaScript using

<canvas> element for the rendering. Using Box2D JavaScript, they created a flatland-sequel 2D world that obeys Newtonian physics . First figure show original demo from box2djs by Ando Yasushi & second demo I created some new or extra stuff in that original demo to make it more usable and intresting. And I also create main background window bigger than original one .

Figure 4.1 Physics Box Part 1

Figure 4.2 Physics Box Part 2

Physics Simulation Demo C: Physics Adventure Demo description:

HTML5 is growing up faster than anyone could have imagined. Powerful and professional solutions are already being developed even in the gaming world! I make game using Box2D and HTML5′s canvas tag. When we play this game we have to use up & down arrow keys on keyboard to reach goal.

Function:

Step 1 - Developing the Game

HTML 5 :

In HTML 5 I use canvas element to show which id it is & how much height & width it is.

42 4. 3 Game

So what is HTML 5 game? It is basically plug-in free game development for various browsers.

For game development in HTML 5 we don’t care about, new semantic tags, Micro data but care a lot about Canvas, Video, Audio, Web sockets. Actually twenty years game development compressed down to two years due to new HTML 5 features. A game that does not require a browser plugin, this type of game is usually implemented fully using HTML 5 and JavaScript.

With the new HTML 5 <canvas> tag, creating a 2D game with the same picture quality with a Flash game is now possible. Firefox 3.0+, Google Chrome 3.0+, Apple Safari 3.2+, and Opera 9.6+ should already provide 2D rendering context with all the W3C-standardized basic canvas API. Internet Explorer up to IE 8 has not yet support the <canvas> tag.

With the new HTML 5 <audio> tag, playing audio natively in JavaScript-based game is now possible. Firefox 3.5+, Google Chrome 3.0+, Apple Safari 4.0+, and Opera 10.5+ should already provide full support for the <audio> tag. Internet Explorer up to IE 8 has not yet support the <audio> tag.

With the new HTML 5 <video> tag, playing video natively in JavaScript-based game is now possible. Firefox 3.5+, Google Chrome 3.0+, Apple Safari 4.0+, and Opera 10.5+ should already provide full support for the <video> tag. Internet Explorer up to IE 8 has not yet support the <video> tag.

Game Demo A: English Character Fall Demo description:

This is very intresting HTML 5 chrecter fall game [11], I have make some change in this game is that I increase speed and dropping orbs of this game to make more intresing and improve users typing skills and also change some stuff.

We have to press the correct character on the correct time in a totally random order. Each correct press will make the game faster, which makes it harder but we will be able to earn more points.It might help improve our typing skills too.

43 Function:

Container for the dropping characters that will be created by query

</div>

For the English character use

Game Demo B: Water Character Fall Demo description:

This game originally creates an actual jQuery game [12]. The author came up with the following idea: Characters in water drops falling. We can save them from a splashy death, by pressing the correct character on keyboard. Keeping that in mind, Author created jCharacterfall - A small, addictive jQuery game. After each character save, the game gets harder and the droplets will fall faster. When playing this game over and over, we might even improve our typing skills. This game combines the power of jQuery, jQuery UI, the jQuery Easing plug-in and CSS3.

It is more similar like previous demo originally created by other author and we have increased speed of this game to improve users typing skills.

HTML 5:

For each images in demo use <img> tag

44 Game Demo C: Fairy Jump

Demo description:

I design Simple game with HTML5 Canvas [12]. In the original reference demo the goal is to control little angel & jump on the two kinds of platforms - orange which is regular ones and green which is super high jump springboards. The game ends when the angel falls down to the bottom of the screen and gets scores. I have increase main window size and platforms size and number of platforms and color of platforms & many stuff inside demo .Below show figure part 1 is original reference demo and part 2 modified one .

Figure 4.3 Fairy Jump Part 1

Figure 4.4 Fairy Jump Part 2

Function:

Part 1 - Introduction & Background HTML 5 :

Because whole game, including images and scripts, couldn't be over 10K, I didn't want to use image on the background. It was cheaper to draw some generic-like stuff using canvas drawing functions. First of all we need little HTML5 , nothing special, just one canvas element with some unique id, little bit of CSS and JavaScript.

Game Demo D: Snake Game

Snake Game is a rather cute and cuddly HTML5 game [13]. The goal is to snake have to eat cherries in each levels and every level become more complicated and more hard, if snake eat cherries it will increase our game score. In original reference game they just create simple snake and wall, cherries .but I have change snake color, cherry and wall style to make it more beautiful for users. Below figure shows part 1 is original reference game and part 2 is I make change in it.

Figure 4.5 Snake Game Part 1

Figure 4.6 Snake Game Part 2

Chapter 5 HTML 4 vs. HTML 5

5.1 Comparison between HTML 4 and HTML 5 A. Comparison with HTML 4

W3C has considered approving a new set of standards that called HTML 5. The HTML 5 standards contain several new features that are not present with the previously W3C-adopted HTML 4 standards.

HTML5 has several goals which differentiate it from HTML4.The first one is error handling, HTML 4 has lack of rules of parsing so it is difficult to handle error. But HTML 5 has strictly parsing rules so it handles the error. The another main difference between is, HTML 4 has no multimedia supported without third party Plug-In. but, for HTML 5 multimedia element there is no more need third party Plug-In.

The secondary goal of HTML5 is to develop the ability of the browser to be an application platform, via HTML, CSS, and JavaScript. Many elements have been added directly to the language that are currently Flash or JavaScript-based hacks, such as <canvas>, <video>, and

<audio>.

For improve the structure of HTML pages, many elements have been added, changed, or removed. New elements include such as section, article, aside, h-group, header, footer, nav, figure, and many more. The list of changed elements includes such as a, b, address, cite, hr, I, label, menu, strong, large, and many more. Lastly, removed elements are elements that are no longer included in HTML 5, among them are basefont, big, center, font, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir, noscript. The reasons for dropping these elements range from disuse, obsolescence due to CSS, and usability issues. The removed elements can still be used as browsers would still be able to parse them, but using them on a page would cause it to fail HTML 5 validation.

In summary I can say HTML5 can natively incorporate content that needed plug-ins in HTML 4.HTML5 can use SVG and MathML inline while HTML 4 cannot.HTML 5 allows the storage and use of offline applications while HTML 4 does not.HTML 5 has many new elements that are not present in HTML 4.Certain elements have changed in HTML 5 compared to how they were in HTML 4.HTML 5 has dropped certain elements from HTML 4.

5.2 Browsers Comparison 1. Audio

The below table shows that how HTML 5 Audio element work in various browsers , as we can see first Audio demo works in chrome, opera & Mozilla but not work in safari , internet explorer.

And second demo doesn’t work in opera and internet explorer .

Table 5.1 Audio Browsers Comparison Browsers

Audio Demo

Chrome Safari Opera Mozilla Internet

explorer

Audio sample Yes No Yes Yes No

Audio color picker Clock

Yes Yes No Yes No

49 2. Video

The below table shows that how HTML 5 Video element work in various browsers , as we can see Video first demo works in Chrome, Safari, Opera, Mozilla but don’t work in Internet explorer. & second Video demo work only in Chrome not in other browsers.

In first demo Video tag doesn’t support in Internet explorer. And in second demo also except chrome other all browsers doesn’t support Video demo.

Table 5.2 Video Browsers Comparison Browsers

Video Demo

Chrome Safari Opera Mozilla Internet

explorer

simple Video player

Yes Yes Yes Yes No

basic Video Yes No No No No

3. Image

The below table shows that how HTML 5 Image element work in various browsers , as we can see Image demo first, second demo works in Chrome, Safari, Opera but don’t work in Mozilla ,Internet explorer. .And third Image demo work only in Safari, Opera not in other browsers. And In Image slideshow demo Chrome, Mozilla Firefox & Internet explorer browsers doesn’t work, in demo we can see HTML 5 Image tag is work but arrow function doesn’t work in this browsers.

Table 5.3 Image Browsers Comparison Browsers

Image Demo

Chrome Safari Opera Mozilla Internet

explorer

Photo stack Yes Yes Yes Yes No

Rotating

51 4. Drag & Drop

The below table shows that how HTML 5 Drag & Drop element work in various browsers , as we can see Drag & Drop first demo works in Chrome, Safari & Mozilla but not work in Opera, internet explorer because it doesn’t support drag & drop HTML 5 tag . And second demo work almost all browsers but doesn’t work in Internet explorer.

Table 5.4 Drag & Drop Browsers Comparison Browsers

Drag & Drop

Chrome Safari Opera Mozilla Internet

explorer

The below table shows that how HTML 5 Physics Simulation Demos work in various browsers , as we can see Physics Simulation all three demos work in almost all browsers except Internet explorer.

Table 5.5 Physics Simulation Browsers Comparison Browsers

Physics Simulation

Chrome Safari Opera Mozilla Internet

explorer

Physics Simulation Demo A

Yes Yes Yes Yes No

52 see Game all four demos work in almost all browsers except Internet explorer.

Table 5.6 Game Browsers Comparison Browsers

Game

Chrome Safari Opera Mozilla Internet

explorer

Game Demo A Yes Yes Yes Yes No

Game Demo B Yes Yes Yes Yes No

Game Demo C Yes Yes Yes Yes No

Game Demo D Yes Yes Yes Yes Yes

I tested out a few of the most popular browsers to see how ready they are for HTML5 features and this is what I found out. Chrome 10.0 was the big winner coming in at 301 points out of 400 possible. They have already implemented most of the functionality to be a compatible HTML5 browser. In addition, many of the features that are not added are partially added. So Google Chrome is definitely way out in front in the race for HTML compatible browsers. Firefox 4.0 is next in line getting 249 out 400 possible points. They are still missing a lot of key elements but got bonus points for the audio and video implementation as well as their parsing rules. Internet Explorer 8 is pretty far behind the curve. IE scored a total of 32 points out of 400. Internet

Explorer has been playing catch up with rendering design since the implementation of CSS and their poor showing here tells us it does not seem like much will change in the future. In this work I had done some HTML 5 features for example audio, video, image, drag & drop, physics, canvas, game. That features we can use in latest browsers. In future work I want to make more usable demo to users.

Chapter 6 Conclusions

In this Thesis I have presented how HTML-5 work on the Multimedia Design . This work shows that demo like audio , video, image, drag & drop , physics simulation & game these new elements in HTML 5 other researchers can also use this demo for future work. This demos can also use in mobile devices like iphone, android & browsers like chrome, Mozilla firefox, safari, opera.

Audio

This Audio demo works in chrome & Mozilla but not work in safari , internet explorer. In Both demos Safari & Internet explorer browsers doesn’t support HTML 5 audio tag .

Video

This Video demo works in Chrome, Safari, Opera, and Mozilla but don’t work in Internet explorer.

Image

This Image most of demos work in Chrome, Safari, Opera but don’t work in Mozilla & Internet explorer.

Drag & Drop

This Drag & Drop first demo work in Chrome, Safari & Mozilla but not works in Opera, internet explorer because it doesn’t support drag & drop HTML 5 tag

Physics simulation

This Physics Simulationdemos work in almost all browsers except Internet explorer.

55 Game

This Game demos work in almost all browsers except Internet explorer.

From above work I conclude most of HTML 5 elements support all latest browsers like chrome, safari, opera, Mozilla Firefox except Internet explorer.

Future Work

Because HTML5 is still a work in progress and not due to completely roll out until the latter part of 2011, there is no urgency to redesign a Web site using the new iteration of the language. Only a handful of major brands, including Mozilla Firefox and Google Chrome, currently support HTML5 elements or some browsers. Those companies’ browsers are only a small fraction of the browsing populations. Microsoft’s Internet Explorer is the most widely used browser and currently has the least amount of support for HTML5. HTML 5is being set up of very powerful markup language; this is way or benefit to make useful for users. Another major advantage with HTML 5 and JavaScript frameworks is that Third party Plug-in has become useless. And framework like jQuery with HTML 5 allows developer to create amazing effects. The Video like YouTube with HTML 5 for browsers no need to download more Plug-in’s like flash, QuickTime.

There are so many new or great features to look forward to new elements to many of killer APIs.

We can easily combine technologies and create very interactive animations on webpage. So we can use HTML5 to build stronger, richer Web applications for years to come. Website created by HTML5 is soon finding itself better than the other competitor.

References

[1] Stephen Shankland , “opera for Android to get HTML 5 video,Flash”, http://news.cnet.com/8301-30685_3-20024664-264.html

[2] olivia ,“Difference Between HTML 4 and HTML 5”

http://www.differencebetween.com/difference-between-html-4-and-vs-html-5/#ixzz1Em 8UxcIA

,

Feb 10th, 2011 /By Olivia.

[3] Anne van Kesteren, Simon Pieters ,“ HTML5 differences from HTML4”, http://www.w3.org/TR/html5-diff/, W3C Working Draft 25 May 2011.

[4] David Leggett, “The Web Is Changing : HTML 5 and Native Media Support”

http://www.uxbooth.com/blog/the-web-is-changing-html5-and-native-media-support/ , January 18th, 2011/David Leggett.

[5] Johannes Behr, Peter Eschler, Yvonne Jung, Michael Zollner , “X3DOM – A DOM-based HTML5/ X3D Integration Model”

http://www.web3d.org/x3d/wiki/images/3/30/X3dom-web3d2009-paper.pdf , Las Vegas, March 18-20th 2009.

[6] Joe Lennon,“Create modern Web sites using HTML5 and CSS3 Implementing the canvas and video elements in HTML5”

http://www.ibm.com/developerworks/web/tutorials/wa-html5/wa-html5-pdf.pdf, 02 Mar 2010/

Joe Lennon .

[7] Steven J. Vaughan-Nichols , “Will HTML 5 Restandardize the Web?”,

http://u.cs.biu.ac.il/~ariel/download/mm664/resources/internet_web/html5.pdf , Published by the IEEE Computer Society APRIL 2010.

[8] “HTML5 Primer”, http://www.slideshare.net/graebryan/html5-primer , A NewBay White Paper November 2010.

[9] Arno Bakker, Riccardo Petrocco , Michael Dale , Jan Gerber, Victor Grishchenko , Diego Rabaioli , Johan Pouwelse,“Online video using BitTorrent and HTML5 applied to

Wikipedia”, http://swarmplayer.p2p-next.org/p2p10demo.pdf.

[10] Kai Uwe Barthel, Karsten Schulz “ImageJ in the web? -Image processing in the browser using HTML5”http://www.f4.fhtw-berlin.de/~barthel/paper/BarthelSchulz10.pdf.

[11] “jTypingHero - Test your typing skills in this query

game”http://www.marcofolio.net/games/jtypinghero_test_your_typing_skills_in_this_jq uery_game.html

[12] “jCharacterfall - A small, addictive jQuery

game”http://www.marcofolio.net/games/jcharacterfall_a_small_addictive_jquery_game .html

[13] “jquery-snakey”http://code.google.com/p/jquery-snakey/downloads/detail?name=jqu ery-snakey-V0.1b.zip&can=2&q=

在文檔中 HTML5多媒體設計之研究 (頁 38-0)