Chris Gomez

Development topics for the indie programmer

Xbox Dev Mode with JavaScript and Web Technologies

Xbox Dev Mode was one of the exciting announcements from BUILD 2016.  Every retail Xbox can now be used to test and develop Universal Windows Platform apps.

There has been praise and scorn over this feature announcement.  While I will not try to defend it as perfect, I think there are a lot of hobbyists (like myself) who just appreciate the opportunity to make something and see it working on our consoles.

One thing I noticed immediately was that the documentation for this feature offers a C# and C++ option to get you started.  I was thinking, “Does this mean JavaScript apps using the UWP don’t work?”  I didn’t think that would be true, so I got to work trying it out.  It actually was pretty simple, but there was one minor thing you might consider a gotcha.  So consider this the missing documentation for web developers.

Prerequisites

The documentation (Set up your UWP on Xbox development environment) was actually quite good to help me get the Dev Mode preview installed and get all the prerequisites installed.  I summarize here, but you can skip to the next section if you’ve done this already or want to read the real docs.

You need a PC running Windows 10 and Visual Studio 2015.  You can use the free Visual Studio Community Edition.

There are some things you need to get up to date with.  First, you need your Xbox One to be updated to boot into Dev Mode.  If you were already part of the Preview Program to get a look at system features early, you have to disenroll from that.  This isn’t an immediate process, as you actually wait for the next update wave for your console to be removed.  For me, I began the process Wednesday and I noticed my console was rolled back on Friday evening.  How did I tell?  I kept checking the Xbox Preview Dashboard app.  It previously was showing my console’s disenrollment as pending, and then it finally changed to ask me if I wanted to enroll.  That was the best I could figure out.  I haven’t seen preview version information text on the Home screen for some time now, but I may have also missed it.

You need a Dev Center account.  Sometime ago, the policies for these accounts were changed.  I believe the price came way down and you don’t pay to be part of it each year.  I simply logged back in with an account I created a few years back.  You will need this to activate your console later.

Then I installed the Dev Mode Activation app.  When you run this, it walks you through the process of registering and activating your console.  You will need to log into your Dev Center account.  I found it wouldn’t let me join until I created an app on the Dev Center site.  This was a placeholder app.  It didn’t make me promise to finish the app later or anything.  But it wouldn’t let me activate the console until I did that.

You also need to update Visual Studio 2015 to Update 2, which was just released.

You need to install Windows SDK preview build 14925.  You can get to the SDK here, but you need to be signed in with your Microsoft account (that you used for the Windows Insider program).  Even though this update is meant to let developers get ready for the Windows 10 Anniversary Update, you don’t need to use this on a computer that is running a Windows Insider build (but you do have to be a registered Insider).  It does need to be running Windows 10.  The computer I used to do this is running Windows 10, but is not in the Insider program and does not get preview builds.

 

Create a Universal Windows Platform project using JavaScript

You may want to read up on creating C# and C++ projects, and it really was what led me to getting JavaScript projects working.  So let’s get started.  Create a Universal Windows Platform project with JavaScript:

 

You are presented with this quick dialog asking about the target and minimum OS Versions you want to support.  If you’ve worked in Android, this may cause brief flashbacks and shudders, but just click OK.  Resist the temptation to say to yourself, “Obviously the minimum should be changed to that Insider Preview build as well, right?”  I did that, and Visual Studio told me the project couldn’t be deployed due to… you guessed it… operating system version on the Xbox.  So I set this back and everything was great again.

 

 

When your app is finished, Visual Studio opened main.js with a comment // Your code here! and it beckons you to get to work.  You may be itching to get it deployed onto your Xbox One, but first you need to change a few project settings.

Right click on the project in Solution Explorer (or select Properties from the Project menu with your project selected in Solution Explorer).

Notice that in this screenshot I’ve already changed to the Debugging section and used the drop down to select “Remote Machine”:


Note that I am changing the authentication to Universal (Unencrypted Protocol) and entered a machine name for my Xbox One.  The documentation says you can change this name, and should in environments with more than one Xbox One, but I just have one, so I stuck with the default.  You can also use an IP Address.  You can find these items in the DEV HOME app on your console when you boot into developer mode.  I don’t know of a way to take screenshots yet from this mode (the console said it could not take screenshots from the app).  So I would suggest taking a look again at the documentation and pay attention to the part where you “pin pair” with Visual Studio.  That’s the DEV HOME app.

There is a screenshot in the documentation showing the DEV HOME app with the IP Address and Host Name locations circled.

You actually don’t need to do anything else.  You are booted into DEV MODE and have your console paired to Visual Studio.  Just start the debugger pointing to Remote Machine.

Wait, I don’t see anything!

If you see a white screen and nothing else, you may be yelling at me right now.  Well, there is an important concept in console development called the TV Safe Area.  They discuss it in the Xbox Dev Mode documentation on MSDN and I’ll cover it in the future.  The UWP project template in Visual Studio merely has a div that says “Content goes here!”.  If you do nothing, it will be in the far upper left hand corner in a fairly small font.  So it could very well be outside the safe area.

Stop your debugging session, try opening the default.css file and adding something like this temporarily:

Now you should at least be able to see the text when you deploy the app again:

 

At this point you are ready to “build a web site” using your web development skills and Visual Studio 2015.  You can use your favorite web game programming framework.  So far, I’ve only used one “Windows specific” set of APIs to get the gamepad working, but I’m going to cover that in a future blog post.  I hope you enjoy using your web development skills to make apps and games for the Xbox One!

This is a great time to be working on games for your Xbox One.  I will be detailing more of the development journey even to get this simple example below running for those of you completely new to game development.  I am using the Phaser game framework here, if you can’t wait to get started.  There are tons of great samples and in-browser demos that are easy to follow.

 

blog comments powered by Disqus