PHOBOSLAB

Blog Home

JavaScript on the XBox 360

Yes, it works. No, it's not very fast.

As a part of my HTML5 Game Engine I previously wrote a framework that lets you run a JavaScript/Canvas game on the iPhone without using the browser engine, drawing everything in OpenGL directly. This worked out pretty well. The iOS version of Biolab Disaster is indistinguishable from natives apps.

My HTML5 Game Biolab Disaster running on the XBox 360

I wanted to do the same for the Xbox360 – how hard could it be? I got a JavaScript engine running on iOS, so I'm used to jumping through hoops, but nothing could prepare me for what I was up to.

Microsoft offers a developer program for the XBox 360, where you can write games in C# with a framework called XNA. These games are compiled into NET bytecode and work on Windows and the XBox without any modifications. However, in contrast to Windows, you can't execute unmanaged code on the XBox. This ruled out all the popular JavaScript engines that are written in C++, such as V8 or JavaScriptCore.

Luckily, a guy called Paul Bartrum wrote Jurassic - a JavaScript engine for NET. It compiles JavaScript code into NET bytecode at runtime, allowing far better performance than a pure interpreter (e.g. Jint). It works almost seamlessly with C# classes and fully supports the ECMAScript 5 standard. I wrote some quick code to get Biolab Disaster up and running with Jurassic and XNA on Windows and got a steady 60hz with lots of headroom.

But there's a catch: Even though Jurassic is written in C#, it doesn't work on the XBox. The XBox doesn't run the real NET Framework, but something called NET CF or Compact Framework. The functionality to create bytecode at runtime ("Reflection.Emit") is completely missing.

Now here's is where it gets funky. If Jurassic can compile JavaScript at runtime, I should be able to rig it to compile everything into a NET Assembly at compile time. The XBox then only needs to load this Assembly (a DLL) and execute it. I pitched my idea to Paul Bartrum:

It seems doable, though I think you underestimate the work required to generate the assembly

I sure did.

Fast forward three weeks of me trying to wrap my head around C# – a language I've never worked with – modifying a real world compiler – something I had no knowledge of whatsoever – and sitting for hours in the debugger, stepping through the code line by line.

I finally got it working. The Biolab Disaster Title screen came on my TV. Smoothly animated and in glorious 1cm pixels. I pressed a button to start the game and was greatly disappointed to see it running with only 3 frames per second.

After a bit of profiling, I found no obvious bottleneck. The compiled JavaScript code was just slow overall. Good enough for some scripting, but not for a whole game. Maybe I'm missing something that makes the compiled JavaScript so much slower on the XBox. A certain operation that has to be "emulated" by the NET CF; something that requires extensive 64bit math? I don't know. I called it quits.

I put all the sources and a small JavaScript demo on GitHub. It should compile and run out of the box on Windows and the XBox 360 with the Windows Phone SDK (don't be fooled by the name, it includes the XBox stuff as well).

JS360 on Github

If anyone from Microsoft is reading this: Don't be Apple. Give us a speedy JavaScript engine as part of XNA.

Friday, April 27th 2012

18 Comments:

#1 – Johann Deneux – Friday, April 27th 2012, 20:20

The garbage collector on Xbox is extremely slow. If you did not take that into account, you would get the kind of disappointing performance you are performing.
Did you profile how much time the game spends doing GC on the Xbox? It's not too hard to do, and will tell you immediately if that's the problem.

I warmly recommend reading Shawn Hargreaves' blogs on the subject: blogs.msdn.com/b/shawnhar/archive/2007/06/29/how-to-tell-if-your-xbox-garbage-collection-is-too-slow.aspx

#2 – Rhuno – Friday, April 27th 2012, 20:26

This makes me happy; even if it runs slow, the fact that developers like yourself are out there doing this kind of crazy stuff makes my day. I wish I had the technical understanding to even attempt something like this.

Cheers!

#3 – Foliba – Friday, April 27th 2012, 20:48

This is just amazing?
Thanks for the awesome freakazoid stuff you did here.
Sadly my C# skills won't help here I think, but nevertheless, I gonna have a look into it this weekend.

Keep on doing cool shit!

#4richtaur – Friday, April 27th 2012, 21:15

Very cool! You were definitely further along than us. I had a feeling that running the game on the computer would be worlds different from getting it on the actual device…

If you've got some ideas on where to take it but you're just out of motivation/need resources, ping me or geoff and we'll tag team it :-)

#5 – - – Friday, April 27th 2012, 21:35

>.NET is slow
>is surprised

#6Kevin Gadd – Saturday, April 28th 2012, 10:00

The XBox 360 CPU is an in-order processor, so all the indirection involved in executing JavaScript probably results in pretty awful performance. I'd have to look at the IL it produced to be sure.

#7Paul Bartrum – Sunday, April 29th 2012, 03:27

The optimizations performed by Jurassic are pretty basic, some tips to make Jurassic happy:
* Use local variables over globals, they're much faster.
* Don't use eval or nested functions.
* There's no common subexpression elimination, so create new local variables to hold common subexpressions.

Good job getting it working, I'm impressed :-)

#8 – alex ewetumo – Monday, April 30th 2012, 00:03

i gotta say ,you one wicked awesome dude

#9 – Javier Roca – Tuesday, May 1st 2012, 03:58

great job, JavaScript is the lingua franca of the web i think that conversion will not work that good, here is another tough on may 01 2k12 W3C release the Gamepad API i think just chrome canary and firefox support it right now dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html, with this update on the ECMAScript core, we can manage the USB xbox control with the browser, some Smart TV support HTML5 on his SDK like this one www.samsungdforum.com/upload_files/files/guide/data/html/html_3/getting_started/intro_to_samsung_smarttv_apps.html i think the future on gaming will be on the web

#10 – Pipo – Wednesday, May 2nd 2012, 11:21

That's incredible. Please invest more time into this problem. It would be awesome to create games with JavaScript on Xbox 360.
I would really love to release one of them to to indie channel.

#11frederic torres – Saturday, May 5th 2012, 23:47

I am also experimenting with JavaScript runtimes written in C# on Windows and iOS.

There are some JavaScript runtimes that do not use Just In Time Compilation, they are slower, but easier to port.

Few month ago, I blog about JavaScript runtimeS performance on Windows.

frederictorres.blogspot.com/2011/06/javascript-run-time-performance-on.html

Impressive work, I will try it on Windows.

#12 – Paul – Wednesday, May 9th 2012, 22:43

Impressive work.

#13Alaa-eddine – Monday, May 21st 2012, 14:50

Really impressive :)

