Building an XNA Game Studio XBox360 Indie Game.

[page 0028] ~ OK just get done what you need to to get some sound:

My Game Design Document, My Repo.

I’m really starting to love those ten things before I do that one thing.  And It’s like I have heard before, “… you will be dragged to that level only to be beaten with experience”.

Let’s dive right into my Feb game with the precepts:

What, is your name?  Sir Erythrocyte of Endocrine.

What, is your quest?  To seek the Holy Kidney.

What, is your favorite color?  Blue, no red aaah…agh!!!

But I’m getting ahead of myself.  And I, hmpf, I find myself heart broken, and a bit mystified, Erytrocyte deoxy to oxy v0.  That’s pretty much if not almost exactly what I was looking to do for my February game, very smart, sigh.

No choice but to pick up the pace, again.

It seems that I have a life expectancy of between one hundred and one hundred and twenty days.  It takes me some twenty seconds in between breaths and my main stompin’ grounds are the vein systems.  And from where do I come?  Why bone marrow of course.  Actually, I did take some college biology but that was long enough ago that my academic advisor says, [if I ever get around to achieving through my potential of degreeabilitivness as a state of my degreeabilitivity that, em-hm], I have also ‘grandfathered’ out of taking a foreign language when I do graduate, lucky me.  But, as any good red blood cell I find, it’s time for me to jump ship and get swept away with the tide.  Seeing that they, at Wikipedia, have already pretty much, if not exactly nailed the idea for the game board I was shooting for, it’s time for my February game plot to get a little rethink.  Garçon, another bottle of Château de la KISS please, if you will.


Long story short, my first and only “canvas” game runs on XBox with Internet Explorer.  How is this done you might ask?  Short story excruciatingly long, once upon a time …

Really, Processing is the API where I build and test a JavaScript game, the Processing.js <script>’s are used to “parse?” the code when it is in the web page and thusly in a <canvas>, CSS <link>’s are used to adjust the screen and HTML binds the whole thing together for navigation.  After reading a whole bunch of allot of books/webpages and digging through the given documentation, my site has its first click and play game.  Happy, happy, joy, joy, \o/.

Victory!  But, yes a caveat.

Running a canvas means a set height and width.  A PC might deal with this with a few simple clicks of the browser, but the XBox version needs some differing forethought, and testing, to present itself on the screen following the format/style and layout I have built to be my site.  Having this newly found “canvas” run on both the PC and the XBox has generated some substantial screen compatibility issues.  The canvas size is set internally within the JavaScript game logic setup code, also within the CSS formatting instructions and in the HTML used to provide acknowledgement to the page itself.  Digging out the sledgehammer and crowbar, I break and pry one of my old site pages into two new pages, one to run the canvas on the PC and one to run through the XBox.  Yes, this means building dedicated CSS’s so each will be formatted to a specific device, not optimal but doable.  But I just want some sound in this game I’m trying to build, apposed to ten more other things.  As a parting thought and a future search I am wondering if there is some sort of #directives in JavaScript.  The short answer is NO to #define preprocessor directives found in a precompiled code base, as JavaScript is an interpreted language.  I guess I’m somewhat doing a dry-run test/pseudo-precompile in Processing anyway.  Bang-Snap that idea, but the page would need to know what device it would be sending itself to and I think the device would be the one that is more concerned about what is being sent to it.  More whatever.  So much for having one HTML page with #include and #if device directive where this page then runs its CSS and script because of one browser type but if it is this other device and/or browser then run this CSS and script all from inside the same HTML page.  Browser wars precompilers and … maybe in Internet Explorer 10.

Work and Write, Preamble.

Let’s see if this works.  For the last couple of days I’ve been trying to get a canvas into my sites web page and have found that Mozilla Firefox v18.0.2 is very helpful when trying to find just how my CSS formatting is behaving in my pages.  In their Tools/Web Developer/Inspect, when the mouse points to an area of interest a dotted box outline surrounds the element in question, pretty cool.  The hints it provides shows how the layout of the page elements interact in concern to each other and brought my guess-work back to a more understandable set of pretenses.  After some fiddling around with the canvas and some other formatting issues I was able to test the “canvas” page in; Internet Explorer 9 v9.0.8112.16421, Firefox v18.0.2, Chrome v24.0.1312.57 m, and Safari v5.1.7 (7534.57.2).

Some formatting issues are, in IE9, which is my creation and base format, everything works as formatted, no issue.  In Chrome, which is the next closest format adherent, follows my CSS formatting but there is their search bar across the top of the browser, which I haven’t figured out how to hide yet, that eats into the top of my web page, effectively obscuring my navigation bar I use when running my pages in my PC browser, hm.  Firefox and Safari, in concern to the canvas object, don’t seem to keep the format when using margins and padding with the CSS I built and formatted for IE9, so be it.  I’ll just chalk that one up to me being a novice programmer with HTML, CSS, JavaScript and Processing/.js, for now.  But also, these last two don’t differentiate enough between the text and objects when using their text and objects zoom page tool features.  As you may have guessed, I don’t sit very close to the monitor and have a need to adjust accordingly.  From all this, I can see why, for my GS-XNA 4.0 XBLIG endeavor, I opted for only game pad interaction and then only having to deal with screen size as the next big obstacle, normal screen, wide screen, 720i, 1080p, 1280p, regular CRT, 1024×768, etc., yeah all that screen size stuff.  I’ll also be sticking with the XBox and not the Windows Phone platform.  That only adds too many variables in differing screen sizes, touch screen phones, pads, etc. and other compatibility issues.  But I will need to get back to my XBox game creation sooner than later, although this One Game A Month challenge and ongoing excursion has added a new twist to the entirety of indie gaming.

To the Point.

My February game, no, my March game should be able to be an on page, meal ready to eat, kind of game with instructions in the same page with scroll bars and probably some other neeto stuff.  But until then it looks like I’ll build Feb’s game in Processing, use “minim” as my sound import processor, get the code over to GitHub, have anyone who really wants to play the game load it into Processing to play it and call it a day.  To scry by these past days searches and researches has made me see March as becoming more “build the game” instead of “figure out everything else” so I can.

As a parting toss, my first “canvas” game is up and in my website.  The XBox version needs a screen setting of 1024×768 to look as intended in IE9 through the XBox 360.  It isn’t much of a game more than an exposition.  All it does is load the canvas object into the page and after it is loaded shows two sentences, one in a white font and one in an aqua font.  A mouse click in the canvas enlarges the aqua colored sentence to the point where it starts back at its initial size and also, every other click shows a large blue dot that follows the mouse pointer.  It’s not much in the line of hours of entertainment but that’s what it does.  The End.

Until the morrow, G’day.

February 15, 2013 - Posted by | 2013 [0019] to [00??], The Process

No comments yet.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s