Programming Games - PowerPoint PPT Presentation

Loading...

PPT – Programming Games PowerPoint presentation | free to download - id: 75f856-MGY4Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Programming Games

Description:

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

Number of Views:21
Avg rating:3.0/5.0
Slides: 27
Provided by: Jeani192
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Programming Games


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

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

3
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)

4
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.

5
sketch of video element
  • ltvideo attributes gt
  • ltsource gt
  • ltsource gt
  • ltsource gt
  • Your browser does not accept video.
  • lt/videogt

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

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

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

9
  • ltvideo id"vid" controls"controls"
    preload"auto"gt
  • ltsource src"sfire3.mp4" type'video/mp4
    codecs"avc1.42E01E, mp4a.40.2"'gt
  • ltsource src"sfire3.theora.ogv" type'video/ogg
    codecs"theora, vorbis"'gt
  • ltsource src"sfire3.webmvp8.webm"
    type"video/webm codec"vp8, vorbis"'"gt
  • Your browser does not accept the video tag.
  • lt/videogt

10
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

11
Bouncing video
  • Bouncing video element http//faculty.purchase.e
    du/jeanine.meyer/html5/videobounceE.html

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

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

14
  • Put audio elements in body
  • ltaudio autobuffergt
  • ltsource src"hithard.ogg" /gt
  • ltsource src"hithard.mp3" /gt
  • lt/audiogt
  • In init function musicelements
    document.getElementsByTagName("audio")
  • In other code, determine which one
  • musicelementsmusicch.play()

15
Simple video
  • http//faculty.purchase.edu/jeanine.meyer/html5/vi
    deo.html

16
  • lt!DOCTYPE htmlgt
  • lthtmlgtltheadgtlttitlegtVideo lt/titlegt
  • ltmeta charset"UTF-8"gtlt/headgt
  • ltbodygt
  • ltvideo id"vid" loop"loop" preload"auto"
    controls"controls"gt
  • ltsource src"joshuahomerun.mp4" type'video/mp4
    codecs"avc1.42E01E, mp4a.40.2"'gt
  • ltsource src"joshuahomerun.theora.ogv"
    type'video/ogg codecs"theora, vorbis"'gt
  • ltsource src"joshuahomerun.webmvp8.webm"
    type'video/webm codec"vp8, vorbis"'gt
  • Your browser does not accept the video
    tag.lt/videogt
  • Joshua's home run.
  • lt/bodygtlt/htmlgt

17
Bouncing ball video
  • http//faculty.purchase.edu/jeanine.meyer/html5/vi
    deobounce.html
  • Note moving mask.

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

19
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

20
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.

21
Jigsaw puzzle pieces
  • Each piece is HTML markup created dynamically
    (during execution time).
  • s document.createElement('piece')
  • s.innerHTML ("ltimg src'"piecesi"'
    id'"uniqueid"'/gt")
  • document.body.appendChild(s)
  • thingelem document.getElementById(uniqueid)
  • x piecesxi 100
  • y piecesyi 100
  • thingelem.style.top String(y)"px"
  • thingelem.style.left String(x)"px"

22
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.

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

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

25
Other videos
  • Re-positions (and keeps re-positioning) a video
    element along a path
  • http//faculty.purchase.edu/jeanine.meyer/html5/m
    ovingpictures.html
  • Plays sections of a video clip
    http//faculty.purchase.edu/jeanine.meyer/html5/bo
    oktrip1.html

26
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.
About PowerShow.com