I'm not familiar with Xbox360 codes but I think that the performance issue is not related to code optimisation or so, but maybe to something else, maybe the timer implementation.

did you tried to accelerate the framerate intervale ? something like setInterval( draw, 1) instead of setInterval( draw, 1000/60 ) :D
also, did you tried to calculate the elapsed time using a global timer instead of gametime (DateTime.Now.Ticks) ?

another solution (a better one I think) would be to expose XNA Update() method to javascript - like you did width Canvas() object -, this way, you don't have to deal with a custom timer it's like using a .Net requesAnimFrame instead of setInterval ;). (not sure if it's possible with jurassic library).

#14Alaa-eddine – Tuesday, May 22nd 2012, 11:32

here is a piece of code allowing to use native XNA update methode instead of setInterval, I was not able to test it on my Xbox 360 as I don't have an apphub account :/ but it works well on windows.

can someone give it a try ?

here are the modifications

in ImpactGame.cs modify Update and Draw methods as follow

        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            if (this.screenCanvas != null) screenCanvas.prepareFrame();
            //Call javascript draw method 
            js.CallGlobalFunction<int>("draw");
            base.Update(gameTime);
        }


        protected override void Draw(GameTime gameTime)
        {
             
            //if (this.screenCanvas != null) screenCanvas.prepareFrame();

            timers.Update(gameTime);

            if (this.screenCanvas != null)
                screenCanvas.endFrame();

            base.Draw(gameTime);
        }


in JS_Canvas.cs modify prepareFrame as follow
        public void prepareFrame()
        {
            if (this.framePrepared) return;
            this.batch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend);
            this.framePrepared = true;
        }


and finally remove the setInterval() call from Game/index.js
// Load the image and start the draw interval
var comet = new Image();
comet.onload = function() {	
	//setInterval( draw, 1000/60 ); <=== [remove this line]
	
	ctx.fillStyle = '#000000';
	
	for( var i = 0; i < numSprites; i++ ) {
		sprites.push( new Sprite(comet) );
	}
};


this way we eliminate the need of a custom timer and reduce the calls needed to create and maintain timer structures.

Hope it'll help :)

#15html6game – Saturday, June 30th 2012, 08:35

This very good, I do not know html5js can also apply to Xbox, read your article, I began to know that it can be run.

#16 – willcode4food – Wednesday, August 29th 2012, 20:41

I've been hearing rumors of about the next Xbox having support for HTML5. The UI formerly known as metro in Windows 8 has native HTML5 support. I am hoping the next Xbox will have the same UI components as Windows 8. And I don't think it so far fetched with Microsoft's push for a consolidated operating system across desktops and tablets. Why not the next Xbox as well?

These are just rumors and the hopes and dreams of an HTML5 developer.

#17Breno Polanski – Wednesday, September 26th 2012, 18:48

Hello Dominic, How's experiments with his game written in javascript for XBOX 360? Did you get any positive result?

Bye...

#18 – jorge – Tuesday, March 25th 2014, 15:27

i fucking need a code

Post a Comment:

Comment: (Required)

(use <code> tags for preformatted text; URLs are recognized automatically)

Name: (Required)

URL:

Please type phoboslab into the following input field or enable Javascript. This is an anti-spam measure. Sorry for the inconvenience.