Game Development in Windows 8
Here are some links from the talk
Additionally, if you are wanting to make games for Windows 8 you can have a look at Construct 2 and Game Salad as an alternative to Visual Studio that are dedicated to making HTML5 games.
“ Switching from YUI3 to jQuery is a bit like switching from cooking all your own meals to eating nothing but frozen TV dinners: sure it’s easier but your long term health (or in this case your application’s health) will soon begin to suffer and not get better. ”
A comment on a blog post about SugarCRM moving to jQuery from YUI.
Following my last post on my time with Windows 8, I’d like to write about actually developing for it.
Since I’ve covered my thoughts on Windows I’m going to dive straight to Visual Studio 11. Now I’m no stranger to VS, and have used every version since VS 6. But MS has decided to introduce Metro elements into VS. This caused much wailing and gnashing of teeth. However, when I use VS I turn off all the toolbars and all the panels but the solution explorer. As a text editor on Windows, Visual Studio is hands down awesome. I’ve lamented on more than one occasion that I wish MS would strip it down and release it as a text editor, the font rendering in Visual Studio now is excellent and nothing comes close to it on Windows. The only thing that I find the least bit annoying is the ALLCAPS for Panels, but if they want it to say SOLUTION EXPLORER instead of Solution Explorer, I’ll deal.
After starting with a blank template I then proceeded to gather up some libs to use. As mentioned before I love YUI so grabbed it and brought it into my project. Reference it on the page, and what happpens? Intellisense. Now, it wasn’t full on intellisense with full descriptions, but I got code completion for code I didn’t expect. I was a little thing, but it was a nice touch. So the YUI code worked with no problem. But then I was only doing some DOM work to start with, now it’s time to really start working on the code.
I ran the game in the lastest versions of Chrome and FireFox and was disappointed, especially with audio. I had a number of sounds going at once, as well as background music, shooting sounds, explosions all from events happening on the game and not once did I have a problem with Win8 playing them. Chrome just stopped playing all sound after a few seconds and FireFox only played some of the sounds (though those sounds never stopped and was a nicer degrade over Chrome)
Never once over the entire weekend did I feel the default tools or experience got in my way. I think that is worth repeating, the tools and experience never got in my way. Something I’ve not had happen when developing for other platforms. VS was nearly flawless and the debugging experience was nice. I did not however dig deep into the libraries included with Win8, I wanted to see how Win8 HTML/JS apps played with standards. Microsoft could have taken the route of having all the “goodness” hanging off of the WinRT libraries, but instead they have used the HTML5 specs for audio, localStorage, web workers and many other advanced bits. This was especially pleasing considering the past history of embrace and extend.
I will be posting a follow up to this on the generic developer experience as well. That should be in the next few days.
* If you install Win8 please install onto machine not a VM, I found that Virtualizing Windows 8 was an unpleasant experience and everything was almost unusable from Virtual Box on my MacBook Pro
A Weekend With Windows 8
I attended a Windows 8 “Hackathon” this past weekend and would like share some thoughts on Windows 8, and in my next post some thoughts about developing for Windows 8.
Now there has been a lot of negative reactions from people about Windows 8 because basically Microsoft moved peoples cheese. There is no start button, there are two environments and there is no close button for metro apps. So when things change people complain. How many times did I miss the start button over the weekend? Not once. Not a single time did I think to myself I really need that start button here. Why? Windows 8 makes it easy find apps. It’s actually easier to find apps in Windows 8 then it is to use the start menu. So for the people complaining about no start menu, get over it.
Metro versus the desktop. A lot has been written about switching between Metro and the desktop, and there are some legitimate concerns. While not jarring, or even distracting, every time I switched between a desktop app and a metro app I was reminded why Microsoft is moving to metro apps, an app isn’t about chrome, it’s about the app. An App should stand on it’s merit, and the os should get the hell out of it’s way. Metro makes that happen. Hopefully this will motivate existing app makers to get on to making metro versions of their apps.
How do I close an app? Grab it and dump it. Was easy when you see it done. There are lots of things like that in Windows 8. Once you know how to do something that becomes crazy simple to do. Microsoft will have to work at. Of course a few quick intro slides on setup would get it into peoples heads. It is that easy, but it’s only easy if you know about it.
There were lots of little things about Windows 8 that I like, things like the file explorer (that had a lot of nerd rage about the ribbon) that while had the ribbon, it got out of the way and actually gave me more room than in previous versions. Another thing is Live tiles in Metro. I love live tiles and Metro allows apps to establish an ongoing relationship with users without even opening an app.
It is a preview release, so nothing is perfect. But for a preview it was pretty solid and the only real issue I had was a mac bootcamp driver crashing. Here’s hoping that Microsoft can really nail this release. Hopefully I’ll have up a developing for Windows 8 post in the next day or so.
Auckland JS Follow Up
I gave a talk at the Auckland JS Meetup and I thought I’d put some links for some additional info.
For writing command line apps with Node.js
Using Titanium Studio with node.js
Hope this info helps someone and if you have any questions hit me up on twitter or email me kevin @ kevinisom.info
Getting to know the YUI 3 Overlay
I am a
big huge fan of the YUI Framework. Now YUI is full of awesomeness. One of the most awesome widgets is the Overlay and that’s what this post is all about.
Setting up an Overlay.
This first JSFiddle below shows an overlay being constructed and it’s contents filled by the srcNode, it’s width set to 300px, and render being set to true tells YUI to render it into the dom.
Now I’m sure you’re thinking that’s not very interesting. And it’s not, however by setting a few additional properties and applying some additional css hopefully I can show just how useful it can be.
In this example the overlay uses the centered and constrain attributes to show over the div simulating an ajax request while the content is swapped out. The centered attribute centers the widget in the viewport, or if a Node is passed (as in this instance) in, it will be centered to that node. The constrain attribute sets the node to constrain the widget’s bounding box to.
Lastly using the plugin functionality that YUI exposes adds animation for showing and hiding the overlay. The Animation Plugin example shows how something like that is made.
In this sample by setting the align property and some css (inspired by this blog post on it) you can achieve some nice looking (well relative in this example, the colors are a little rough) tooltip with very little code. A much easier to manage option instead of bringing in a library you have no control over just for tool tips.
The align attribute is used to align a reference point on the widget, with the reference point on another Node, or the viewport. The attribute takes a node as the first argument followed by an array of points. The WidgetPositionAlign class has constants defined for this.
Extending from the Gallery
The YUI Gallery has some great plugins for the overlay.
I hope this has helped show how useful and versatile the overlay control is. As I mentioned when I started, I think the Overlay is a great example of just how powerful YUI is. After all the overlay is 1 line of code
Y.Overlay = Y.Base.create("overlay", Y.Widget, [Y.WidgetStdMod, Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionAlign, Y.WidgetPositionConstrain]);
That’s it, simply mixing in a number of different small classes you can get a lot of functionality
No Browser Left Behind
IE6 users don’t deserve to use the internet.
Die IE6 DIE!
Your browser sucks.
So that’s it. Don’t make those older browsers work hard. If you want to have a form popup in an overlay, allow a user to fill in the details, submit it to the site, have the overlay fade away and then update any relevant page elements with data from a callback. That’s a lot of work for those older slower browsers. Not only is it a lot of work for the browser, the further you have to go back the more work it is for the developer. However have the default behavior actually take a user to a page that has the form in it, have the form then post to the server, and then redirect the browser back to the default page and have the server render the updated html.
Now that may sound like a lot of work, but really, more than likely it is. Most script libraries that do that sort of thing already let’s you structure your markup that way. This way you have handled both the older browser as well as the scriptless browser, and as long as you followed accessibility guidelines you should be sorted with screen readers fairly well too.
NPM Packages on Windows
With all of the progress on getting node.js to run on windows people may want to start writing complex apps with it. Well at least apps that use more than what’s shipped with it. Now on Linux or OS X that means using npm. Unfortunately npm is still a long way off for windows by the looks of things (it currently uses symlinks and Windows XP doesn’t have symlinks) but you can still use all of those packages at npmjs.org it just means more work.
First find a package you will want to use. In this case I want to write a new web app with express.js. Express.js is a web framework for node and is similar to sinatra for ruby. You can use the search functionality available on the npm site to find the express package. You will see the description, version, dependencies, repository, and node engines listed. Take note of the dependencies, you will have to repeat these steps for all the dependencies. Download the latest tgz file (at the time I’m writing this, it’s 2.4.6) Unpack the file and rename the folder from package to express. Repeat that for connect, qs, and mime, as well as jade (or any other template engine you want to use.
After downloading and renaming all the packages, copy them to a folder called node_modules in your project. You will want to make sure you add the folder to your ignore list for your version control. Unless you’re going to deploy to a windows machine with IISNode as solutions like Heroku and Nodester will install your dependencies for you.
Finally you will want to create a package.json and list your dependencies so when you deploy or someone wants to use your app they can use npm to install the dependencies and run your app.
So you should end up with a project directory that looks something like this
Hopefully this all makes sense, and here’s hoping that npm will be coming to windows in the near future. So get going and write some node apps.
My experience using Eclipse on OS X tends to be, keystroke, keystroke, rainbow wheel of doom, keystroke, keystroke, rainbow wheel of doom. Keystroke, rainbow wheel of doom,
curse close Eclipse, open Textmate.
I find it funny that AngryBirds was shown off at Google IO, made with GWT and runs so much better in IE 9 than Chrome