Programming Games

Programming Games Show your cannonball. HTML5 video and audio. Miro. Bouncing video. Jigsaw video. Homework: Acquire video and produce HTML5 program.

HTML5 native support for video and audio • No need for Flash plugin or Quick Times or …

Video • Native support of video • dynamic control (can make visible and invisible and start and stop and re-position) • Can grab a frame from a video and place on the canvas (or place some of it on canvas)

Problem/solution • Different browsers accept different formats: • mp4, webm, ogg • but there is a way to provide all the alternatives. • This requires making distinct versions of each video clip.

sketch of video element <video … attributes > <source …> <source …> <source …> Your browser does not accept video. </video>

Simplest example • http://faculty.purchase.edu/jeanine.meyer/html5/playvideo.html • Note: this example was converted previously from a MOV shot with vertical orientation

Recall • Example with CSS using browser libraries to rotate:http://faculty.purchase.edu/jeanine.meyer/html5/playblrrotated.html

Example: quiz with reward • dynamic creation of html markup • addEventListener: to make matches • video when done • http://faculty.purchase.edu/jeanine.meyer/html5/quizmultiple.html

<video id="vid" controls="controls" preload="auto"> <source src="sfire3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="sfire3.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="sfire3.webmvp8.webm" type="video/webm; codec="vp8, vorbis"'"> Your browser does not accept the video tag. </video>

Video tag attributes Include • id This serves function of making the video element accessible by code • width and height Usual meaning • controls This produces controls. Different in different browsers. • loop Does not work in Firefox, but does work in others • preload In some browsers, starts loading of video files early…

Bouncing video • Bouncing video element: http://faculty.purchase.edu/jeanine.meyer/html5/videobounceE.html

Audio • situation similar to video: no one format recognized by all browsers. • mp3 and ogg

rock paper scissors (with audio) • animation (setInterval), addEventListener for click, calculations to determine which throw, audio object • http://faculty.purchase.edu/jeanine.meyer/html5/rockpaperscissorssounds.html

Put audio elements in body <audio autobuffer> <source src="hithard.ogg" /> <source src="hithard.mp3" /> </audio> • In init function: musicelements = document.getElementsByTagName("audio"); • In other code, determine which one: musicelements[musicch].play();

Simple video • http://faculty.purchase.edu/jeanine.meyer/html5/video.html

<!DOCTYPE html> <html><head><title>Video </title> <meta charset="UTF-8"></head> <body> <video id="vid" loop="loop" preload="auto" controls="controls"> <source src="joshuahomerun.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="joshuahomerun.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="joshuahomerun.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'> Your browser does not accept the video tag.</video> Joshua's home run. </body></html>

Bouncing ball video • http://faculty.purchase.edu/jeanine.meyer/html5/videobounce.html • Note: moving mask.

jigsaw • http://faculty.purchase.edu/jeanine.meyer/html5/jigsaw/jigsawdance.html • Works on iPhone and iPad • Does not work on IE9, Android, ….

Critical requirements for jigsaw • Acquire video clip • Acquire first frame as image • break up into pieces and record positions of pieces • Program set up of event handling for mouse dragging AND for touch events • Program moving (dragging) pieces around • does not use the new drag and drop features. Uses mouse down, mouse move, and mouse up and touch equivalents. • Program checking if jigsaw is (close enough) complete • Program playing of video

Execution time • … when the document has been loaded and any JavaScript in the script element is running. • Development time: when you are creating the program. • Note: typically, the HTML document, including everything in the body element is created by you during development time and built when the document is loaded. • It is possible to create html elements entirely by coding.

Jigsaw puzzle pieces • Each piece is HTML markup created dynamically (during execution time). s = document.createElement('piece'); s.innerHTML = ("<img src='"+pieces[i]+"' id='"+uniqueid+"'/>"); document.body.appendChild(s); thingelem = document.getElementById(uniqueid); x = piecesx[i] +100; y = piecesy[i] + 100; thingelem.style.top = String(y)+"px"; thingelem.style.left = String(x)+"px";

Miro Video Converter • one of several programs for converting (producing new versions) of video and audio. • There are others and it appears that they don't produce the exact same thing. • You need to download Miro.

Origami directions • http://faculty.purchase.edu/jeanine.meyer/html5/origamifish.html • Each of the steps is a function. Some functions draw on the canvas; two of the functions play video.

Recall • Example manipulates video by extracting frames and drawing each on canvas over and over… • http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html • Note use of object-oriented programming

Other videos • Re-positions (and keeps re-positioning) a video element along a path http://faculty.purchase.edu/jeanine.meyer/html5/movingpictures.html • Plays sections of a video cliphttp://faculty.purchase.edu/jeanine.meyer/html5/booktrip1.html

Classwork / homework • Basic video project • Acquire video. • (Upload to your computer) • Make mp4, webm, and ogg versions. • Prepare simple HTML5 script with a (static) video element to play video. • Try out on different browsers. • You can study other video examples for possible use for your own project.

Programming Games