IntroductionWelcome| 00:04 | Hi! This is David Isbitski and welcome to Building
a Windows Store Game Using HTML and JavaScript.
| | 00:10 | I'll show you how to get set up with Microsoft's
free development tool Visual Studio 2012 Express.
| | 00:16 | I'll create and debug a Window Store app,
test against numerous screen sizes using the
| | 00:20 | built-in simulator, and show you how you deploy your
app to the Windows Store or locally for testing.
| | 00:26 | I'll show you how to create a game I call
Balloons by introducing Windows Store development
| | 00:30 | topics that will equip you with the
skills you need to be successful.
| | 00:34 | I'll show you how to implement a game loop in
JavaScript, render our game using hardware
| | 00:38 | accelerated canvas, and include WinJS controls
like the view box, application bar, and flyout control.
| | 00:45 | So grab some coffee, pull up your
gaming chair, and let's have some fun.
| | Collapse this transcript |
| Using the exercise files| 00:00 | You can find the exercise files for this
course as a download from the course home page.
| | 00:05 | These files contain working
projects for each chapter.
| | 00:07 | If you don't want to keep pausing the video
and typing the code, I've also provided snippet
| | 00:12 | files that I'll be
walking through step-by-step.
| | 00:14 | I have the Exercise Files folder here on my
Desktop and if I click into one of Chapter
| | 00:19 | folders, you'll see it
contains a breakdown of each topic.
| | 00:23 | A topic folder will include a start and finish
project with code in the Start folder being
| | 00:28 | a state before we've added anything, and the
Finish folder having the code changes from
| | 00:32 | the covered topic.
| | 00:34 | Any resources we will be adding to the
project during that chapter are also located here
| | 00:38 | in the Chapter folder.
| | 00:40 | The final project is located in the folder
called Final, as well as a links file in the
| | 00:44 | root that contains a list of
additional resources you may find helpful.
| | Collapse this transcript |
|
|
1. Getting StartedSetting up the Visual Studio 2012 development tools| 00:00 | So how do I go about installing the Windows 8
Store development tools? Well, the tools are free.
| | 00:06 | There is a version called
Visual Studio 2012 Express.
| | 00:11 | You're going to need a Windows 8 installation
either 32-bit or 64-bit in order to create
| | 00:17 | Windows Store apps.
| | 00:19 | Now you can run that native
or you can run that virtual.
| | 00:22 | That's up to you.
| | 00:23 | But you will need a Windows 8 installation.
| | 00:27 | Everything you need for Windows Store apps
are going to be up on Microsoft's Windows
| | 00:31 | Developer Center.
| | 00:32 | So you can go to the Windows Developer Center
at dev.windows.com and you're going to see
| | 00:38 | a link for downloads.
| | 00:40 | So let's go ahead and take a look at that.
| | 00:43 | If I open up a browser and I type in dev.windows.com,
you'll see I've got some areas about Windows Store apps.
| | 00:51 | I've got Start here.
| | 00:52 | I have some information
about the Windows Store.
| | 00:54 | Well, what we're going to want to do is
we're going to click up at the top on Downloads
| | 00:58 | and over on the right, we're going to
see Download the tools and the SDK.
| | 01:02 | So if I click on this Download button, you'll see it's
a one click install for Visual Studio 2012 Express.
| | 01:10 | The installation couldn't be any easier.
| | 01:13 | There is no custom install.
| | 01:14 | It's simply a run and it's going to
install everything I need over the Internet.
| | 01:19 | There're also a bunch of samples that
you can download off dev.windows.com.
| | 01:24 | There are actually 400 or more projects.
| | 01:27 | So every topic you may want to check out, whether that's
future topics we'll cover like the accelerometer or touch.
| | 01:34 | There are additional examples and they're
all free for you to be able to download and
| | 01:38 | start using in your own apps.
| | 01:41 | Once we have Visual Studio Express for Windows
8 installed if I double-click, I'm going to
| | 01:47 | get prompted for a Visual
Studio 2012 Update (1).
| | 01:51 | Now if you don't get prompted for this, this is
definitely something you're going to want to install.
| | 01:55 | It includes a lot of developer quality of
life updates, especially for the Windows Store.
| | 02:01 | So if you don't see that prompt, go ahead
and go to Tools and then we're going to go
| | 02:05 | over to Extension and Updates, and if I click on Updates
down here, you'll see Visual Studio 2012 Update (1).
| | 02:15 | So let's go ahead and install this.
| | 02:18 | Click run and we're going to want to
close Visual Studio in the background.
| | 02:21 | If you haven't closed Visual Studio it'll actually
tell you that you need to close Visual Studio.
| | 02:26 | So let's close this down. We'll hit Retry.
| | 02:31 | We'll agree to the terms
and we'll hit Install.
| | 02:34 | This will bring everything down over the
Internet that you need to update Visual Studio.
| | 02:42 | Once our update is done, you'll
see Setup Successful message.
| | 02:44 | We're going to go ahead and
we're going to click Launch.
| | 02:48 | To verify that we have Update (1) installed,
we're going to come up to Help > About Microsoft
| | 02:53 | Visual Studio Express and you'll
see Update 1 is now installed.
| | 02:59 | The last thing you may want to do is if you
go up to Tools > Options, we have a choice
| | 03:05 | of both a Dark and a Light theme.
| | 03:07 | If I hit Light, you'll see here this is very
reminiscent of Visual Studio of the past.
| | 03:13 | I happened to be a fan of the Dark theme.
| | 03:15 | So I'm going to come up here and hit Dark
and then we may want to also change the font.
| | 03:20 | So I'm going to go ahead and I'm going to change
the Font to 14 just so that's easier to read.
| | 03:26 | And that's it!
| | 03:27 | With just a simple click of dev.windows.com
we get the free Microsoft Visual Studio 2012
| | 03:33 | Express and we can begin
developing our Windows Store game.
| | Collapse this transcript |
| Exploring the project layout and application capabilities| 00:00 | Let's go ahead and open Visual Studio
and we're going to go new project.
| | 00:05 | We're greeted with a couple of
different templates for Windows Store apps.
| | 00:09 | So for our game we're just going to
use the Blank App template.
| | 00:12 | We're going to name our game Balloons.
| | 00:14 | So let's go ahead and enter the
name down here and click OK.
| | 00:21 | Now a Window Store app built with HTML and
JavaScript will look very much like a website
| | 00:25 | just sitting in a folder.
| | 00:27 | So you'll notice familiar folder structures
like JS for our JavaScript files, images for
| | 00:33 | our images files, and CSS for our CSS files.
| | 00:36 | In fact, the entire project
starts out with a default.html.
| | 00:41 | So if I double-click on here
you'll see this is indeed HTML5.
| | 00:46 | I get a DOCTYPE html, I have my title for
Balloons, and then I have something called WinJS.
| | 00:53 | Now WinJS is the Windows libraries for
JavaScript, and this is really what bridges the realm
| | 01:00 | of the web with the area of Windows. You don't
need to use anything from WinJS in order to
| | 01:06 | write a Windows Store app, but it's going to give
you a bunch of helper functions that will
| | 01:10 | make life a lot easier.
| | 01:12 | Like all JavaScript libraries, the
Windows library for JavaScript is open.
| | 01:17 | You can click right into these folders and
you can see everything that Microsoft has
| | 01:22 | created inside of
JavaScript for you to utilize.
| | 01:25 | I recommend this as a way to get familiar with
the system and actually see some JavaScript
| | 01:30 | that has been written for Windows.
| | 01:33 | If we move down a bit into the JS folder,
you'll see we've got a default.js file that's
| | 01:41 | matching our default.html file, and the best
way to think of this is an MVC pattern that
| | 01:47 | most people are familiar with on the web where you
have got your model, your view, and your controller.
| | 01:52 | So your view is your default HTML and your
CSS, and your model and your controller will
| | 01:57 | sit in default.js.
| | 02:00 | If I look in default.js you'll
see it's just a standard function.
| | 02:04 | I am using the use strict which is the
ECMAScript 5 standard that will make sure any variables
| | 02:11 | I declare, if I try to use a variable that
wasn't declared later on, it'll warn me about it.
| | 02:18 | An execution starts down here at the bottom with
app.start and then we have app and activation.
| | 02:24 | Now you don't have to
worry too much about this.
| | 02:27 | In fact, we're going to be using
our own way to start our app.
| | 02:31 | This is just a standard boilerplate code that
comes with all Windows Store apps and it's
| | 02:35 | a way for the app to resume if
it's been in the background.
| | 02:39 | Let's switch back over to default.html, and after our
default.js you'll see we also have default.css.
| | 02:48 | If we go into default.css you'll see we've
got some standard CSS3 media queries here.
| | 02:54 | Media queries, just like on the web,
are used for responsive web design.
| | 02:59 | So Windows is filled with devices
that have many different screen sizes.
| | 03:03 | We will cover later on in this course how to
make sure our game looks great on all those
| | 03:08 | different screen sizes.
| | 03:10 | The last thing you're going to see, if we close
all of our folders here, is a package app manifest
| | 03:18 | and a Balloons_TemporaryKey.pfx.
| | 03:22 | Now the temporary key is a temporary
developer key that you've been given so that you can
| | 03:27 | test out your app.
| | 03:29 | When I register with the developer account
I'll actually get my own cert and my own key
| | 03:35 | that will be assigned to my developer account.
| | 03:38 | But for now we're just using a temporary key
so we can go ahead and we can develop our
| | 03:42 | game and test it out.
| | 03:44 | What's important here is package.appxmanifest.
| | 03:47 | So if I double-click on app manifest, you'll
see I'll get a couple of different tabs here.
| | 03:53 | I want to bring your attention
over to the Application UI tab.
| | 03:57 | This is where we name our game.
| | 03:59 | So you can see we have Balloons.
| | 04:01 | We're telling it the Start page which is default.html,
and then we're going to tell it what kind
| | 04:06 | of optional rotations we support.
| | 04:09 | So we support Landscape and Landscape-flipped.
| | 04:12 | If we drag down here what you're going to
see is a bunch of different images for where
| | 04:21 | our app will look like both when it's
scaled and what it looks like on the store.
| | 04:25 | If I click over on All Image Assets, you'll
notice we see all of the different images
| | 04:30 | that are going to be used for our game
throughout the store and inside of our game.
| | 04:35 | So what I'm going to do is I'm going to come over here
and I'm going to add a new image to this project.
| | 04:41 | So we're going to say Add > Existing
Item and I've created a PNG file.
| | 04:47 | So if go to Desktop > Exercise Files >
Chapter 1, you'll see BalloonsLogo.png.
| | 04:56 | So we're going to go ahead and we're going
to add that to our images folder, and then
| | 05:00 | I'm going to come right down here
and I'm going to change from logo.
| | 05:03 | I'm actually going to say BalloonsLogo, and
you'll notice immediately Visual Studio is
| | 05:10 | showing me what that image will
look like as part of my project.
| | 05:15 | Now we're also going to want to
add this Splash Screen logo.
| | 05:18 | So when our app runs, rather than having this
default, and if you forget to use any of these
| | 05:24 | images by the way, you will fail
certification with default images.
| | 05:28 | So we want to make sure that we're always
including images, and users are going to come
| | 05:32 | to expect that we have at least our
own kind of icon in our splash screens.
| | 05:37 | So it's highly recommended, before you forget, that
you go ahead and add your own images here first.
| | 05:42 | So let's go ahead and add
our Splash Screen image.
| | 05:45 | So I am going to go up and say Add > Existing
Item and I've created a SplashLogo.png file.
| | 05:52 | The sizes for all of these files for the way as
you can see on the screen are listed for you.
| | 05:58 | So when you need to create this logo, you
can go ahead and you can do 620x300, which
| | 06:03 | will be your default, and then if you're running
on bigger screen sizes, you may want to move
| | 06:07 | up to 860x420 and this will prevent
any kind of scaling on top of your logo.
| | 06:12 | So let's go ahead and add SplashLogo and you'll
see we now have the logo for our splash screen.
| | 06:21 | I'm going to go up and
I'm going to hit Save All.
| | 06:24 | I am going to make sure that the background
color for my splash screen is blue, and we're
| | 06:31 | going to run this.
| | 06:33 | You will see I get a nice blue background, I had
my splash logo, and there's no content yet.
| | 06:39 | So we're not seeing anything here.
| | 06:41 | If we come back over here and I go down to the
Start screen, you'll see we have our BalloonsLogo
| | 06:49 | and our app is all set and looking nice.
| | 06:53 | So let's look at the other tabs that
are in here in the app capabilities.
| | 06:57 | If I click on Capabilities, you'll see I have
different check boxes for different features
| | 07:03 | that I'd be taking advantage of in Windows.
| | 07:06 | So by default, Internet is checked.
| | 07:09 | Now all apps will use Internet and any app that
has Internet checked will need a privacy policy.
| | 07:16 | So this is something you'll need to think
about when you're going through certification.
| | 07:20 | If I want to enable the webcam,
this is where I would do it.
| | 07:24 | I would check off Webcam and then I would be
requesting that capability, and that capability
| | 07:29 | would actually be listed in the store.
| | 07:31 | This is something very different than
the Windows of the past.
| | 07:35 | In the past I may hit a .exe file and I would
go ahead and install that and may ask me to
| | 07:40 | have admin privileges and who knows
what that installs on your machine.
| | 07:45 | Part of Windows Store apps is that customers
can rest assured that apps only have access
| | 07:52 | to the things that they
show on the Windows Store.
| | 07:55 | So for example, if I click over here, you'll
see at the bottom this app has permission
| | 08:00 | for your location and
your Internet connection.
| | 08:04 | This is exactly where your app
will be listing Internet connection.
| | 08:10 | If we move over to Declarations, this is an area
where you can add other functionality for your games.
| | 08:16 | So for example, using File Pickers,
using things like Background Tasks.
| | 08:21 | This is more than an advanced topic and we
won't be covering any of that inside of our
| | 08:25 | Windows Store game, but this is the
area where you would be setting that.
| | 08:29 | We also have Content URIs.
| | 08:32 | Now Content URIs are a way for you to
actually go in and have websites that are going to
| | 08:38 | access local apps.
| | 08:40 | So for example, if I'm going to use something
like Bing Maps I want that URL to have access
| | 08:48 | to my local app cache, to my
clipboard, and to my geolocation.
| | 08:53 | This will create URIs that are acceptable and are
allowed to access things from your local app.
| | 08:59 | Again, not anything that we need to set for
our game, but this is an area where you can
| | 09:04 | set content URIs.
| | 09:06 | The last piece which is very
important is the packaging piece.
| | 09:11 | This is where you set the display name and
the publisher display name for what your app
| | 09:16 | will look like in the store.
| | 09:18 | You also have the ability to
choose your developer certificate.
| | 09:21 | So today, you can see this is just the test
developer certificate that's down here.
| | 09:27 | So when I want to actually assign this to a
real certificate when I'm at the point where
| | 09:32 | I'm ready to publish this to the store,
| | 09:35 | we simply come up to this Store menu
and I say Associate App with the Store.
| | 09:41 | I'm going to go ahead and I'm going to
sign in with my Windows Developer Account.
| | 09:47 | It's going to authenticate that account and
it's going to bring down a bunch of different
| | 09:51 | apps that I've actually created inside of the
store that I can associate this code with.
| | 09:57 | Let's go ahead and create a new app.
| | 09:59 | So I'm going to say Reserve Name.
| | 10:01 | I'm going to log in.
| | 10:02 | This is dev.windows.com.
| | 10:04 | So this is the actual portal for
the Windows Store app development.
| | 10:11 | You may get this prompt.
| | 10:12 | This is anytime you're on a machine
that you haven't been on before,
| | 10:16 | it's going to give you a
little bit of extra security.
| | 10:19 | So I'm going to get this code and
I'm going to go ahead and log in.
| | 10:26 | Now you see the Submit an app screen.
| | 10:28 | Submit an app will show you all of the process
that you need to go through to actually submit
| | 10:32 | an app to the store with some recommendations around
how much time you need to allot for each section.
| | 10:39 | So let's go ahead and create an app name and
we'll say BalloonsTestGame and we're going
| | 10:45 | to be reserve that app name and Save it.
| | 10:49 | You'll see this step is now complete.
| | 10:51 | So if I switch back to Visual Studio, you'll see
the app is now updated with our BalloonsTestGame,
| | 10:58 | we're going to go ahead and
we're going to hit Next.
| | 11:00 | So after we associated an app what you're
going to see here this is the package display
| | 11:04 | name that I've used in the Windows Store.
| | 11:08 | It's the package name that it's pulling from our
project as well as the publisher display name.
| | 11:13 | So when I registered my account on dev.windows.com
the company I registered as was DaveDev Productions.
| | 11:20 | So if I hit Associate, what you'll see now is the
publisher display name has been filled out for me.
| | 11:27 | The package display name, so BalloonsTestGame
has been filled out, as well as a certificate
| | 11:32 | here of my actual publisher certificate.
| | 11:36 | What you're seeing here over on the right is
StoreKey instead of that temporary developer
| | 11:40 | key that we started out with. That's it.
| | 11:44 | We now have a working associated Windows Store
game that's using our developer account and
| | 11:49 | we're ready to begin coding.
| | Collapse this transcript |
| Debugging your application and going over the DOM Explorer| 00:00 | Let's look at how we would debug one of these
Windows Store applications written with JavaScript.
| | 00:06 | You can think of a Windows Store app built
with HTML and JavaScript as one big web page.
| | 00:10 | Items in your app are loaded in and out of
the DOM, the Document Object Model, just like
| | 00:15 | they are on a website.
| | 00:16 | Unlike a web page however, a Windows Store app
state is preserved through local variables.
| | 00:22 | Since this is on compiled JavaScript, when we
run our application we are not precompiling
| | 00:26 | anything like we would in native languages.
| | 00:29 | In fact, we can change values for elements
in our applications in real time, just like
| | 00:33 | we can on the web.
| | 00:35 | The performance of the Windows Store app is
extremely fast thanks to the power of the
| | 00:38 | Chakra engine; Microsoft's JavaScript
runtime that is also found in Internet Explorer.
| | 00:43 | We start off debugging these
applications like we would any other application.
| | 00:47 | From the Debug menu, you can see Start
Debugging or Start Without Debugging.
| | 00:52 | We also have the ability now to run
Local Machine, Simulator, or Remote Machine.
| | 00:59 | What I'm going to do is I'm going to come
over to default.js and we're going to set
| | 01:03 | a breakpoint over at app activated.
| | 01:07 | So you can see here I've clicked in the left
column and this is going to tell Visual Studio
| | 01:12 | when I run with debugging turned on, I want to
stop execution right at this line, so right
| | 01:18 | at line 12.
| | 01:19 | Let's go ahead and run that.
| | 01:22 | And you'll see immediately I have the
ability to mouse over and I have args.detail.kind
| | 01:28 | is this equal to activation
.ActivationKind.launch.
| | 01:32 | So if I move over here and I'm going to go
ahead and we're going to add this as a watch,
| | 01:37 | just like I would in any other languages in
Visual Studio, and you can see I have the value of 0.
| | 01:42 | If I drop over here to ActivationKind, you'll
see there is an enumeration for all of the
| | 01:48 | kinds of activations.
| | 01:50 | So 0 is launch and in fact we know we're doing
a fresh launch of the app, so this is matching up perfectly.
| | 01:57 | I'm going to go ahead and I'm going to Continue,
and you'll see our app runs and continues
| | 02:03 | execution. Let's go ahead and close debugging,
let's remove our breakpoint, and let's look
| | 02:12 | at default.html.
| | 02:13 | So you can see currently I have a single
paragraph tag in my body that says Content goes here.
| | 02:21 | So just like on the web I may want to be able
to drop down into the HTML and see what are
| | 02:26 | the attributes that have
been assigned through the CSS.
| | 02:30 | So let's go ahead and run this.
| | 02:33 | Now the application is running live. We're
going to switch over here to something called
| | 02:37 | the DOM Explorer.
| | 02:39 | If I click on the DOM Explorer you'll see
this is the HTML that is now live and loaded
| | 02:45 | into the DOM. I can click on individual elements,
so for example, if I click over here on paragraph,
| | 02:54 | you'll see content goes here. I have all of
the CSS styles that have been assigned, so
| | 03:00 | a lot of this is coming from ui-dark.css;
| | 03:03 | ui-dark.css is the included theme to give
your application that Microsoft design style
| | 03:10 | that's available in all Windows Store
apps. We're going to scroll down here,
| | 03:14 | and you can see I have a color for body.
| | 03:17 | Now to show you that this is happening in
real time, if I come over here and I change
| | 03:24 | this from RGB to, let's say red,
| | 03:27 | I have now changed the color of the body tag
to red and in fact if I go back to the app,
| | 03:33 | you'll see content goes here is now
in red, versus the default font.
| | 03:39 | And if I come down to selection and background,
you'll see I can also change the colors both
| | 03:47 | the purple and the white.
| | 03:49 | So all of this is selectable
and can be changed in real time.
| | 03:53 | Let's also change the font size. So if we
come up here and instead of having a body
| | 03:58 | h5 and win-type-small of 11 point, maybe we
want to make this font really big, so we'll
| | 04:04 | come in here and we'll say 75 point, we'll
switch back over and in real time you can
| | 04:09 | now see content goes here is super big.
| | 04:13 | I also have the ability to trace styles.
| | 04:16 | This is something that's very helpful when
you're trying to troubleshoot your application
| | 04:20 | and you're trying to know which
CSS that element is inheriting.
| | 04:24 | So these are all of the final CSS attributes
that have been inherited by content goes here.
| | 04:30 | So you can see we have color, we also
have the 75 point that's been assigned.
| | 04:35 | If I want to look at what the margins are
like in the page, you can see I have got a
| | 04:39 | 100 pixel margin from the top, so I know
content goes here is actually happening a 100 pixels
| | 04:45 | from the border. I can drill into attributes
or I can add individual attributes for the
| | 04:50 | body tag and I also have my events.
| | 04:53 | So if you've used the IE debug tools on the
web this is going to seem very similar and
| | 04:58 | very familiar, and it's a powerful way to go
through and actually edit all of my attributes.
| | 05:04 | I also have the ability to select elements here,
so maybe I don't want to know each individual
| | 05:10 | element in the body or
in the header over here.
| | 05:13 | What I can do is I can hit Select Element and
now you'll see a purple box is drawn around
| | 05:18 | content goes here.
| | 05:20 | If I click, you'll notice it's
highlighting content goes here.
| | 05:24 | Right now our app is pretty simple with only
one element, but you can see as we start to
| | 05:28 | have hundreds of elements on our screen, it
becomes a very easy way to select which elements
| | 05:33 | we want to edit.
| | 05:35 | The Windows Store developer tools also come
with a free product called Blend for Visual Studio.
| | 05:42 | If I want to open this project in Blend, I
can right-click and I can say Open in Blend.
| | 05:48 | What I'm going to do is I'm going to open up
our exercise files with our final solution
| | 05:53 | here, so that we have a more
advanced application to look at.
| | 05:57 | This is kind of a preview of where we're
going to get with our game, and you say OK.
| | 06:04 | And I'm going to right-click and say Open
in Blend, and Blend becomes a very powerful
| | 06:09 | tool for using your application in real time.
| | 06:15 | So what's going to happen is as our app opens,
you're going to see what your application
| | 06:19 | actually looks like versus just the HTML.
| | 06:23 | So what you can see here is it looks like a
Microsoft surface device. This is the first
| | 06:27 | screen of our application. Down at the bottom
I have default.html, so I can see everything
| | 06:32 | that's in my HTML and I can also see
default.css with all of my CSS tags.
| | 06:38 | Over here on the left is something called
the Live DOM, so as I drop down you'll see
| | 06:43 | all of this script that's coming from my
application has now shown up inside of the Live DOM Explorer
| | 06:50 | as has all of the body tag.
| | 06:53 | Now if you've ever done web development one
of the things that's probably happen to you
| | 06:57 | is, when you run your application, the
objects that you actually want to style are being
| | 07:02 | generated from JavaScript.
| | 07:05 | So how do I style something that doesn't
actually exist until run time? Well, Blend also offers
| | 07:11 | a tool called Interactive Mode.
| | 07:13 | If I turn on Interactive Mode, you'll
notice I can actually use my application.
| | 07:18 | So now my application has switched screens, we're
actually in a game mode. I can turn off Interactive
| | 07:25 | Mode and you can see all of the elements
being rendered and you can see the Live DOM.
| | 07:29 | This is a really great tool for getting inside
of our game while it's actually running and
| | 07:34 | styling all of the elements.
| | Collapse this transcript |
| Using the simulator| 00:00 | One of the great things about Windows is
there's an entire ecosystem of devices.
| | 00:06 | But how do we debug against devices that
have numerous different screen sizes?
| | 00:11 | Luckily for us Visual Studio 2012 includes a
fully functional simulator that allows you
| | 00:16 | to debug your application using things like
touch and different screen resolutions without
| | 00:20 | requiring any additional hardware.
| | 00:23 | This is enabled by remoting into a
new instance of your own machine.
| | 00:26 | And it's actually quite
magical when you start using it.
| | 00:29 | One of the tips I recommend first off, is if
you have something like Dropbox or SkyDrive
| | 00:34 | running make sure you turn that off.
| | 00:36 | If you seen the movie inception and it will be
a little bit like that, where you're running
| | 00:40 | inside of an instance inside of an instance,
and you don't want any kind of cloud sync
| | 00:44 | software that's actually going be running.
| | 00:47 | So what we are going to do here is we're
going to come up to the top, and now instead of
| | 00:50 | debugging to local machine, I'm
going to debug to Simulator.
| | 00:53 | So I'm going to go ahead here and click Debug
With Simulator, and you'll notice that this
| | 01:00 | is an instance of my own machine. It looks
like a Windows 8 tablet over here, in fact
| | 01:06 | I can hit the Start button, I can right-click
to bring up the app bar, I can scroll around.
| | 01:12 | For all intents and
purposes, this is my own machine.
| | 01:16 | But now I have a bunch of capabilities
that you're seeing here on the right.
| | 01:20 | First of those capabilities is I can always
have this on top. I have the ability to switch
| | 01:25 | between Mouse mode, so you'll notice when I
move my mouse around I get that scrollbar,
| | 01:30 | and if you're using a laptop without touch on
Windows, this is what your Start menu will look like.
| | 01:35 | I also have the ability to go into Touch mode,
and now you're seeing a circle that looks
| | 01:41 | like a finger.
| | 01:42 | And you're noticing I'm not getting that
scrollbar, and that's because when I'm using touch I
| | 01:46 | don't need it. I get an Indicator bar at the
bottom to show me how far I have yet to scroll.
| | 01:52 | But I have the ability to move the entire
Start menu just like I would on a device that has touch.
| | 01:58 | I can also click here for Pinch to Zoom mode,
and you'll notice it looks like two fingers
| | 02:03 | on the screen right now, and the way that we
use Pinch to Zoom mode is you scroll
| | 02:08 | through the mouse wheel. So you do see how
I'm moving this back and fourth with my mouse
| | 02:11 | wheel and you can see kind of that semantic
zoom? So this is a way that you can actually
| | 02:15 | use Pinch to Zoom without any touch hardware.
| | 02:18 | You also have the ability to do rotation, so
you can see here, if I had a picture where
| | 02:23 | I could rotate to the left or right, the
Simulator is giving me that ability as well.
| | 02:27 | If I want to check out portrait, I can click
over here and I can rotate the device clockwise
| | 02:32 | and this is like lifting up a tablet
device and just turning it on its side.
| | 02:36 | Let's go ahead and rotate that back, and we
can also resize this screen, so let me get
| | 02:41 | my pointer back here and resize this device.
| | 02:44 | So if you're working on a laptop and you want
that emulator be a lot smaller, you can. If
| | 02:50 | you want it to be a lot bigger you can go
ahead and you can resize here.
| | 02:53 | Now this is one of the most important tabs
that you're going to use as a developer, it's
| | 02:57 | called Change resolution.
| | 02:59 | And what you are seeing here is you're seeing
different screen resolutions at different screen sizes.
| | 03:05 | So Windows inherently is going to scale up
your app for you when you hit different dpi pixel densities.
| | 03:14 | So we call that a 100% a 140% and 180% scale,
and those are shown here through the different 10.6" screens.
| | 03:26 | So 10.6x366x768 which happens to be the
resolution of the Microsoft surface device,
| | 03:33 | is your baseline. So this 100% scale.
| | 03:36 | Now remember, Windows 8 will run on older
devices that are running at 1024x768, so you do have
| | 03:44 | that ability to test what your app
will look like on those older devices.
| | 03:48 | If we move up to the next phase of dpi you can
see I'm on a 10.6 inch screen at 1920x1080,
| | 03:54 | let's go ahead and click that, and you'll see
our app has now scaled up for that screen. If I hit
| | 04:01 | Start you can see my Start
menu has scaled up as well.
| | 04:06 | And finally, if we want go up to a 2560x1440
resolution on a 10.6 inch screen, I can click
| | 04:14 | here, and this would be what would typically
in all-in-one device, and you can see my app
| | 04:19 | has now fully scaled up as has my Start menu.
| | 04:23 | The next piece of functionality that you get
this simulator is a GPS set location button.
| | 04:28 | So if I come in to here I'll be able to
configure this. If I had a GPS in this device, it would
| | 04:33 | read from it, and then I can send any
kind of location coordinates to my app.
| | 04:38 | And finally, if I want to take screenshots of
my app, I have that ability right here. I can
| | 04:43 | setup where I want to save screenshots, and I
can also take screenshots of my app running.
| | 04:49 | You can see this becomes a very powerful tool
when you're attempting to debug your Windows
| | 04:53 | Store app against all
different types of screen resolutions.
| | Collapse this transcript |
| Deploying your application| 00:00 | Once we have our app written, how do we
deploy it to the Windows Store? Windows 8 offers
| | 00:06 | a completely new app experience for
consumers via the Windows Store.
| | 00:10 | Apps written for this new store use a new
programming model called WinRT or Windows Runtime.
| | 00:16 | This is the new foundation inside Windows
that enables us to code applications written
| | 00:21 | just using JavaScript and HTML5.
| | 00:25 | Applications purchased from the Windows Store
are installed in a different way than older
| | 00:28 | desktop applications.
| | 00:30 | There are no setup .exe files, and users
simply click on install from the Windows Store.
| | 00:37 | Applications will be delivered into a
secured area on the PC's hard drive.
| | 00:41 | These new applications are bundled up into
a single package with the appx extension.
| | 00:47 | The appx package includes an app manifest
that talks about all the information needed
| | 00:52 | to deploy the app. It contains a block map,
so that files when they need to be updated
| | 00:58 | don't need to install the entire application,
and then it includes a signature file that
| | 01:03 | includes your developer certificate.
| | 01:06 | Once we've got our app ready and we've
created a package, we can also run the Windows App
| | 01:12 | Certification Kit or the WAC tool.
| | 01:15 | When you go ahead and you validate your own
app, you're going to get a report that you
| | 01:19 | can see here.
| | 01:21 | This report can take a while to generate,
so I've already run it against the baseline
| | 01:25 | that you can see here, and my overall result
is failed because for this example, I've just
| | 01:31 | done File > New Project to point out
those image files for store logo.
| | 01:37 | If you had forgotten that step,
it'll go ahead and flag that for you.
| | 01:41 | Remember, using the default logos will be
something that you'll fail certification for.
| | 01:46 | Let's go over to Visual Studio and
actually generate one of these appx packages.
| | 01:53 | I'm using Visual Studio Express, so I have a
Store menu at top. If you're using a different
| | 01:59 | version of Visual Studio, your Store menu
may be in a different location, for example,
| | 02:04 | in Visual Studio Ultimate, it
will be on your File Project menu.
| | 02:08 | Let's go up to Store and
say Create App Package.
| | 02:13 | I have the ability to create a package for the
Window Store or I can create a local package.
| | 02:19 | A local package will allow you to run your app
on any machines that you've that registered
| | 02:24 | with your developer account. This will allow
you to share your code for people who may be
| | 02:29 | beta testing your app for you, as well as
deploying it to different machines.
| | 02:34 | Let's go ahead and say no here, and we're
going to create a local appx package. I'm
| | 02:39 | just going to go ahead and
Create and take all of the defaults.
| | 02:44 | And Visual Studio has now
created an appx package for me.
| | 02:48 | You'll see the location of that is in Exercise
File > Chapter 1 > Finish > Balloons > AppPackages.
| | 02:55 | If I click on here, you'll
see the appx package itself.
| | 03:00 | If I double-click on the folder, you're going
to see what's basically a PowerShell script.
| | 03:06 | If want to install this application on
another machine, this is how you'll do it.
| | 03:10 | You'll right-click on the PowerShell
script and you'll say Run with PowerShell.
| | 03:15 | You can also see that this app
includes my developer certificate.
| | Collapse this transcript |
|
|
2. The Microsoft Web PlatformOverview of the Microsoft Web Stack| 00:00 | So let's take a moment to talk
about the power of the whole PC.
| | 00:04 | Microsoft's objective when it released
Internet Explorer 9 was to really bring the web, with
| | 00:10 | HTML and JavaScript, to the world of hardware
accelerated graphics using your GPU or Graphics
| | 00:16 | Processor Unit, and multi-core processors
for running JavaScript tasks across all of
| | 00:21 | those processors.
| | 00:23 | There is a couple of sites that you can
check out that show off the native capabilities
| | 00:29 | of JavaScript on the web, and how fast things
can be with hardware accelerated graphics.
| | 00:35 | It's this hardware acceleration, and the
advanced performance that JavaScript can now give us
| | 00:41 | that let us play all sorts of games on the
web and will enable us to create some really
| | 00:46 | interesting stuff for the Windows Store.
| | 00:48 | So the first site you may want to
check out is called beautyoftheweb.
| | 00:53 | This will showcase a bunch of different apps
that are out there, so for example Cut the
| | 00:56 | Rope will allow you to play
the game all within a browser.
| | 01:01 | There's also the Atari Arcade, so if you are
a child of the late 1970s and remember all
| | 01:06 | of those Atari classics, these are now working inside
of a browser, and they're fully hardware-accelerated
| | 01:13 | and touch-enabled.
| | 01:15 | All of this is going to enable us to build
some pretty impressive Windows Store games
| | 01:19 | and performance is something that's just going
to be there for us and available throughout.
| | 01:25 | The way this is accomplished is by using that
same JavaScript engine and same HTML and CSS
| | 01:31 | engine for rendering both on the web through
Internet Explorer and inside of your Windows Store apps.
| | 01:39 | So if you are a web developer who is used
to HTML, CSS, and JavaScript, you can live
| | 01:44 | in those worlds and use your existing skills
both across the web and Windows.
| | 01:50 | Everything is the same.
| | Collapse this transcript |
| Exploring HTML5 capabilities| 00:00 | So the HTML5 capabilities for Windows Store
apps are the same that's available on the web.
| | 00:06 | If you're unfamiliar with some of the HTML5
capabilities that are supported, Microsoft
| | 00:12 | has some websites set up.
| | 00:14 | You can go to ie.microsoft.com/testdrive and
there is a site map that will link to all
| | 00:21 | sorts of different apps that
will show off HTML5 support.
| | 00:26 | What we're going to do is we are going to
jump right over to the Windows 8 HTML5 Platform website.
| | 00:32 | When I load up the page, you'll see over on
the right, we have a bunch of different demos
| | 00:36 | for HTML5 capabilities, and most of these
I've picked because they're something that
| | 00:40 | we would want to use inside of a game.
| | 00:43 | So we get things like transforms,
and gradients, and text shadows.
| | 00:47 | We also get different things like typography.
| | 00:50 | So if I go over here and I click on typography,
one of the new HTML5 features that's available,
| | 00:57 | is the web open font format.
| | 01:00 | So typically a web page might look like this
if I'm using standard built-in fonts in the browser.
| | 01:06 | But if I turn on WOFF, you'll see now I get
all of these advanced fonts that make it look
| | 01:12 | a lot like the printed page.
| | 01:15 | If we go back over here, let's look
at something like a 3D transform.
| | 01:21 | This is going to be a tool that you are
going to want to use during your game to create
| | 01:25 | all of the CSS styles.
| | 01:27 | In fact, all of the CSS styles you'll see in
this course I've created using this tool.
| | 01:33 | So over here on the left, this
is a default CSS style tag.
| | 01:38 | You can see I have a transform here, and now I
am going to go over and I am going to select
| | 01:43 | translate 3D, and you will see
I've got X, Y, and Z coordinates.
| | 01:48 | And down at the bottom, it's added the
transform to the style tag, translate3d, and you can
| | 01:53 | see 0, X, and Y.
| | 01:56 | You can also move this bar in real-time.
| | 01:59 | And what you are seeing on the screen is the X
coordinates for that element to move in real-time.
| | 02:05 | We can also move it across the Y axis, and
then we can move it across the Z axis if we
| | 02:11 | want to get closer or
farther away from the screen.
| | 02:15 | This is all using CSS3.
| | 02:17 | It's the same exact CSS3
that works on the web.
| | 02:21 | It will simply work inside
of our Windows Store apps.
| | 02:26 | Touch is also something that's available.
| | 02:29 | Whether you're using a mouse-pointer, or a
stylus or a finger, all of that works through
| | 02:34 | the MS pointer touch APIs.
| | 02:36 | So here's another example of moving a mouse
around, and having a particle system move.
| | 02:42 | You can see I can turn on
Gravity Well or Magnetic Repulsion.
| | 02:46 | But I can test all of these hardware-
accelerated graphics out using Touch through the IE test
| | 02:51 | drive as well.
| | 02:53 | Lastly, another area that you may
want to check out is Try Strict.
| | 02:58 | So Try Strict uses the ECMAScript 5 standard
that will allow us to detect for variables
| | 03:07 | that are undeclared and
throw up an error message.
| | 03:09 | So why don't we go ahead and do
something like a new function here?
| | 03:15 | I'm going to go ahead and say a new variable.
| | 03:18 | We'll say balloons = "fun".
| | 03:24 | And if I was going to do a 'document write
line' and misspell balloons, let's say with
| | 03:30 | a capital, when I go ahead and I try to run
this code, you will see it's flagged Balloons
| | 03:38 | as undefined.
| | 03:40 | If I go back over here, and I run
balloons, you will see no errors.
| | 03:48 | This is the new HTML5 functionality that
allows Visual Studio to integrate and give you all
| | 03:53 | of that great debugging when you're going
to go ahead and create your Windows Store app.
| | 03:58 |
| | Collapse this transcript |
| Understanding HTML5 Canvas| 00:00 | The rendering engine we're going to use for
our game is something called HTML5 Canvas.
| | 00:05 | HTML5 Canvas is an open web standard.
| | 00:08 | You can look up the specs on the W3C docs site,
and the best way to think of HTML5 Canvas
| | 00:14 | versus using bitmap graphics, or something
like SVG, is it's a rendering engine that allows
| | 00:19 | you to change at a per pixel level.
| | 00:23 | So it's a very simple API.
| | 00:24 | There are only 45 methods and 21 attributes.
| | 00:27 | It's a standard HTML tag that you're going
to declare where you're going to say canvas
| | 00:33 | and everything else is
driven through JavaScript.
| | 00:36 | So let's say I wanted to create a red circle.
| | 00:39 | At the top here, you can see a standard
HTML tag, I'm calling balloonCanvas.
| | 00:44 | I'm giving it a width of
400, and a height of 400.
| | 00:47 | And then in the JavaScript side, I get the
element of balloonCanvas, and I get its 2d context.
| | 00:54 | Currently, only the 2d context exists.
| | 00:57 | I'm going to then create a path with its fill
style of red, and I'm going to create a circle and fill.
| | 01:04 | And that's how simple it
is to draw with Canvas.
| | 01:07 | Now there's another tool that Microsoft
created up on the IE test drive called Canvas Pad.
| | 01:13 | Canvas Pad is a great way for you to learn
HTML5 Canvas, as well as creating the elements
| | 01:18 | that you want to use in your own canvas
just like we did for the CSS styles.
| | 01:23 | Once I load up HTML5 Canvas Pad, you'll see
I have a console where I can go ahead and
| | 01:28 | I can enter things directly into the script.
| | 01:32 | So let's go and look for Arcs.
| | 01:35 | You can see here, I've got a
bunch of different circles.
| | 01:38 | Let's clear some of this out.
| | 01:41 | And let's go ahead and create a green
circle here, and we're going to go execute.
| | 01:46 | And as you can see, we've got a green
circle here with a path and a fill style.
| | 01:51 | That's how easy it is to render
to the screen using HTML5 Canvas.
| | 01:55 | This will be the engine that we're going to
actually use inside of our Windows Store game.
| | Collapse this transcript |
| Using JavaScript with WinJS| 00:00 | Now we want to talk a little bit about the
Windows Library for JavaScript or WinJS.
| | 00:05 | WinJS is included in all the default
templates for Windows Store apps.
| | 00:09 | These templates match the
Microsoft design style.
| | 00:12 | So if you're not a designer, right out of
the box, when you do File > New Project, your
| | 00:17 | application will look
like a Windows Store app.
| | 00:20 | This includes all of the default CSS styles,
controls for most user experiences that you'll encounter.
| | 00:27 | All of the controls are designed for touch
as well as traditional input like pen and mouse.
| | 00:32 | It will scale up across different
screen sizes and form factors.
| | 00:36 | There are libraries for doing animation. There
are libraries for data binding to all of the
| | 00:41 | controls. There are navigation controls for
moving back-and-forth between screens. There's
| | 00:46 | an application class which will allow you to
do things in application scope, and there
| | 00:51 | are JavaScript Promises which give you the
capability to do things asynchronously.
| | 00:56 | The controls out of the box include things
like the back button, check boxes, combo boxes,
| | 01:01 | as well as a Date Picker control.
| | 01:04 | There's also some other controls like the
Application Bar which we'll be adding to our
| | 01:08 | game later, and the flyout control which will
pop up and allow users to input text directly
| | 01:14 | where they tapped on the screen.
| | 01:16 | Let's go ahead and add some simple WinJS
controls to our game now to see what it's like.
| | 01:22 | Inside of my Visual Studio project,
I'm going to open up default.html.
| | 01:26 | I'm going to make sure that I'm still
referencing the Windows Library for JavaScript.
| | 01:31 | And then right after Content goes here, what
we're going to do is we're going to create
| | 01:35 | a div tag.
| | 01:36 | Now this is just a standard div tag, the same
as you can see on the web, and I'm going to
| | 01:41 | use another W3 standard which is called data-.
Data- allows you to enter your own kind of attributes.
| | 01:49 | So for WinJS controls, it's data-win-control.
| | 01:54 | I'm going to say win-control,
let's pick the DatePicker.
| | 01:59 | You also notice that I'm getting
full IntelliSense on these controls.
| | 02:03 | I'm going to give it an ID of myDate and
then I'm going to close that div tag.
| | 02:10 | Let's go ahead and run this.
| | 02:12 | And what will happen now is at run-time, the
WinJS Library will see that div tag, it will
| | 02:18 | see the data-attribute, and it will create a
DatePicker control which will be three combo boxes.
| | 02:25 | It will go ahead and it will pre-populate
those combo boxes, and it will pick the current date.
| | 02:30 | And you can see all of these controls are
both supporting mouse as well as touch.
| | 02:37 | That's how easy it is to add a WinJS control.
| | 02:42 | Let's get a bit fancier.
| | 02:45 | Let's say that we want to
add something like an image.
| | 02:47 | I'm going to go ahead, and I'm going to create
just a standard HTML image tag, and I'm going
| | 02:53 | to give the source equal to our images folder.
| | 02:57 | Let's use our BalloonsLogo, and
we'll give it an ID as well.
| | 03:02 | So we'll say id="imgLogo".
| | 03:05 | Now if I run this, I have my daytime control,
and I have my image logo that you can see right here.
| | 03:15 | What about stretching that image logo to the
full size of the screen? There's another WinJS
| | 03:20 | control called ViewBox.
| | 03:23 | ViewBox will do a CSS3 transform and will
stretch whatever is inside it to fill the size
| | 03:29 | of the screen.
| | 03:29 | So I'm going to put a div tag around this.
| | 03:32 | I'm going to do data-win-control,
and we are going to pick a ViewBox.
| | 03:39 | I'm going to give it an ID of logo,
and then I'm going to close my div tag.
| | 03:46 | Now this screen will go ahead and stretch
the logo to be the full size when I run this.
| | 03:54 | You can see I now have my DatePicker
control, and my image has scaled up.
| | 03:58 | Notice it's also centered the image.
| | 04:00 | ViewBox is a great way if you have existing
resources to scale them up to the current
| | 04:05 | size of the screen and center them.
| | 04:08 | That's how easy it is to add
some WinJS controls to our project.
| | Collapse this transcript |
|
|
3. The Game InterfaceExploring layout with CSS3| 00:00 | Now it's time to start
creating the layout for our game.
| | 00:03 | Let's go into default HTML and we'll remove
what we did before with the Date Picker and
| | 00:10 | the ViewBox.
| | 00:11 | So I'm going to delete that and just start
fresh with my body tag, and then we need to
| | 00:16 | add it div tag, for what's going
to be our interface for our game.
| | 00:20 | So this will include player
score, level, and player name.
| | 00:25 | I'll drag this over and you'll see these are
standard div tags. I've got one main div that
| | 00:33 | I call divGame. I've got a text area for score,
that I'm setting to 0 for default. I've got
| | 00:40 | the level, so we're going to start off on
level 0, and then I have a div for my player,
| | 00:46 | so I've got my player name and
I've got an image for the balloon.
| | 00:51 | Let's go ahead and add that image right now, so
I'm going to say Add Existing Item.
| | 00:56 | I am going to go over to my Exercise Files >
Chapter 3 and you'll see balloon-red.
| | 01:05 | If I go ahead and I run this, you'll notice
I have the balloon and the balloon is the
| | 01:11 | actual size, so it looks very large on the
screen right now, and you'll see I've got Score,
| | 01:16 | Level and Player.
| | 01:18 | So this is standard div in HTML. Nothing has
been assigned a style, so we need to go ahead
| | 01:23 | and add some CSS to that right now.
| | 01:26 | Let's go into our CSS folder and we're going to
Add > New Item, I'm going to select stylesheet.
| | 01:34 | Let's go ahead and say balloons. We're going
to delete the default that's in there now,
| | 01:41 | and we're going to bring over
some of the CSS that we have here.
| | 01:50 | And I'll step through here and explain what
this does. So font face is the W3 standard
| | 01:56 | for going ahead and embedding
fonts into CSS and HTML applications.
| | 02:03 | So the font that we're actually going to use here
is a free open font called the Arizonia-Regular.
| | 02:09 | Now I've seen some issues with fonts that
are on the web that don't allow you to embed
| | 02:15 | that in CSS.
| | 02:16 | So if you're going through this course and
you decide you want to use your own font and
| | 02:20 | it's not showing up in the
game, here's a little tip.
| | 02:23 | There's a site that you are going to want to
go to, its called the F12 developer tools
| | 02:27 | console error messages.
| | 02:30 | And a common error message that you're going
to get is in the CSS, so if we scroll down
| | 02:34 | here and we see CSS114: font face-failed. So
it failed to obtain the correct permissions
| | 02:42 | or licensing for embedding the font.
| | 02:45 | This is a common error, so you want to make
sure that you're using a font that'll actually
| | 02:49 | be able to embed with the CSS.
| | 02:51 | We're using a free open font from
Google here called at Arizonia-Regular.
| | 02:56 | So we're going to want to make sure when we
copy this font over that we're including both
| | 03:00 | the TrueType Font file as
well as that open license.
| | 03:04 | So let's go ahead and
include that font right now.
| | 03:06 | I'm ago up to the top on balloons and I'm
going to say Add > New Folder, we'll call it Fonts.
| | 03:13 | And we're going to Add Existing Item, and
you'll see Arizonia-Regular, and then our OFL
| | 03:20 | license. Go ahead and add that.
| | 03:23 | And now let's walk through the CSS. So we've
got our font face CSS tag. You can see it's
| | 03:28 | pointing to the font's folder where our
TrueType font is, and then we're going to assign CSS
| | 03:34 | styles for each ID of the
elements we had for our games.
| | 03:38 | So if you recall we had txtScore at the top,
PlayerName, txtLevel, and then we had imgPlayer
| | 03:44 | as well as a div so all of those elements
where the image player and name where.
| | 03:50 | Now I'm assigning font family Arizonia. I'm
giving it a size and a color; nothing too
| | 03:55 | fancy here. This is just standard CSS.
| | 03:58 | The one thing I want to point out is when
we run this, you'll notice that nothing is
| | 04:03 | set up yet, so just like the web, Windows
expects you to include those CSS files in
| | 04:09 | your HTML. So your HTML you can think of as
the reference point for all of your included
| | 04:14 | JavaScript, and all of your included CSS.
| | 04:18 | Lucky for us we're using Visual Studio, and
Visual Studio allows you to just bring over
| | 04:22 | and drag in your CSS, so you can see now it's
including css/balloons.css. I'm going to add
| | 04:29 | forward slash there, and
we'll go ahead and run this.
| | 04:32 | And now you'll notice I have player,
I have level and I have score.
| | 04:37 | Now level and score are overlapping and that's
because in the future we're going to go ahead
| | 04:43 | and we're going to align that at run time,
so that the level is centered in the screen.
| | 04:49 | So right now everything will just overlap,
but eventually what we're going to do is we're
| | 04:53 | going to make sure, whatever the screen size
is that we put that right in the middle, in
| | 04:58 | the center.
| | 04:59 | You can also see that the balloon as the
default image is now appearing as the proper size.
| | 05:04 | We are doing that through our CSS tag that you may
have noticed down here in Image Player called contain.
| | 05:11 | Contain will allow it to stretch and fill to
the size that we've set up, which happens
| | 05:16 | to be 70x70 pixels.
| | 05:19 | That's how easy it is to set up some layout
and embed a special font inside of our game.
| | Collapse this transcript |
| Creating the canvas| 00:00 | Now that we got the layout of our player,
score and level and name, let's go ahead and
| | 00:05 | add an HTML5 Canvas so we can
begin to render things to the screen.
| | 00:10 | We're going to go over to default.html and
right after our div for all of our player
| | 00:17 | elements, we're going to add a
standard HTML5 Canvas tag.
| | 00:25 | So I'm going to call that divRoot and in our
previous WinJS control example we used the
| | 00:31 | ViewBox. This is the same control we're
going to use to make sure that our canvas scales
| | 00:35 | up to the size of the screen, so we're doing
data-win-control ViewBox, and then you can
| | 00:40 | see I have a standard HTML5
canvas tag with ID canvas.
| | 00:45 | Let's add some style to that.
| | 00:47 | So we're going to go into our balloons.css,
we're going to scroll down to the bottom and
| | 00:54 | we're going to style the divRoot,
so that its position is absolute.
| | 00:58 | This will allow us to make sure that
our canvas covers the entire screen.
| | 01:06 | Now we're going to jump into default.js and we
need a way to access our canvas from within JavaScript.
| | 01:14 | So just like the web where we typically go
ahead and start doing our programmatic access
| | 01:20 | after the page has loaded, we're going to add
right here before app.oncheckpoint, an event
| | 01:26 | handler called DOMContentLoaded.
| | 01:31 | DOMContentLoaded will fire when
the DOM is ready and accessible.
| | 01:37 | There's also other methods that you can look
for when images are loaded, but we don't need
| | 01:42 | to worry about any of that right now. We just
want to begin accessing the page as soon
| | 01:46 | as the DOM is ready.
| | 01:48 | So we're going to look for a
DOMContentLoaded on the document and we're going to create
| | 01:51 | a custom function that I'm calling initialize.
| | 01:57 | We also need to set up some variables, so
that we can configure the size of the canvas.
| | 02:05 | So we're going to declare a variable for canvas,
ctx to get the canvas's 2D context, and I'm
| | 02:11 | going to be using a 1366x768 as the default
screen size for our game. So you can see I've
| | 02:19 | setup screen width, screen height, full screen
width as well as a balloon width and height
| | 02:25 | for balloons we'll be rendering to the screen.
| | 02:27 | We also have variables for the MAX_X
position and the MAX_Y position.
| | 02:33 | These will be the max that we want to draw
balloon on our screen on both the X and the Y axis.
| | 02:39 | Let go ahead and copy that new initialize
method and we're going to put that down right
| | 02:48 | before app.onactivated.
| | 02:51 | So just like our previous example of canvas,
we're going to do the same getElementById
| | 02:56 | canvas, we're going to get its 2D context.
| | 03:00 | And now I am setting the full screen
width to the windows inner width.
| | 03:04 | And then what I'm going to do is set the canvas
width and height to that inner width and height.
| | 03:10 | This will allow our canvas to grow to the
exact screen size on whatever device we're running on.
| | 03:16 | So if I'm on 1920x1080, the canvas will
run at 1920x1080; the same for 1366x768.
| | 03:25 | Our coordinate system will dynamically
adjust based on the current screen size.
| | 03:31 | Now we will also set the
boundaries of those X and Y coordinates.
| | 03:35 | So what I'm going to do is get the width of
the canvas and subtract one balloon width,
| | 03:41 | and I'm going to get the height of the
canvas and subtract one balloon height.
| | 03:46 | This will make sure that we're drawling the
balloons one width or one height to the edge.
| | 03:51 | Now to make sure we can actually render something
to the canvas, let's go ahead in our initialize
| | 04:00 | method and draw a green circle. We're going
to run this, and as you can see, we have all
| | 04:07 | of our player elements laid out on screen.
We have a full-size canvas and just to make
| | 04:11 | sure that's happening, if we go back in here
to the DOM Explorer, we click Select Element,
| | 04:17 | you'll notice I have a full screen canvas.
It's running at 1360x768 and my canvas is
| | 04:24 | in fact rendering, so I'm
drawing a green circle.
| | 04:27 | Congratulations! You now have a
rendering surface in your game.
| | Collapse this transcript |
|
|
4. The Game EngineSetting up the balloons| 00:00 | Now that we have our canvas setup to render
objects to the screen, let's make something
| | 00:05 | a little more interesting than a green circle.
| | 00:07 | What we're going to do is we're going to move
over to default.js and let's get rid of our
| | 00:15 | canvas test that we had for this circle.
| | 00:19 | And we are going to add a new JS file where
we'll create our balloons, so let's click
| | 00:26 | on JS and say Add > New Item > JavaScript
File. We're going to call this balloons.js.
| | 00:41 | Now the first thing you're going to want to
do when you create a new file like this is
| | 00:44 | you're going to want to reference it
right away, so you don't forget to do that.
| | 00:48 | All references are found in default.html, so
let's go ahead and click on default.html.
| | 00:55 | We're going to drag balloons.js over here
right after default.js and we're going to
| | 01:00 | add a forward slash to the path.
| | 01:02 | This will allow all the functions within
balloons.js to be included in default.js.
| | 01:08 | Visual Studio also allows us to get
IntelliSense from .js files if we drag them to the top
| | 01:15 | inside of the JavaScript.
| | 01:17 | So let's go ahead and open up default.js,
let's go to the top, and we'll drag balloons here.
| | 01:23 | You notice now that up in the comments there
is a reference path="balloons.js." This will
| | 01:29 | allow us to get full IntelliSense for everything
in our balloons.js file. Let's jump over to
| | 01:36 | balloons.js and see what we've added.
| | 01:39 | We've created a function called balloon and
balloon takes a MAX_X and Y. If you recall,
| | 01:45 | this is the max position in the X coordinate,
and the max position in the Y coordinate will
| | 01:51 | be allowed to draw to the screen.
| | 01:54 | We're also going to increase the speed of the
balloons over time. So we've got two variables
| | 01:58 | for that with MIN_ACCEL and MAX_ACCEL.
| | 02:01 | Everytime we reach a new level, we're also
going to multiply that speed; the default is
| | 02:06 | 10%, so the variable for
that is level multiply.
| | 02:10 | We're going to set an X and Y coordinate of
where we want to draw this on the screen randomly.
| | 02:16 | This will allow balloons to start
at different places on our screen.
| | 02:19 | Then we're going to take a random speed based on
the min acceleration and the max acceleration,
| | 02:25 | and then we're also going to have an extra
bit of speed where we're going to multiply
| | 02:29 | that by the level multiply.
| | 02:31 | The acceleration will be equal to the
speed plus that extra bit of acceleration.
| | 02:36 | Every balloon we're going to draw to the
screen will have its own image, so what we need to
| | 02:40 | do here is we need to set up a new image with its
source, and this is going to call into randomImg.
| | 02:47 | RandomImg is a function down here that you
can see is just an array with balloons I've
| | 02:53 | already previously created. So we've got black,
blue, green, orange, purple and red balloons.
| | 03:00 | When we call into randomImg, it will pick one of
these balloons and return them as the source
| | 03:06 | of the image for that balloon.
| | 03:07 | We're also going to setup a parameter to know
if our balloon has been destroyed or not on
| | 03:12 | screen. So we've got destroyed equals false,
and then have we've rendered that balloon
| | 03:16 | yet to be destroyed? That's
where you see destroyedRendered.
| | 03:19 | The height and width of the
balloon are set to 200x327.
| | 03:25 | These are just the pixels that I've used to
create my own artwork. If you want to replace
| | 03:29 | this with your artwork, you would put the
height and width of those images here. Let's
| | 03:34 | go ahead and add those images right now.
| | 03:38 | So we're going to add on the images folder
and say Existing Item. We're going to go over
| | 03:44 | to our Exercise Files > Chapter 4 and we're
going to add all of those balloons here.
| | 03:55 | You'll see now we have the black, blue, green,
orange, purple and red balloons all setup
| | 04:00 | in our local images folder.
| | 04:02 | If you mouse over any of these images, you'll
also see a preview image of what that will look like.
| | 04:10 | After we've created the balloons function, we
now need to reference that in default.js.
| | 04:15 | So we're going to set up a bunch of
variables we'll be using in our game.
| | 04:19 | Let's move over to default.js and
add those to the top of the function.
| | 04:27 | The first variable specified what
we saw in our balloons.js class.
| | 04:32 | So the slowest speed of the balloons
will go to 7 and the fastest is 17.
| | 04:36 | The maximum amount of balloons we want on the
screen at one time will be 6, and the scale
| | 04:41 | of the balloons will be three. We also have
how many points balloons will be given to
| | 04:47 | our score when we click on them.
| | 04:49 | Notice all of these variables are set up so
that you can adjust them to your own liking
| | 04:53 | in the game.
| | 04:54 | If you wanted to have a different kind of
scale or more balloons on the screen you can
| | 04:57 | do that as well.
| | 04:58 | To know how many frames will render during
our animation for destroying the balloons,
| | 05:03 | how many points are required for each new
level, as well as the current level points,
| | 05:08 | and the difficulty, we have setup
level and animation variables.
| | 05:12 | We've also setup an initial score to be 0;
we'll be using these variables throughout our game.
| | 05:18 | Now we need to add an array to hold all of
those balloons. So you see here I have var
| | 05:28 | balloons = new Array here, which will be set
to the maximum amount of balloons that we
| | 05:32 | want on the screen.
| | 05:33 | Now we need to go ahead and fill those balloons,
which we'll do in our initialize function.
| | 05:41 | We're going to call that initBalloons and
we're going to implement initBalloons at the
| | 05:48 | bottom of the file right
before app.onactivated.
| | 05:50 | So you see initBalloons is a simple function
that will create two variables, a random number,
| | 05:58 | and a balloon. We're going to move from 0
to the maximum amount of balloons and then
| | 06:03 | we're going to create a balloon.
| | 06:05 | Then we're going to assign into that array
the balloons that we created. Let's go ahead
| | 06:10 | and implement createBalloon.
| | 06:14 | CreateBalloon will look for a random number
range from the minimum balloon scale with
| | 06:21 | 10 times, .10, then we're going to create a
random balloon; this will be a new balloon.
| | 06:27 | Now remember balloon is the function we've
added to balloon.js. We're also going to set
| | 06:32 | the width and height to be the balloon
width and height times that random number.
| | 06:38 | This is actually going to stretch and scale
up balloons, so we will have small balloons,
| | 06:44 | we'll have large balloons, we'll have medium-
size balloons all using our same artwork and it
| | 06:49 | will make us have some great variety in our
game as we render balloons to the screen.
| | 06:54 | The last piece that we need to do is
actually draw these balloons onto the canvas.
| | 07:00 | So on the img.onload event we're going to
add a function to call into the context of
| | 07:05 | canvas, draw the image so that random balloon
will have its image, it'll have an X and Y
| | 07:11 | location and it'll have a width and a height.
| | 07:14 | Remember, that the balloon width and height
have a random number range based on the scale
| | 07:19 | that we've assigned here; you are calling
into the random number range function.
| | 07:23 | The last piece we need to do is add
this random number range function.
| | 07:28 | If you go over to JS and you do Add >
Existing Item, I've included a utils.js file.
| | 07:38 | If we go into utils.js file, you'll see there
are a bunch of functions for handling random
| | 07:43 | numbers. So we have ones for ranges and
we also have ones for background images.
| | 07:48 | We'll be using these functions throughout
our game. Random number range, which you can
| | 07:52 | see right here, is the one that we
use to return the random scale.
| | 07:56 | Now before we run this, remember any JS file
that we add we need to reference in default.html.
| | 08:02 | We're going to come over here to default.html,
we're going to drag over utils.js. I'll add
| | 08:09 | a forward slash and just so that we get IntelliSense,
I want to come over here to default.js, scroll
| | 08:17 | up and drag utils up here as well.
| | 08:20 | Let's save this and run our game.
| | 08:24 | You'll notice now that I have
several balloons on the screen.
| | 08:27 | These balloons are of different sizes and
of different colors; a lot more interesting
| | 08:31 | than a green circle.
| | 08:32 | Let's go ahead and stop this and run it again,
| | 08:37 | and you'll notice now I have a completely
different amount of balloons, different sizes
| | 08:42 | and different colors.
| | 08:43 | Congratulations! You now have generated a
game that is putting different balloon sizes
| | 08:47 | and colors on the screen each time it loads.
| | Collapse this transcript |
| Exploring the game loop| 00:00 | Now that we're rendering balloons to our game
screen, we're going to introduce a concept
| | 00:04 | called the game loop.
| | 00:06 | All games basically do three things when
they're rendering content to the screen.
| | 00:10 | They will load the content when they start,
then will apply updates to the game world,
| | 00:14 | and then they'll render and draw
that game world to the screen.
| | 00:17 | Efficient code here is really
important to your game's performance.
| | 00:21 | So we want to make sure we're
unloading resources if we're not using them.
| | 00:24 | And we also want to make sure we're only turning on
sensors like the accelerometer when we need them.
| | 00:29 | So a game loop looks a lot like this.
| | 00:32 | We're going to initialize and load some content
and then we're going to go into what's called
| | 00:36 | an update draw loop.
| | 00:38 | Update will take all changes that are happening
to those objects on the screen and then we'll
| | 00:42 | go ahead and draw and
render a frame to the screen.
| | 00:45 | At the end, we'll unload that content.
| | 00:47 | If you have done any kind of game development
on the web, you maybe familiar with something
| | 00:51 | called setInterval.
| | 00:52 | In this example, I have an initialize
function where I call setInterval and I tell it my
| | 00:57 | game loop will be called
gameLoop and then I do some math.
| | 01:00 | So frames per second, if I want 30 frames
per second, I'm dividing 1000 because this
| | 01:05 | is in milliseconds by 30 and then
gameLoop will update and draw.
| | 01:10 | It will continue to update
and draw throughout my game.
| | 01:13 | Windows 8 is built on a
bunch of HTML5 features.
| | 01:16 | One of those features is
called RequestAnimationFrame.
| | 01:19 | RequestAnimationFrame will allow you to
render objects to the screen across the GPU.
| | 01:25 | So this is fully hardware accelerated.
| | 01:27 | The way that we declare this is to do a
function update, I'm creating anim, my variable for
| | 01:32 | handling the RequestAnimationFrame, and I'm
calling into window.msRequestAnimationFrame
| | 01:39 | with update as the parameter.
| | 01:40 | Note for our game, we won't have to add the
ms prefix because RequestAnimationFrame has
| | 01:46 | now become a standard.
| | 01:49 | If you're using old code on the web, you may
want to keep in msRequestAnimationFrame as
| | 01:54 | well as other browser prefixes.
| | 01:56 | But because we're coding for Windows, we can
be assured that we have the latest copy of
| | 02:00 | IE and we only need to do
RequestAnimationFrame.
| | 02:03 | Then we're checking to
see if we have the menu.
| | 02:06 | If we do, we draw the menu,
else we update draw.
| | 02:09 | This is the actual game loop
that we'll be using in our game.
| | 02:12 | So let's go over to our game and we're going
to add a new handler, so the anim handler
| | 02:18 | for default.js.
| | 02:22 | We'll put this at the top, and then we're going to
add the update function inside of our initialize method.
| | 02:31 | Now we need to implement that method. We are
going to put that before app.onactivated.
| | 02:38 | You'll see we're calling in to function update and
now for anim, we're doing window.RequestAnimationFrame,
| | 02:44 | removing the ms prefix.
| | 02:47 | This is going to give us very fast
performance running against the GPU.
| | 02:51 | Our update and draw methods will be
called updateBalloons and drawBalloons.
| | 02:55 | Let's go ahead and implement them now.
| | 03:01 | So I now have a function for
update and a function for draw.
| | 03:05 | Because I'm not feeling out updateBalloons
or drawBalloons, when we run this, we now
| | 03:09 | have a running game loop.
| | 03:10 | Let's go ahead and look at
implementing that with some changes.
| | Collapse this transcript |
| Updating and rendering| 00:00 | Let's drill into default.js, and if you recall,
we now have all of the level variables set
| | 00:07 | up here as well as the animation
variables and our balloons variable.
| | 00:11 | We need to go ahead and implement the
updateBalloons and drawBalloons functions.
| | 00:17 | Let's implement updateBalloons first.
| | 00:20 | We're going to put that before app.onactivated,
and inside of updateBalloons we're going
| | 00:27 | to take a variable called balloon, we're going
to move through the balloons array, so these
| | 00:32 | are all our existing balloons
that we render to the screen.
| | 00:36 | And we're going to see if the balloon's Y
coordinates are less than or greater than
| | 00:42 | the BALLOON_HEIGHT. Then we're going to see if
the Y coordinate is equal to the SCREEN_HEIGHT
| | 00:48 | and then we're going to look and assign
the X coordinate to a random variable.
| | 00:53 | What this will do is once the balloon has
passed through the top of our screen, we'll
| | 00:56 | go ahead and we'll create a new
balloon at a random position.
| | 01:00 | So we'll assign that new balloon to the array,
otherwise we'll continue to animate and change
| | 01:05 | that Y direction.
| | 01:07 | So what's happening here over time, is we are
updating the balloon coordinates each frame.
| | 01:12 | When we render those frames to screen over time,
it'll appear that the balloons are animating
| | 01:17 | up from the bottom to the top.
| | 01:18 | When they go pass the top, they'll be
rendered somewhere on screen near the bottom.
| | 01:23 | Let's go ahead and implement
the drawBalloons method now.
| | 01:28 | DrawBalloons will declare
a variable for balloon.
| | 01:30 | We're going to clear the canvas context full
screen, so we're going to start at the top-left
| | 01:36 | corner with 0, 0 and we're going to clear it
to the full SCREEN_WIDTH, an SCREEN_HEIGHT.
| | 01:41 | Remember, we're setting screen width and
height at runtime, so we'll always be the size of
| | 01:46 | the current device that
the game is running on.
| | 01:49 | Then we're going to loop through the
balloon's array and we're going to draw an image to
| | 01:53 | the canvas context.
| | 01:55 | That image will be the current balloon's image
at the X and Y coordinates and with the scale
| | 02:00 | of width and height.
| | 02:02 | If a balloon has been assigned destroyed,
we're going to call in and blow up that balloon
| | 02:08 | through a blowup animation.
| | 02:09 | Let's go ahead and implement
that blowup animation function.
| | 02:16 | Blowup animation will take a balloon that
has been assigned to be destroyed, and if
| | 02:20 | the destroyed render frames have not been
completed yet, if you remember the default
| | 02:25 | is we want to render this for 15 frames.
| | 02:26 | If that has been completed, we'll create a
new balloon, otherwise we'll increase the
| | 02:32 | counter of how many times
we've rendered those frames.
| | 02:35 | Let's go ahead and run our
game and now we have balloons.
| | 02:41 | How exciting! We've got balloons of all different
colors and all different sizes that are animating
| | 02:45 | from the bottom of the
screen to the top of the screen.
| | 02:48 | When a balloon passes the top of the screen,
a new balloon will be created at different
| | 02:52 | speeds and different scales.
| | Collapse this transcript |
| Adding a game menu| 00:00 | Now that our game is rendering balloons to
a screen, why don't we go ahead and add a
| | 00:04 | menu to our game.
| | 00:05 | This will enable us to pause gameplay and
let us switch between both game modes and menu modes.
| | 00:10 | We are going to start off by clicking into
default.js, and we are going to add some variables
| | 00:17 | for the menu.
| | 00:20 | So right after the animation handler, we're
going to put in two new variables: the background
| | 00:29 | for the menu and the MENUNUM.
| | 00:32 | MENUNUM will be used for a function
that will give us a random background.
| | 00:36 | We are also going to have a variable that
will keep track of whether the user has enabled
| | 00:41 | the menu or not.
| | 00:42 | Let's add this image
right now before we forget.
| | 00:44 | We are going to images > Add > Existing Item,
go to my Desktop > Exercise Files > Chapter
| | 00:52 | 04, and there is background_1.
| | 00:57 | Now we need to add the div for the menu.
| | 01:00 | We're going to do that inside of default.html,
and we are going to add it right here before the canvas.
| | 01:09 | So a standard div tag, I am calling divMenu
and inside of that div, I've got two images:
| | 01:15 | an image for the menu, and a
button to start the game.
| | 01:19 | Let's go ahead and add both
of those images right now.
| | 01:24 | You'll see I've got a
balloonsTitle logo and a nice Start button.
| | 01:29 | You can multiple select files and click Add
and both of those files have now been added.
| | 01:34 | We need to assign some
styling to those images.
| | 01:38 | So let's go into our CSS folder into
balloons.css and scroll down to the bottom.
| | 01:44 | We'll assign the CSS styles to
the IDs that we've created.
| | 01:52 | So we're going to tell the image for menu
to be absolutely positioned in the center
| | 01:57 | of the screen, and then the btnStart, we're
going to position that in the center of the
| | 02:01 | screen as well.
| | 02:02 | Now programmatically, we'll figure out where
that center is. As of right now, we're just
| | 02:06 | assigning a margin of 120 pixels to the
top and telling the z-index to be a 100.
| | 02:12 | The z-index will make sure that we render
both the image for the menu and the btnStart
| | 02:17 | on top of our current canvas.
| | 02:21 | Now we need to add an option to show our menu.
| | 02:23 | We are going to do this before the update
method inside initialize in default.js.
| | 02:34 | Let's go ahead and implement showMenu.
| | 02:40 | We are going to put that before app.onactivated,
and what we're doing inside of showMenu is
| | 02:48 | we are calling into menuEnabled and making
sure that that's set to true, and then we are
| | 02:53 | setting a bunch of CSS styles.
| | 02:55 | So we're hiding some of the UI elements and
then we're enabling the UI elements for menu and start.
| | 03:01 | Then we're going to figure out where to
center the title and the start button.
| | 03:05 | So the menu's X position will be equal to
the SCREEN_WIDTH, remember SCREEN_WIDTH is
| | 03:10 | always assigned to the current size of the
screen the game is being run on, and we'll
| | 03:14 | subtract the menu's width.
| | 03:16 | We'll divide that by two to get the center.
| | 03:18 | We'll do the same to build the X and Y
coordinates for the button, and then we'll position the
| | 03:24 | left and top styles of those
images to those coordinates.
| | 03:29 | Then we'll call into the canvas context.
| | 03:31 | So we'll go ahead and clear it starting at 0,
0, which is the top-left to the screen's
| | 03:36 | width and height.
| | 03:37 | Lastly, we'll go ahead and set the document
body to the background assigned in the variable MENUBG.
| | 03:44 | Now we need to update the update method,
so that we're doing a check for our menu.
| | 03:55 | Now when update is called, if the menu is not
enabled, it will update and draw the balloons.
| | 04:01 | If the menu is enabled, it will not
render anything additional to the screen.
| | 04:05 | Let's go ahead and save this and run.
| | 04:08 | You'll notice now we have balloons that
are randomly generated on the screen.
| | 04:13 | This is a cool way to add some extra emphasis of
having random balloons each time I run my game.
| | 04:20 | Rather than seeing the same start screen,
I'm going to see balloons all over the place
| | 04:23 | of different scales.
| | 04:25 | If we come back up here and we run
it again, you'll see the same thing.
| | 04:30 | I've got balloons that are
unique to each time I run the game.
| | 04:34 | Now if I click on the Start button,
you'll notice the game isn't moving.
| | 04:38 | We are stuck into Menu mode.
| | 04:40 | So let's go ahead and add an event that allows
us to click the Start button, start the game,
| | 04:45 | and then play.
| | 04:51 | If we go into our initialize method, we're
going to do an event handler just like we
| | 04:56 | would on the web.
| | 04:58 | So in the document, I'm going to look for my
Start button and I'm going to add an EventListener
| | 05:03 | for MSPointerUp.
| | 05:05 | Don't worry too much about this now.
| | 05:07 | We'll cover it in our Touch chapter.
| | 05:09 | But for now we're going to start our
game when we click on the button.
| | 05:12 | Let's implement that startGame.
| | 05:17 | I am going to put this before
the app.onactivated method.
| | 05:23 | StartGame will take the event and it will
enable the UI elements associated with the
| | 05:27 | game to be visible and hide the Image
menu and button start from our menu.
| | 05:32 | We're also going to center the level now.
| | 05:36 | So the level at the top will be based on the
current SCREEN_WIDTH minus the text level,
| | 05:42 | and then we're going to
position that to the left.
| | 05:44 | We'll clear our canvas and then
set the menuEnabled to be false.
| | 05:49 | At this point, the game loop
we've created will kick in.
| | 05:53 | So we'll go into our update and
draw and gameplay will begin.
| | 05:57 | Let's run this.
| | 05:58 | I have balloons.
| | 06:00 | I'm going to click that Start button and now
my balloons are animating successfully across
| | 06:05 | the screen, and you'll notice also that
level is centered perfectly in the screen.
| | Collapse this transcript |
|
|
5. Screen Size SupportSupporting multiple screen sizes| 00:00 | Windows Store apps run on a variety of
devices of all different screen sizes.
| | 00:05 | So for our game, we might be
running on something like this.
| | 00:09 | We have the lowest common resolution, which
is 1024x768, 1366x768 for something like a
| | 00:17 | Microsoft Surface, and this is also the
default scale that we've been coding our game for,
| | 00:23 | or maybe an all-in-one with a
super high resolution of 2560x1440.
| | 00:29 | We do this through scaling.
| | 00:32 | The first piece is the Viewbox control
that we used to scale up our canvas.
| | 00:37 | We can also use CSS3 scalar transforms to
scale up or down our individual objects inside
| | 00:43 | of our game.
| | 00:45 | We can test using the Visual Studio simulator.
| | 00:49 | The Visual Studio simulator like we showed
previously, supports all different sizes of screens.
| | 00:55 | There is also system-level
scaling that will go on for our game.
| | 00:59 | So if we're using SVG that will automatically
scale up and then Windows will scale up stuff
| | 01:04 | for us based on the inherent DPI of the screen;
100%, 140% and 180% are the scale ratios.
| | 01:14 | We've seen this previously inside of the
app manifest when we looked at the images.
| | 01:20 | Inside of Windows Store apps there are three
view states that we need to be concerned about.
| | 01:25 | The first of these is snapped. Snapped is
when you're running two Windows Store apps
| | 01:30 | side-by-side.
| | 01:31 | The app on the left, our game, is 320 pixels
wide; 320 pixels wide is always the width
| | 01:39 | of a snapped app.
| | 01:41 | Over on the right the Windows
Store app is now in filled mode.
| | 01:45 | Full will always use the entire screen.
| | 01:49 | It's important to note that snapped and filled
running two side-by-side Windows Store apps
| | 01:54 | will only work on
resolutions higher than 1366x768.
| | 02:00 | Lucky for us, we can use responsive web
design just like we do on the web today to handle
| | 02:06 | all sorts of different screen sizes.
| | 02:09 | Using CSS3 media queries, we
can look for the snapped state.
| | 02:13 | So in this example, if my app is snapped, I
am going to do some scalar transforms for
| | 02:19 | the image menu and my button. I'm going to
scale them down by 50% for the menu and 60%
| | 02:27 | for the button.
| | 02:28 | We also need to respond to changes
when the user is docking our app.
| | 02:34 | This is done through
something called view state.
| | 02:38 | Inside of Windows.UI.ViewManagement we're
going to be able to get different events that
| | 02:42 | will respond to the different states
of the app; snapped, filled, and full.
| | Collapse this transcript |
| Supporting snapped, filled, and full-screen modes| 00:00 | So I've just shown you the three default view
states for Windows Store app: snapped, filled and full.
| | 00:07 | If we don't support this in our Windows Store
game, users will get a very bad experience
| | 00:11 | when they are docking our app.
| | 00:13 | Let me go ahead show you what that
default experience would be looking like.
| | 00:21 | If I grab the top of the app and I drag it
over here to the left and dock it, you'll
| | 00:25 | notice the background becomes tiled and the
balloons are only being rendered in the center
| | 00:31 | of the screen.
| | 00:32 | Let's go ahead and close this and start
implementing those three view states.
| | 00:37 | So the first thing we want
to handle is the background.
| | 00:41 | Let's go into default.css and you'll notice
right now the background-size is set to 100%.
| | 00:48 | We're going to use the same cover CSS attribute
that we used previously for our image player.
| | 00:55 | This will force the background to
scale to the size of the current screen.
| | 01:01 | Let's save that, and next let's go ahead and
add a variable for how wide the snapped state will be.
| | 01:11 | I'm going to do that in default.js.
| | 01:19 | I want to create a variable called
SNAPPED_VIEW and it will be 320 pixels.
| | 01:25 | Next, we need to listen for any
kind of resizing inside of our app.
| | 01:32 | Let's add this with our previous event handler
and this event handler is being added to window
| | 01:42 | instead of document.
| | 01:44 | This means any resizing that happens at the app
level will go ahead and call into a function
| | 01:50 | we'll create called onViewStateChanged.
| | 01:53 | What's great about this is we'll reset all of
the coordinate systems for our app anytime we're docked.
| | 02:02 | Let's go ahead and
implement onViewStateChanged.
| | 02:07 | I am going to put that right before app.onactivated,
and what's happening here is onViewStateChanged
| | 02:18 | is going to call into Windows.UI.ViewManagement.
ApplicationViewState, and we're going to check and see if we're
| | 02:27 | in the snapped, filled or full.
| | 02:30 | If we are, we are going to handle that in
this showMenu function that we've previously created.
| | 02:41 | So what I'm doing here is I'm detecting the
view state, so when I come in, if my event
| | 02:46 | is equal to snapped, I'm going to set the
canvas.width to that new SNAPPED_VIEW that
| | 02:51 | we've setup to be 320 pixels.
| | 02:54 | If I'm in the Filled mode, I'm going to go
ahead and set the canvas.width equal to the
| | 02:59 | FULLSCREEN_WIDTH minus that SNAPPED_MODE.
| | 03:03 | Else we'll go right into FULLSCREEN mode.
| | 03:10 | We'll also need to readjust our coordinates
for our canvas. So what you can see here is
| | 03:15 | the height of the canvas is being set to the
window.innerHeight, and the screen width and
| | 03:21 | height are being set to that
new canvas width and height.
| | 03:26 | We also need to come up with the MAX_X and MAX_Y
coordinates, so that we know the boundaries
| | 03:31 | of the screen when we're
rendering the balloons.
| | 03:34 | Let's go ahead and save this.
| | 03:39 | Let's go ahead and run it, and you'll notice
when I pick this up and dock it, I'm immediately
| | 03:49 | pausing my game, and when I click Play you'll
notice now that the background looks good
| | 03:55 | and all of the balloons are going across.
| | 03:58 | However, the top score, level and player are
quite large. We need to adjust that based
| | 04:04 | on our current view state.
| | 04:06 | Let's go ahead and close this.
| | 04:08 | Now we're going to add CSS3
media queries to default.css.
| | 04:13 | So in default.css you can see currently
we're not doing anything for the snapped mode.
| | 04:19 | Let's replace that with something more custom.
| | 04:26 | So now when my screen hits the snapped mode,
I'm going to make imgMenu 50% its current
| | 04:34 | scale, btnStart 60% of its current scale, and
I'm going to hide imgPlayer by setting the
| | 04:41 | opacity to 0.
| | 04:43 | ImgPlayer is currently too big for a 320
pixel sized screen and if we scaled it down too
| | 04:50 | small, our game players wouldn't be
able to see anything of importance.
| | 04:54 | So let's just drop that off
and keep only the player name.
| | 04:58 | Then we're going to move the text for the
level over a bit and scale it down to 30%
| | 05:03 | of its size.
| | 05:04 | Lastly, we'll move over the txtPlayerName,
set it at only 30% of its size and then set
| | 05:11 | the txtScore for only 30% of its size.
| | 05:14 | Let's run that see what its looks like.
| | 05:20 | I'm going to move my game over, dock it, and
you'll notice now balloons in the start button
| | 05:27 | instead of being super big like they were
before have been scaled down so that they
| | 05:31 | look perfect in the center.
| | 05:33 | And when I play, I have my level, my score
and my player which are now aligned nicely.
| | 05:40 | That's all we need to do for view states,
thanks to the power of CSS3 media queries.
| | Collapse this transcript |
|
|
6. Touch SupportWorking with touch APIs| 00:00 | For the first time ever when I am writing
a Windows app, I may not have a mouse and keyboard.
| | 00:05 | Windows 8 is a touch-first OS.
| | 00:07 | What that means is, when you're creating
elements on your screen, you need to think about users
| | 00:13 | that are using a device, for
example, like a Microsoft Surface.
| | 00:17 | If I move over here to the Start menu,
notice because I'm using a mouse I get a dragable
| | 00:24 | wheel at the bottom.
| | 00:27 | If we open up our game and load the simulator,
I can switch between having a touch mouse
| | 00:36 | cursor that you can see on the screen over
here, and a full touch mode which looks like
| | 00:41 | a circle for a finger.
| | 00:43 | My app needs to support both of these.
| | 00:46 | Lucky for us, Microsoft has created
a unified API called MSPointer.
| | 00:51 | MSPointer will handle touch, mouse and
pen using just a single pointer API.
| | 00:56 | In fact, this has been submitted to the W3C
and there is a working group that you can
| | 01:02 | visit at the URL.
| | 01:03 | Basic DOM events are set up for all
kinds of mouse, touch, and pen interaction.
| | 01:09 | So if I touch the screen with my finger and
release it, that's an MSPointer up, just like
| | 01:15 | as if I had touched my mouse button,
clicked down, and let go of the mouse button.
| | 01:19 | There is no difference from the API stand
point for using the mouse or using the finger.
| | 01:25 | What this means for us in our game is regardless of
whether somebody is using a mouse, touch,
| | 01:30 | or a pen, we're going to be able to get the
position, the pointer type and the specific
| | 01:34 | ID for that.
| | Collapse this transcript |
| Adding touch to your game| 00:00 | I have just told you about the MSPointer API
and how we can handle pen, mouse, and touch
| | 00:06 | using a single API.
| | 00:07 | Let's go ahead and add that to our game.
| | 00:10 | The first thing we're going to want to do is
handle touch events on top of the canvas.
| | 00:15 | So let's open default.js.
| | 00:19 | We will scroll down to where other event
handlers currently are, and instead of listening for
| | 00:25 | a document, we're going to
listen on the canvas itself.
| | 00:29 | Any kind of element on the screen that you
want to add a listener to for touch, you simply define here.
| | 00:35 | So for example, I could listen to a specific
area of the screen differently than the entire screen.
| | 00:40 | For our game, we're going to handle
touch across the entire rendering surface.
| | 00:45 | So I'm saying canvas addEventListener("MSPointerUp",
which will happen if I lift my finger off
| | 00:50 | the screen after touching it, or I lift my
finger off of the mouse button after touching
| | 00:55 | it, and we're going to create a
function for that, we call touchHandler.
| | 01:03 | We are going to add a touchHandler at the
bottom before app.onactivated, and let's take
| | 01:11 | a look at how we do that.
| | 01:12 | TouchHandler will get a single event.
| | 01:14 | If the menu is not enabled,
then we want to handle touch.
| | 01:18 | If the menu is enabled, we'll be ignoring
touch and only looking for touch when the
| | 01:23 | person clicks the Start
menu to begin the game.
| | 01:25 | We are going to create a for loop and we are
going to loop through the maximum amount of balloons,
| | 01:30 | and for each balloon we are going to check
at the current X and Y coordinate of that
| | 01:34 | balloon, and then event.x and event.y.
| | 01:37 | Remember event will give us both, the X and Y
coordinate, as well as the Touch type, then
| | 01:43 | we're going to look at the balloons array
and if it's been hit, we're going to destroy that balloon.
| | 01:48 | Let's go ahead and implement balloonHit.
| | 01:50 | BalloonHit will get the maxX and maxY, which
will be equal to the X and Y coordinate of
| | 01:57 | the balloon that was sent in
plus one width and one height.
| | 02:01 | If that X coordinate is more than the balloonX
and less than or equal to the maxX-Y, and it's
| | 02:08 | greater than or equal to the balloonX and
less than the maxY, we're going to say it's hit.
| | 02:13 | This is something called boxing.
| | 02:14 | We're basically creating an area around that
balloon and as long as we hit somewhere within
| | 02:19 | that area, we're going to say
that we've hit the balloon.
| | 02:23 | If we're not within that bounds,
we're going to return false.
| | 02:26 | Let's go ahead and do the
destroyBalloon function now.
| | 02:30 | DestroyBalloon will take a balloon as a parameter,
and we are going to set up a new image for the explosion.
| | 02:36 | So we have var explosion and on the load event
for explosion, we're going to draw that image
| | 02:42 | to the canvas.
| | 02:43 | So we're going to draw that image at the exact
X and Y coordinates that balloon was at, and
| | 02:49 | since we saved the scale of that balloon in
its width and the height properties, we can
| | 02:55 | also draw an explosion to that
same scale at that same position.
| | 02:59 | We are going to set the source of the explosion
equal to an image I have created here called
| | 03:04 | explosion, and then I'm going to
set the balloon true for destroyed.
| | 03:09 | Lastly, we'll return that balloon.
| | 03:11 | Remember, I've showed you previously in our
update draw loop, if a balloon is destroyed,
| | 03:16 | we simply flag it and the rest of the
functions handle removing that balloon and creating
| | 03:21 | a new one.
| | 03:22 | Let's add this explosion image now.
| | 03:28 | I'm going add a breakpoint to our touch points
just so that we can see what that event looks like.
| | 03:34 | So we'll add that right down here.
| | 03:38 | I'm going to run this.
| | 03:39 | We'll start the game and I'll
hit one of these balloons.
| | 03:45 | Let's add the watch for balloon.
| | 03:49 | You notice I have the X and Y
coordinates of the balloon.
| | 03:52 | I also have the width and the height, as well as
its image, and you can see it's not destroyed
| | 03:57 | at this point, and it's not been rendered any
of those 15 frames for when we've destroyed it.
| | 04:03 | It also has an acceleration of 11.
| | 04:06 | If I look into the event, you'll see the type
is MSPointerUp and the MSPOINTER_TYPES for
| | 04:19 | mouse, pen, and touch are 4, 3 and 2.
| | 04:24 | The pointerType for this is a 4.
| | 04:27 | So we know that this came from a mouse.
| | 04:29 | We also have the screenX and the screenY
events and our x and y events down here where we
| | 04:36 | know we've hit at 773 and 401.
| | 04:39 | If we stepped through and over, we'll see
now that we're going to blow up that same
| | 04:48 | balloon and assign a new image. That balloon
X and Y are at 282 and 664 and its scale is
| | 04:57 | 367 and 200, and then we are going to
flag that balloon to be destroyed.
| | 05:03 | Let's go ahead and continue, and now when I
pop these balloons, you notice I get a nice,
| | 05:08 | cool little explosion, that's rendered for 15
frames, and is at the proper scale for that balloon.
| | 05:16 | Congratulations! Your game
is now popping balloons.
| | Collapse this transcript |
|
|
7. Music and SoundPlaying music with HTML5 audio tags| 00:00 | Our game is now rendering balloons to the
screen and we can happily pop those balloons
| | 00:04 | and watch them explode.
| | 00:06 | Let's spice it up a little
bit and add a musical track.
| | 00:09 | If you have worked on the web with HTML5 audio
tags before, that's exactly what we're going
| | 00:13 | to be adding here.
| | 00:15 | So let's go ahead and declare an HTML5
audio tag by adding that to the default.js.
| | 00:24 | We are going to add that right
before the initialize method.
| | 00:28 | So if we were doing this on the HTML side,
we would've declared an audio tag element,
| | 00:34 | the same is true for JavaScript.
| | 00:36 | So we're going to create a new variable
called musicGame, and we are going to create a new
| | 00:40 | audio tag to play the theme.wav
file from the sounds folder.
| | 00:44 | Then we are going to set
the musicGame to loop.
| | 00:47 | This will mean when we're playing the game,
the music will continuously loop as we blow
| | 00:51 | up different balloons.
| | 00:53 | Let's go ahead and create that sounds folder.
| | 00:54 | We are going to right-click on the project
and say Add > New Folder > sounds, and then
| | 01:02 | we're going to add an
existing item, called theme.wav.
| | 01:09 | Now that we've got the theme.wav added and
we're assigning it musicGame, we need to play
| | 01:14 | and pause it at the appropriate times.
| | 01:18 | Inside of our Showmenu event, after we set
menuEnabled=true, before any of our UI elements,
| | 01:28 | I want to pause the music,
so I have musicGame.pause().
| | 01:32 | Next let's look for the startGame function
we've created, and we will play the music.
| | 01:41 | Let's Save and Run.
| | 01:44 | Now when I hit the Start button,
music will begin to play.
| | 01:49 | (music playing)
| | 01:51 | If I move my app over to the left and dock
it, notice the music stops. This is tying
| | 01:57 | in our Showmenu in our startGame functions.
| | 02:00 | Music will only play when we are in Game mode
and music will stop when we are in Menu mode.
| | 02:05 | If I hit Play, the music will pick up
where it was paused and continue to play.
| | 02:12 | If I move this over again, we'll hit the Menu,
we will pause the music, and hitting the Start
| | 02:16 | button will now play the music.
| | Collapse this transcript |
| Playing sound effects with the SoundJS library| 00:00 | I have just shown you how to play music in
our game using standard HTML5 audio tags.
| | 00:05 | Another way you can play sound is
through a third-party library called SoundJS.
| | 00:10 | I'm here on the SoundJS website.
| | 00:12 | You can get some information about the
framework, you can download documentation and demos,
| | 00:18 | as well as finding out other
pieces of the CreateJS Suite.
| | 00:22 | I've already added the SoundJS
file to the exercise files.
| | 00:26 | So we're going to go ahead and
we're going to import that right now.
| | 00:32 | Like all of our JavaScript imports, the first
thing we're going to want to do is drag that
| | 00:36 | to the default.html.
| | 00:41 | I'm going to also add a forward slash and then
I'm also going to drag sound.js to default.js
| | 00:47 | so we get full IntelliSense.
| | 00:49 | And we're going to save that.
| | 00:51 | Next, we need to go ahead
and add our new sound effect.
| | 00:55 | So we're going to use two sound effects; one
is victory.wav I've created when the game
| | 01:00 | starts, and the second is pop.wav
for when we pop a balloon.
| | 01:05 | Let's go ahead and add that to our sounds
folder, and now we need to call into sound.js
| | 01:13 | and do something called addBatch.
| | 01:16 | AddBatch will create an array of sounds and
it will reference through a key value pair.
| | 01:21 | So we're going to copy this and put this in
our initialize method, and you'll see I have
| | 01:30 | a name called explosion; explosion is inside
the sounds file and it's pop.wav, and my Start
| | 01:36 | button will use a sound called
startbutton and it will be victory.wav.
| | 01:43 | Next, we're going to
call into the play method.
| | 01:46 | So let's play the sound for
explosion inside of destroyBalloon.
| | 01:52 | So the function call will be dot play, the
name of the sound from our array, which we
| | 01:57 | use explosion, and then we'll tell it
if we want to interrupt any sounds.
| | 02:01 | We're using INTERRUPT_ANY.
| | 02:05 | We also need to do the
same for the Start button.
| | 02:12 | We're going to call into SoundJS.play.
| | 02:15 | We have our startbutton which is from the
batch array, and we're going to interrupt any
| | 02:19 | sounds that are already playing.
| | 02:20 | I'm going to save this.
| | 02:22 | We will run it and now my balloons are all
paused, ready to go, I hit the start button.
| | 02:29 | (music playing)
| | 02:30 | I get my music playing in the background and
as I pop balloons, you can hear the pop sound.
| | 02:39 | (music playing)
| | 02:44 | Moving this into the snapped mode, will pause
all music and sound effects and when we hit
| | 02:49 | play, you will get balloons popping again.
| | 02:53 | Congratulations! You are now
popping a bunch of balloons.
| | Collapse this transcript |
|
|
8. Gaming ExtrasAdding scoring and leveling systems| 00:00 | We've now got a functional game with a game
loop, we're rendering balloons to the screen,
| | 00:05 | and we can have lots of fun popping
balloons both with touch and mouse and getting some
| | 00:09 | pleasing sound effects
when we pop those balloons.
| | 00:12 | But what fun is a game if we can't keep score?
| | 00:15 | So now we're going to go ahead and add a
scoring system as well as allowing our players to
| | 00:20 | advance in levels.
| | 00:22 | So the first thing we're going to do
is add a new sound called newlevel.
| | 00:29 | Newlevel is a sound I've created, so that
when we reach a new level it will play.
| | 00:34 | This is located in our exercise files and
now we need to tell SoundJS to go ahead and
| | 00:42 | call newlevel.
| | 00:43 | I'm going to do that inside of default.js.
| | 00:46 | We're going to scroll down into initialize
where we've had our original addBatch, and
| | 00:53 | we're going to add newlevel.
| | 00:58 | So just like we had with explosion, we're
now telling newlevel to be the key for the
| | 01:03 | sound newlevel.wav.
| | 01:07 | Next we need to create a new
function called updateScore.
| | 01:12 | UpdateScore will increase the score
when players are hitting balloons.
| | 01:16 | Let's go ahead and add this.
| | 01:22 | I'm going to put it in destroyBalloon, so
after we've destroyed the balloon and marked
| | 01:31 | it as destroyed, we're going to
go ahead and update the score.
| | 01:36 | UpdateScore is going to
take POINTS_BALLOONHIT.
| | 01:38 | If you recall I showed you that
POINTS_BALLOONHIT was worth 100 points.
| | 01:43 | You can feel free to change that
scoring system to whatever you like.
| | 01:47 | Let's implement updateScore and I'm going
to put that right here after destroyBalloon,
| | 01:53 | and updateScore will take whatever amount of
points we have, so we can call this function
| | 01:59 | for all sorts of different things, not just
hitting a balloon. For example, if we wanted
| | 02:04 | to create some more advanced pointing systems
in our game, and we're going to take the score
| | 02:09 | and increase it by those points.
| | 02:11 | Then we're going to take the text of the
score, we're going to look at its innerHTML.
| | 02:15 | Remember, this is the score that shown on
our game in the top left, that's currently
| | 02:20 | been showing Score = 0 the entire time.
| | 02:24 | Now it's time to have some
fun and increase that score.
| | 02:27 | Next, we're going to
start looking at the levels.
| | 02:30 | So when I showed you the parameters at the
top, there was a LEVEL_SPEED_INCREASE and
| | 02:36 | a LEVEL_PTS_REQ.
| | 02:38 | So what I'm doing here is I'm looking for
the next level, how many points I'm currently
| | 02:44 | at, and I'm checking to see if I've reached
those requirements since the last time I leveled.
| | 02:51 | If I have, I'm going to increase the level,
I'm going to set the text of the level on
| | 02:56 | the screen, its innerHTML will become Level, plus
that current level, and we're going to go
| | 03:02 | ahead and increase the
difficulty by that percentage.
| | 03:05 | So currently speeds will all increase by 10%.
| | 03:09 | Then we're going to go ahead and interrupt
any sounds that are playing and we're going
| | 03:13 | to play the newlevel sound.
| | 03:15 | After that we'll update what
the background looks like.
| | 03:19 | Let's go ahead and implement updateBackground.
| | 03:27 | UpdateBackground is going to look for the
menu number, if it's currently reached the
| | 03:31 | max, so MENUNUM is how many backgrounds we have,
I'm going to reset it to the first background.
| | 03:39 | You can feel free to go ahead and create
additional levels here. I've just created four, so that
| | 03:44 | we have some samples to work with, and I'm
going to loop through those different level backgrounds.
| | 03:49 | Then you see I'm going to set the document.
body.background = some randomBackgroundImg.
| | 03:55 | Remember, randomBackgroundImg was part of
utils.js function we've included earlier.
| | 04:03 | If we load utils.js, you'll see here we pass
in a parameter from 0 to 4 and we pull up
| | 04:10 | one of these backgrounds.
| | 04:12 | Let's go ahead and add those backgrounds,
I'm going to say Add > Existing Item, and I
| | 04:19 | am going to add background_2, background_2b,
background_3, and background_3b.
| | 04:26 | Like all other images, I can mouse over it to
get a preview, you see we have some pretty
| | 04:29 | sunsets, and we have a nice field
with a mushroom and some clouds.
| | 04:33 | I am going ahead and save this.
Let's run, and now when I hit Play,
| | 04:41 | (music playing)
| | 04:42 | as I pop balloons, you noticed my score has
gone up to 200 and I've increased my level
| | 04:48 | and the background has changed.
| | 04:50 | For testing purposes, I've set it so that a
new level is reached at a very low score.
| | 04:56 | We only need to hit a balloon in
order to change that background.
| | 05:01 | When we're going to release this game, we
would obviously want to increase that score
| | 05:06 | to be very high in order to get
a new level and a new score.
| | 05:11 | Notice the balloons are going much faster
now on Level 4 than they were on Level 1.
| | 05:15 | If I continue to hit balloons, you'll see
the balloons are beginning to go very fast.
| | 05:24 | Obviously in a real game Level 8
would take quite some time to get to.
| | Collapse this transcript |
|
|
9. Windows FeaturesSharing contracts| 00:00 | Windows 8 offers an exciting new way to share
information both between apps and to people
| | 00:06 | that you know.
| | 00:07 | If we go to the top-right and I move my
mouse down, you'll see the Charms bar.
| | 00:12 | Inside of the Charms bar I
have this new icon called Share.
| | 00:17 | If I click on Share, whatever app I am in, I
have the ability to share information out
| | 00:22 | into other apps.
| | 00:24 | Let me show you what I mean.
| | 00:25 | If we over here to the Start menu and I click
on Weather, it's a nice 56 degrees out here today,
| | 00:33 | and if I go over to the top-right and I hit
Share, I can now share that weather with other apps.
| | 00:39 | For example if I want to email someone this
weather, I simply click on Mail, a fly-out
| | 00:44 | will come over from the right and I get
information directly from the Bing Weather app into email,
| | 00:50 | all set to talk about the weather.
| | 00:53 | If you're using a keyboard you can also hold
down Windows and H to bring up Share, or Windows
| | 00:59 | and C to bring up the Charms
and then mouse over to share.
| | 01:04 | Our game now has a great scoring and leveling
system. Let's look at how we can share out
| | 01:09 | our current score and level with the world.
| | 01:13 | The first thing that we're going to do is
create a new variable called SHARE_TITLE.
| | 01:16 | We're going to put this into default.js.
| | 01:25 | We will use SHARE_TITLE to be the
subject of the message that's sent out.
| | 01:29 | So Check out my Balloons
Score is what people will see.
| | 01:32 | Now the way that we share information is
through something called the dataTransferManager.
| | 01:37 | I am going to put this in our initialize method. You
can see I've got a variable for dataTransferManager
| | 01:49 | and I'm looking at Windows.
ApplicationModel.DataTransfer.DataTransferManager.
| | 01:54 | I am going to get the
dataTransferManager for the current view.
| | 01:58 | Now the way that sharing information works
under the covers with dataTransferManager
| | 02:03 | is a user that has our app running, will want
to share information, they'll open up the Share
| | 02:09 | Charms, like I showed you, and then Windows will tell
us that they're requesting to share information.
| | 02:16 | It's entirely up to us what we want to share.
| | 02:20 | So I can share different types of
information based on where I am in my app.
| | 02:24 | The only thing I need to do is
listen for that data requested event.
| | 02:29 | So you can see once I've created the
dataTransferManager, I'm listening for datarequested.
| | 02:36 | I'll handle that request in my own
function I call shareHighScore.
| | 02:45 | We are going to need to create shareHighScore
down before app.onactivated and shareHighScore
| | 02:52 | is going to receive an event.
| | 02:55 | I'm going to get a request from that event, I'm
going to call it in a local variable request
| | 03:01 | and then I'm going to get my playername.
| | 03:04 | Playername is what's shown up at the top right
of our game screen, so I'm calling into the
| | 03:10 | HTML DOM and I'm looking for txtPlayerName.
| | 03:14 | Next on the request object I'm
going to set some data properties.
| | 03:17 | I'm first going to set the title to be
SHARE_TITLE, that's the variable we previously
| | 03:23 | set at the top, and then I'm going to set the
data for setText; setText will be the body
| | 03:30 | of the message that we're going to send.
| | 03:33 | For the body of the text we're going to combine the
playername, so we call in to "playername.innerHTML",
| | 03:40 | we put that in quotes, we say has reached, we
put the level so we call into txtLevel.innerHTML
| | 03:46 | and we put our score, so we call into
txtScore.innerHTML and that's it.
| | 03:52 | This will now setup the request
package and Windows will handle the rest.
| | 03:57 | So now when I use the Share Charms inside of my
app, I'll call into the dataTransferManager,
| | 04:03 | I'll handle it with this event and I'll
setup the request to share out text.
| | 04:08 | There is a bunch of other examples in the
official Windows 8 SDK that will let you see
| | 04:13 | other additional things to share if
you're interested in finding out more.
| | 04:18 | For now, let's see how our
score looks when we share.
| | 04:25 | I am going to hit a couple balloons here so
that my score looks a little bit better than
| | 04:29 | zero, and now I am going to go in the top-right,
move over to the Share Charm, I'll hit Share,
| | 04:39 | and I'll go into Twitter.
| | 04:42 | You can see my Twitter handle, using MetroTwit,
which is an app I got from the Windows Store,
| | 04:47 | and now you see "Player" has reached Level: 3
with Score: 700! If I hit Send tweet, this
| | 04:53 | will actually tweet out to Twitter.
| | 04:57 | I can also share to email.
| | 05:00 | If I hit Share > Mail, I can send an email.
| | 05:08 | You can see the subject is Check out my
Balloons Score! "Player" has reached Level: 3 with
| | 05:14 | Score: 700! And maybe I
want to add another message.
| | 05:23 | When I hit Send, you'll see the notification
that I've received my email and when I go
| | 05:32 | into the mail client, there is
our email message that we setup.
| | 05:36 | Contracts are a great way to add extensibility
into your Window Store game that takes advantage
| | 05:41 | of Windows features.
| | Collapse this transcript |
| The application bar| 00:00 | I'd like to talk about the
application bar for a bit.
| | 00:03 | In Window Store apps, the application bar is
accessed by right-clicking with the mouse
| | 00:08 | button or swiping from the top or the bottom.
| | 00:12 | The application bar will hold commands that
allow you to interact with the current page.
| | 00:17 | Commands on the left exist for just that page
and commands on the right are global throughout
| | 00:22 | the entire app.
| | 00:24 | Since we've got our game set up now to work
between a Start menu mode and a gaming mode,
| | 00:29 | it would be nice if we could
switch back to the menu at anytime.
| | 00:33 | The way that we do this is by
building an application bar.
| | 00:36 | An application bar is a WinJS control.
| | 00:39 | Just like other WinJS controls we've seen,
for example the Viewbox, we create a WinJS
| | 00:44 | control in the default.html.
| | 00:47 | The AppBar is located in WinJS.UI.AppBar and then we
initialize commands using WinJS.UI.AppBarCommand.
| | 00:57 | Once we've setup our div tags in default.html,
we simply need to handle the click events
| | 01:03 | of each command in our default.js.
| | 01:06 | Let's go ahead and add an
application bar now to our game.
| | 01:09 | We are going to open default.html and we are
going to scroll down below the divRoot for
| | 01:16 | our canvas tag.
| | 01:20 | Next we are going to copy in a
new div which we will call AppBar.
| | 01:25 | Like all WinJS commands, AppBar will be set
up inside of a div and we are going to use
| | 01:29 | the data-win-control
attribute to call into WinJS.
| | 01:34 | So we are going to use WinJS.UI.AppBar.
| | 01:39 | We're not going to set any options here,
so you can leave data-win-options blank.
| | 01:44 | Next we are going to use a simple button,
we're going to assign it an ID of cmdHome
| | 01:49 | and we're going to use the data-win-control, WinJS.UI.AppBarCommand.
| | 01:57 | The options for the AppBarCommand, we are
going to set up with an ID for cmdHome. We're
| | 02:02 | going to set up a label of Menu.
| | 02:05 | Label will be the text that's visible
underneath the icon in the AppBar.
| | 02:10 | We have two choices for icons in our AppBar.
| | 02:13 | We can use a custom icon or we can use
a bunch of different built-in icons.
| | 02:19 | I'm going to use the home icon here.
| | 02:22 | Simply by calling into home, I can use the
predefined house image as part of the AppBar.
| | 02:28 | Next we are going to define the section.
| | 02:30 | If you recall, I showed you how a section can
be divided into both selection, which is for
| | 02:35 | the specific page and global,
which is for your entire app.
| | 02:40 | Selection always appears on the left
and global always appears on the right.
| | 02:45 | So by saying section selection, our Home icon
will appear on the left and be selective just
| | 02:51 | for that Start menu.
| | 02:53 | We are going to assign a tooltip of Menu;
tooltip will show up when we mouse over the
| | 02:58 | icon in the AppBar.
| | 03:01 | Now that we've setup our AppBar and our AppBar
Command, we need to listen to the click event
| | 03:06 | for that AppBar command.
| | 03:08 | So let's go ahead and open default.js. We'll
scroll down to where our other EventListeners
| | 03:15 | are, and we are going to listen into
the document for cmdHome's click event.
| | 03:27 | We are going to create a
function that we'll call homeAppbar.
| | 03:35 | Let's put homeAppbar at the bottom before
app.onactivated and homeAppbar will start
| | 03:43 | out by looking at the viewState.
| | 03:45 | Remember, our app can be in
both snapped or a filled mode.
| | 03:51 | When we switch between our game's menu and
our game's screen, we may move between snapped
| | 03:56 | and filled mode.
| | 03:58 | So we need to be aware of which
mode we're currently running in.
| | 04:02 | Just like we did for App Window resize events, we are going to
call into the Windows.UI.ViewManagement.ApplicationViewState
| | 04:12 | name space.
| | 04:13 | This will allow us to get the app's current view state.
You can see that underneath ApplicationView.value.
| | 04:20 | So we are going to compare that current
appViewState with the viewStates for snapped and filled.
| | 04:25 | We can leverage our existing showMenu
function that we've already built by passing in the
| | 04:30 | parameters for snapped, filled, and full, and
our menu will automatically build itself to
| | 04:36 | the correct scale.
| | 04:37 | Now that we've setup the AppBar and commands,
as well as a showing the menu in the proper
| | 04:42 | view state, let's go
ahead and test our new game.
| | 04:47 | Now on my main menu if I right-click or if
you're on a touch device swiped from the top
| | 04:52 | or bottom, I get a nice AppBar that pops up.
| | 04:55 | I have Menu in the bottom
left and an icon for menu.
| | 05:00 | If I click anywhere outside of the
AppBar, the menu will disappear.
| | 05:05 | If we play our game, we right-click and we
go over to Menu, we'll now move immediately
| | 05:12 | back to Menu mode.
| | 05:16 | If I begin to play my game again and I put
the game into snapped mode, the game will
| | 05:22 | pause, I can right-click; you'll
notice my AppBar icon is properly aligned.
| | 05:29 | When we are in snapped mode, due to the reduced
pixel size, we'll also only see the icon images.
| | 05:35 | Let's hit Play, right-click and hit Menu.
| | 05:41 | Congratulations! You now have a working game
menu system that will allow you to switch
| | 05:45 | both between game mode and menu mode
as well as in full screen and snapped.
| | Collapse this transcript |
| The flyout control| 00:00 | Now that our application bar is set up, we
can add additional ways for us to get input
| | 00:04 | from our player.
| | 00:05 | Why don't we set up a way for them to enter
their name? This way, when they share their
| | 00:09 | high score out with their friends,
it'll include their name as well.
| | 00:13 | We're going to use the WinJS flyout control.
| | 00:17 | Let's jump over to default.html and scroll down
to our existing App Bar and App Bar commands.
| | 00:27 | We're going to add a new command underneath
our Home command, and we're going to call it cmdName.
| | 00:32 | We're going to call into
WinJS UI AppBar command.
| | 00:40 | And we're going to use data-win-options of
cmdName for our ID, player name for our
| | 00:46 | label; this will be the
name underneath the icon.
| | 00:49 | And instead of using one of the default icons
like we did for Home, we're going to create
| | 00:54 | our own icon.
| | 00:56 | So let's go ahead and add
accept.png to the images folder.
| | 01:06 | If I hover over accept, you'll
notice it's in a special format.
| | 01:10 | If you're creating your own App Bar icon,
you need to create what's called a sprite sheet.
| | 01:16 | This sheet will be 40x40 pixels wide by
default, and there'll be two rows of four images.
| | 01:24 | These rows represent different states.
| | 01:26 | So we're looking at the normal button state
and the second row would be for the toggled state.
| | 01:31 | You don't have to worry about the
toggled state if you're not going to use it.
| | 01:34 | The columns are basically rest, hover,
active when it's pressed, and disabled.
| | 01:41 | There is MSDN documentation you can go to.
| | 01:44 | If you look at WinJS.UI.AppBarIcon enumeration,
scroll down and you'll see all of the built-in icons.
| | 01:52 | This should give you an example of what kind
of icons to create for your own custom icons.
| | 01:58 | If you need additional examples of what
custom icons look like, you can also download the
| | 02:03 | HTML AppBar control sample.
| | 02:07 | Now that we've added our custom icon, we're
going to assign it to the global section so
| | 02:11 | it will appear on the bottom right. We're
going to give it a tool tip for Change Player
| | 02:16 | Name, and instead of just using a button,
| | 02:19 | we're now going to use a WinJS flyout control.
| | 02:23 | So we assigned type to be flyout and we tell
it that the flyout control that will show
| | 02:28 | up on the AppBar is going
to be called nameFlyout.
| | 02:32 | Next, we need to assign what that
nameFlyout will actually look like.
| | 02:39 | Underneath our AppBar command div,
we're going to create another div tag.
| | 02:43 | We're going to assign it nameFlyout and
just like all WinJS Controls we're going to do
| | 02:48 | data-winControl call into WinJS, and this
time we're going to use WinJS.UI.Flyout.
| | 02:55 | What's really interesting here is the entire UI
for this control is built just with standard HTML.
| | 03:01 | So we've got a div tag, inside of our div
tag we're holding a label for player name,
| | 03:07 | and an input box we're calling player name.
| | 03:10 | The input type will be text and we
have a button called submit button.
| | 03:15 | The text to that button is saved.
| | 03:18 | Now that we've got the flyout control set up,
and we've got the AppBar command, we need
| | 03:23 | to handle the click event
to show the flyout control.
| | 03:27 | Let's go into default.js.
| | 03:31 | We will scroll down to where our existing
commands are, and we're going to add two new commands.
| | 03:41 | The first command is cmdName. This is the click
event for the icon we just added for the flyout control.
| | 03:47 | We're going to handle that event with a
function called Show Player Name Update.
| | 03:52 | The second event will be for the save button
that we included inside of the flyout controls UI.
| | 03:58 | We're going to look for submit button and
handle its click event, and we're going to
| | 04:02 | handle that with the function
we'll call Update Player Name.
| | 04:06 | Next we need to add Show Player Update.
| | 04:11 | We're going to put this at the
bottom before App on activated.
| | 04:17 | So function showplayerNameUpdate, much like all
of the other events where we handle elements
| | 04:22 | from the DOM, we're going to assign a
variable command name button and get the element by
| | 04:27 | idea of command name.
| | 04:29 | What's a little bit different here, is instead
of looking at the context of what the content
| | 04:34 | inside the div tag is, we're going
to work with the winControl itself.
| | 04:39 | So the way that we do that is we get element by
ID name flyout, but we now do a dot winControl
| | 04:45 | and we're going to call the show method.
| | 04:47 | We're going to show command name button.
| | 04:50 | This will actually make the flyout control
visible at the exact location on the AppBar.
| | 04:56 | Now we need to add the function
to update the player name itself.
| | 05:04 | Function update player name, we'll look at
text player names in our HTML, and it will
| | 05:09 | sign it to the value of player name.
| | 05:12 | Player names value is what's
inside of the flyout control.
| | 05:16 | If you recall, I showed you we set up a div
and we had player name in there as the text input.
| | 05:22 | Lastly, after we've assigned the value to
the inner HTML of player name, we need to
| | 05:27 | now hide our winControl, getting the element
by ID for nameFlyout, getting its winControl,
| | 05:34 | and calling the Hide Method
will hide this flyout control.
| | 05:38 | Let's go ahead and see this in action.
| | 05:45 | My player name in the top
right is still Player.
| | 05:49 | If I right-click, you'll see I have the custom
icon, I have Change Player Name, and Player
| | 05:57 | Name as the text.
| | 05:58 | I'm going to hit this, you can see our flyout
control, we'll type in Dave, we'll hit Save,
| | 06:07 | the flyout control will go away,
and our name has now been updated.
| | 06:11 | If we share this out, you'll notice Dave
has reached level zero with score zero.
| | 06:21 | Congratulations! Our players now have names.
| | Collapse this transcript |
|
|
10. Device HardwareCapturing images and video with the camera| 00:00 | Now that players have the ability to enter
their name into our game, how about allowing
| | 00:04 | them to take a photo of themselves too.
| | 00:07 | In the past, accessing a webcam in
Windows meant having to do some native calls.
| | 00:12 | When using HTML in JavaScript apps we get
access to the camera through a simple API call.
| | 00:18 | The camera API is going to call into WinJS
just like we did for the Viewbox and the AppBar.
| | 00:24 | We're going to use the Windows.Media.Capture.
| | 00:26 | There are two modes for Windows.Media.Capture.
| | 00:31 | There's CameraCaptureUI
and there's MediaCapture.
| | 00:35 | MedialCapture will allow you to control every
pixel on the screen and CameraCaptureUI, will
| | 00:41 | build the default camera UI that
people will be used to when using Windows.
| | 00:46 | We're going to use CameraCaptureUI.
| | 00:48 | We also have the ability to set both photo
and video through the CameraCaptureUIMode.
| | 00:55 | We still need to remember webcams are a capability
that needs to be turned on in the app manifest file.
| | 01:01 | This is so that in the Windows Store, our app
will declare its intent to use the webcam.
| | 01:07 | When people download our game, they'll
know that webcam is capability of the app.
| | 01:12 | Good new for us is the PC webcam that you
have connected will work in the simulator as well.
| | 01:18 | This makes testing very easy.
| | 01:21 | Let's go in and add the camera now.
| | 01:23 | We'll go to default.js, and at the end of our
declarations before initialize, we're going
| | 01:32 | to add a new variable for the camera.
| | 01:36 | We'll call this capturedPhoto.
| | 01:38 | Next, we need to add a new command to our
AppBar command, so we'll go into default.html.
| | 01:48 | We'll scroll down to our
existing AppBar commands.
| | 01:52 | Underneath command name, we
will add cmdCamera.
| | 01:56 | Just like I showed you how easy it is to add
buttons for existing commands, we'll do the
| | 02:00 | same here for the camera.
| | 02:03 | We'll call into the WinJS control, for WinJS.UI.
AppBar command, we'll call it cmdCamera.
| | 02:10 | We'll have a label of player photo, we'll
use the standard icon for camera, and we'll
| | 02:15 | set the section for global,
so it appears on the right.
| | 02:18 | Lastly, we'll have tool tip
that says, Change player photo.
| | 02:24 | We need to handle the event for the
click, just like our other commands.
| | 02:28 | So let's go into default.js, we'll scroll
down to our other AppBar commands, and we
| | 02:35 | will add a new event handler
for cmdCamera click.
| | 02:40 | The function that we're
going to call is capture photo.
| | 02:44 | We'll add capture photo at the
end before app on activated.
| | 02:53 | Let's take a look at what capture photo does.
| | 02:56 | Just like working with any device, we're
going to put this in a try catch loop.
| | 03:00 | For demo purposes, I'm not handling the
error at all, so it just falls away down here.
| | 03:06 | If you'd like to catch those errors
yourself, feel free to add variables down here.
| | 03:11 | I'm going to set a new variable for
the CameraCaptureUI called dialog.
| | 03:17 | We also have the ability to set the
aspect ratio for the cropping tool.
| | 03:21 | I'm going to use 16x9.
| | 03:24 | The APIs for camera are asynchronous.
| | 03:27 | So what you are seeing here
is a JavaScript promise.
| | 03:31 | That's where the ".then" comes in.
| | 03:33 | So we are asynchronously going to capture a
photo, and then when we get something back,
| | 03:40 | if we do have a file, we're going
to set the source of imgPlayer.
| | 03:44 | Remember, imgPlayer is just a standard image
tag in our gamesUI, in the top right, we will
| | 03:50 | use URL.createObjectURL.
| | 03:54 | This is an open standard
for handling file paths.
| | 03:58 | This will return a temporary file path on
our local disk that has stored the photo.
| | 04:04 | Then we'll assign that image to the source.
| | 04:07 | Notice if I wanted to enable video, I could
simply come over to CameraCaptureUIMode, do
| | 04:12 | a dot and I have video.
| | 04:15 | I can also do photo or video.
| | 04:18 | We'll stick with just a photo for our game.
| | 04:24 | Let's go ahead and run this.
| | 04:27 | If I right-click and bring up my AppBar,
you'll notice that the camera says, This app needs
| | 04:32 | permission to use your camera.
| | 04:35 | This is part of that app
manifest we talked about.
| | 04:39 | Let's go ahead and update that now.
| | 04:44 | We scroll down to package.appmanifest. We're
going to double-click. We'll move over to
| | 04:51 | capabilities, and at the
bottom here we have webcam.
| | 04:56 | Let's go ahead and check that off, click Save,
and now when we run it, we'll get a new prompt
| | 05:05 | that says, Can Balloons use your
webcam? We're going to click allow.
| | 05:12 | I'm going to take a picture, and I showed you
how you could set the cropping tool to be 16x9.
| | 05:20 | Notice that the ratio
here always stays at 16x9.
| | 05:25 | We'll click OK.
| | 05:27 | And when I play the game.
| | 05:32 | You'll notice that the image is squished.
| | 05:37 | So what we need to do now, to support
our 16x9, is update the imgPlayer.
| | 05:46 | One of the great things about having
everything as CSS styles is we can easily change any
| | 05:52 | of those elements on the screen.
| | 05:55 | Let's move down.
| | 05:58 | We're going to change the width from 70
pixels to a 100 pixels for imgPlayer.
| | 06:07 | We'll hit Save.
| | 06:12 | We'll take a new player photo.
| | 06:15 | Notice also, we have Camera options.
| | 06:17 | This is part of the defaultUI.
| | 06:19 | So if I bring this up, I can change photo
resolutions. We'll take a better picture here.
| | 06:24 | I think .9 megapixel, there we go.
| | 06:28 | I've also got more details down here where I
can move the brightness, contrast; all of
| | 06:35 | this is done through the
Windows drivers themselves.
| | 06:38 | I didn't have to write any
of these as a developer.
| | 06:41 | This is the great part
about the CameraCaptureUI.
| | 06:45 | Let's take this picture. We'll
get the entire thing, hit OK.
| | 06:53 | Now when we play, we get
the nice widescreen 16x9.
| | 07:00 | If we right-click and drag this over into a
snapped mode, notice that all of the icons
| | 07:06 | are aligned and look great.
| | 07:08 | We can also take a photo
directly within here as well.
| | Collapse this transcript |
| Using the accelerometer| 00:00 | I'd like to talk a little
bit about an accelerometer.
| | 00:03 | If you're not familiar with an accelerometer, it's
a sensor that's going to measure three-dimensional space.
| | 00:08 | So if you think of your X, Y, and Z coordinates,
it's going to measure to the center of the Earth.
| | 00:15 | So Z is negative, when the edge is up, and
positive when this edge is down, meaning the
| | 00:21 | back of the device.
| | 00:23 | X is positive when the left edge is up
and negative when the right edge is up.
| | 00:29 | In essence, you're getting measurements
between negative one and one based in the direction
| | 00:35 | the device is moving.
| | 00:37 | Now you'll get measurements higher than negative
one and one if the device is moving very quickly.
| | 00:43 | For example, a shake.
| | 00:45 | In the past, this is how we've
measured game players shaking a device.
| | 00:50 | Luckily for us inside of Windows Store apps, we
have a shaking event that we'll take advantage
| | 00:54 | of in our game.
| | 00:56 | The API for an accelerometer is located in
Windows.Devices.Sensors, and the way that
| | 01:03 | we access the accelerometer is calling
into Sensors.Accelerometer.getDefault();.
| | 01:07 | We're going to listen for
changes in the reading.
| | 01:11 | What's important here to remember is that
accelerometers will consume power when they're polling.
| | 01:16 | So you only want to turn the
accelerometer on when it's needed.
| | 01:21 | For our game, we're going to turn the
accelerometer on when we reach a certain score.
| | 01:25 | As soon as the user goes ahead and uses the
power up, we're going to immediately shut
| | 01:30 | the accelerometer off.
| | 01:32 | We also have the ability to tweak
the polling interval for readings.
| | 01:36 | This is going to be a fine line between how
sensitive you want the readings and how much
| | 01:40 | power that you want to use.
| | 01:42 | Let's go ahead and start adding
accelerometer support to our game.
| | 01:47 | We're going to open up default.js and we're
going to add some new variables to handle
| | 01:53 | the accelerometer.
| | 01:56 | So right before initialize, I'm going to
create a variable for the accelerometer itself, a
| | 02:05 | variable for the interval ID, and a
variable for getReadingInterval.
| | 02:10 | Next, we're going to create a function to
handle initializing the accelerometer.
| | 02:15 | This will be a function where we set up the
polling interval, but we're not actually going
| | 02:20 | to turn the accelerometer on yet.
| | 02:23 | Let's put that in the initialized method.
| | 02:28 | We're going to implement in
initAccel before app.onactivated.
| | 02:34 | Init Accel is going to assign the variable accelerometer,
to Windows.Devices.Sensors.Accelerometer.getDefault();.
| | 02:41 | If the device that we're playing the game on
actually has an accelerometer, accelerometer
| | 02:48 | will get filled. If not, we're going
to have no accelerometer support.
| | 02:52 | It's important to test on both devices that
have accelerometers and devices that do not.
| | 02:58 | What I encourage you to do, is test out on a
device like a Microsoft Surface or one of
| | 03:04 | the many tablets that are out there that do
have an accelerometer in them, as well as
| | 03:08 | your development PC.
| | 03:09 | Next, I'm going to setup
the minimumReportInterval.
| | 03:13 | This interval is just a number that I found
to be accurate enough that I get a shaken
| | 03:18 | reading, but it doesn't
consume too much power.
| | 03:21 | This will be a number you'll need to play
around with until you get readings and power
| | 03:24 | consumption that feels right for your game.
| | 03:27 | Next, we need to update our update score so
that we turn on the accelerometer when we
| | 03:35 | have enough points.
| | 03:38 | If you recall, I've showed you how to update
our on screen elements with score and the
| | 03:42 | leveling system.
| | 03:44 | One of the other game extras we're going to
add now is something called the BIG BOOM!.
| | 03:48 | BIG BOOM! is just a name I've come up with
for popping all the balloons on the screen
| | 03:52 | at one time.
| | 03:54 | The way that we'll pop all the balloons on
the screen, is through the accelerometer.
| | 03:58 | Once we've reached enough points through BIGBOOMPTS_REQ,
or BIG BOOM requirements, we'll turn on the
| | 04:05 | accelerometer, we'll notify the user to shake
their screen for a big boom, and if we received
| | 04:10 | a shaken event, we'll blow up
all the balloons on the screen.
| | 04:14 | What we're seeing here is we're increasing the
scoreBigBoom by the number of points that we've updated.
| | 04:20 | If we've now reached the requirements and the
accelerometer actually exists, we're going
| | 04:24 | to add the shaken event.
| | 04:26 | This will turn the accelerometer on, we're
going to update the text score, and we're going
| | 04:31 | to play a sound for BIG BOOM!.
| | 04:33 | This sound will be a
bunch of balloons popping.
| | 04:36 | This will be an audio cue that
it's now timed to shake the device.
| | 04:40 | And then we're going to go ahead
and reset the score of BIG BOOM!.
| | 04:44 | Let's add this sound effect and we're going
to add BIG BOOM! to our SoundJS add batch
| | 04:52 | like we've done earlier for
all of our sound effects.
| | 04:57 | So our onShakenAccel event will
immediately remove the shaken EventListener.
| | 05:05 | This will shut off our accelerometer and
stop it from polling and consuming power.
| | 05:09 | Next, we need to destroy all of the balloons, so
we'll create a function called launchBigBoom.
| | 05:15 | Let's add that function
immediately under on ShakenAccel.
| | 05:23 | launchBigBoom is going to enumerate through
our array of balloons and call our existing
| | 05:28 | function to destroyBalloon.
| | 05:30 | If you recall, destroyBalloon was a function
that I showed you where we will flag a balloon
| | 05:34 | as destroyed and then it will
get rendered across 15 frames.
| | 05:38 | This will blow up all the balloons
on the screen after a shaken event.
| | 05:44 | We're now going to run this and
we're going to add two break points.
| | 05:48 | I'd encourage you to do this on both a device
with an accelerometer and without an accelerometer.
| | 05:53 | The device I'm currently on does not have an
accelerometer, so when we come into accel,
| | 05:58 | we'll move down here into the else.
| | 06:01 | We're also going to look at update score to make
sure that we're calculating our scoreBigBoom.
| | 06:08 | BIGBOOM_REQ, if we scroll up to the
top, is currently set to 1000 points.
| | 06:15 | So at 1000 points, we should be checking for
an accelerometer and turning one on if it exists.
| | 06:21 | Let's go ahead and run our game.
| | 06:26 | You'll notice we're going to
look for the accelerometer.
| | 06:28 | If the accelerometer exists, set up the
reporting interval, no accelerometer exists.
| | 06:33 | You can see its set to null, we'll
continue operation, we'll hit 1000 points.
| | 06:47 | So our scoreBigBoom is working correctly.
| | 06:49 | We now have 1000 points.
| | 06:51 | Since we do not have an accelerometer, we'll
move across, we'll reset our score for BIG
| | 06:56 | BOOM and we'll continue playing the game.
| | Collapse this transcript |
|
|
GoodbyeNext steps| 00:00 | At this point we've got a working game
that's almost ready for the Windows Store.
| | 00:04 | I've covered the development tools with you.
| | 00:07 | I've also walked through the web stack showing
off HTML5 capabilities, CSS3 and hardware
| | 00:12 | accelerated canvas.
| | 00:14 | I've shown you how to create your own game
engine with a working game loop and update
| | 00:18 | and rendering to the screen, as well as
a leveling, scoring, and menu system.
| | 00:22 | I've also tested out the game on
multiple screen sizes and snapped mode.
| | 00:27 | I've included touch and additional sensors
like the camera and accelerometer to make
| | 00:31 | our game come alive.
| | 00:33 | Lastly, we have the capability to
share out our score with the Internet.
| | 00:38 | The next steps that you may want to take a
look at our additional resources in the provided
| | 00:41 | links file, this will include the Windows
Developer Portal as well as all of the web
| | 00:46 | sites I've talked about in this course.
| | 00:48 | If we wanted to submit our game now, there's
only a couple of additional steps that we
| | 00:51 | need to do.
| | 00:53 | If you recall earlier when we setup images
for our game, we only included the single image.
| | 00:58 | We need to go back into our app manifest and
include images for the store as well as the
| | 01:03 | different scales.
| | 01:04 | We also need to include a privacy policy inside of our
application, if we're going to allow Internet access.
| | 01:11 | A privacy policy will
appear in our setup panel.
| | 01:14 | And don't forget, you need to test, test, and
test some more, and especially with a game.
| | 01:19 | Playing the game on the device always feels
different, so make sure that you're testing it out.
| | 01:24 | I've really enjoyed this course and I hope
you have too. I hope to see your game in the
| | 01:28 | Windows Store.
| | 01:29 |
| | Collapse this transcript |
|
|
