contact avatar dev blog

August 31st, 2015

Post Mortem of Pumpi for LD33


With all that wonderful feedback in mind and while stil in development of the post compo version, I want to write a little post mortem of our Ludum Dare entry Pumpi.

First, if you don't want to read the full text and want to watch yourself what we've done, here is the link: Pumpi

And here is a little picture to make you want to play it:

Finding an Idea

That was the fastest ideafinding we've ever had in an LD. We made a short list with seven points while we played Diablo 3 and killed a bag of chips. Three of the points were: Halloween, stealing sweets and Jump'n'Run.
So it was decided that we wanted to make a Jump'N'Run game, where a monster steals sweets from children at Halloween.

First Works

At that point we began to do some creative work which should help us later. My wife drew the first concepts of the monster and the children and I made the soundtrack and after that we both fell asleep because it was 6 o'clock in the morning.

Next Day

So it begins! Our first task was, bringing the pumpkin to life! So I looked at the drawing my wife had done and made a copy of it in Photoshop, colored it and showed it to my wife. She had said yes and so I started to animate the pumpkin. 8 animations were on my list: stand, walk, jump, scare, pick up, hide, shield and die. While animating the pumpkin we were talking about how we wanted the game to be! There were so many ideas and so many things to do, that we decided to make something possible and concentrated on scaring the children and make funny animations and sounds. After completing the pumpkin animations, please take a look at the spritesheet:



we started pixelating the witch-girl. We scanned the drawing of my wife, drew the outlines and filled them with colors and shadows and light spots. The first day was done! And so were we!

The Second Day

I opened my eyes and was so tired... It was hard to hold my eyes open. But what a luck I've got a little motivating machine next to me that was saying: Wake up! We've got a game to make!
So I jumped out of bed and began to draw the animations of the witch-girl. When I was finished with that task, the coding begins. I hacked all together what I thought we could use. Some animating techniques and some camera movement that took me a lot of time, because I wanted to use some mariolike camera movement, but then decided to use a more simple one.
The day went on and after the animations and the first scare were build in bed was calling!

The Third Day

At this day we started with the background. We drew the first concepts and choosed the colors. But the first draft was... not so good... hm... So we added more colors and made some additions like the door and the window and it looked a lot better and we stayed with this.
After the background was implemented we started our funniest part of the development. The audio recordings. Screamings, Booohhhs and a bunch of other sounds and loughts were made during this time.
But we needed some more content. We needed a vampire-boy! Scanned, drawed, animated and voice added in a rush. (With shocking my wife at night, because of not warning her befor screaming).
Here is the spritesheet for the kids:



All had to be build together, a tutorial had to be included, the position of the kids had to be decided and a finish and restart had to be made. And then we had no more time for a start screen and no brain capacity for a better name... But hey, we have made a game in 72 hours and we are damn proud of it!

After the Jam

The first feedback came in and our proudness growed and we decided to make a bigger game out of it. With more kids, more scaring moves, more sounds and a start screen! But until it is done, we hope you enjoy playing the Jam Version of: Pumpi

So we wish you a big bunch of fun and hope you enjoy our little game,
ruerob.

February 16th, 2015

Making HTML5 games Wii U browser ready


One day, while I was searching the web with my Wii U's web browser, I accidentally hit my 'Walk the Plank' Gamejolt.com site. I was so excited because the game seemed to load, but when I tried to play it, it didn't seem to get the focus. I cried, I knocked my head on the table and then, when searching the internet, I found various sites, listed below, about the Wii U's HTML 5 capabilities:

Lost Decade Games
Nintendo's browser specs

I've since learned it is doable. I soon realised the possibilities that were open to me and decided, that I would make it my mission to make Walk the Plank ready for the Wii U's web browser.

Here is what I've learned so far:

Step 1: Getting the focus!

The first thing you have to know is: How can my game get the focus? I played around with events and clicking, I tried everything. Just as I thought all hope was lost, I discovered what it was, that was preventing me from getting the game focus.

The iFrame! Gamejolt.com and Itch.io HTML5 games run within an iFrame, which gets no focus in the Wii U's browser. So I had to upload it to my own page, which didn't use iFrames.

Step 2: Accessing the controls!

First goal achieved. Now let's sort the controls!

There isn't actually alot to do with the controls, because the D-Pad of the Wii U is mapped as the keyboard arrows and the A button is essentially the return key. I just had to add an event listener and prevent the event from triggering its default behavior.

First in your main function, where you create all initialising stuff, you would use:

  window.addEventListener("keydown",onkeydown,false);

and then you write a new function like:

onkeydown: function(event){

    if(event.keyCode==37)
        this.pressKeyLeft();
        
    else if(event.keyCode==38)
        this.pressKeyUp();
        
    else if(event.keyCode==39)
        this.pressKeyRight();
        
    else if(event.keyCode==40)
        this.pressKeyDown();
        
    else if(event.keyCode==13)
        this.pressA();    

    event.preventDefault();
};
      

Thats it!

Step 3: More controls?

What if you want to access more controls? Now, there are some restrictions, because all other controls are used for browser navigation in some way. But with a few tricks, you can use more of them.

Here is what you can do:
If you make your game site fit the screen completely, by scrolling out, you can use the left control stick of your gamepad, by doing the following in your games update function:

function update(){
    if(window.wiiu){
    
        var GamePadState = window.wiiu.gamepad.update();
        
        if(GamePadState.isEnabled && GamePadState.isValid){
            
            if(GamePadState.lStickX>=0.5)
              this.pressRight();
            else if(GamePadState.lStickX<=-0.5)
              this.pressLeft();
            
            if(GamePadState.lStickY>=0.5)
              this.pressUp();
            else if(GamePadState.lStickY<=-0.5)
              this.pressDown();
        }
    }

    // do game logic
}
      

For using the B, L and R buttons, you should be sure, that your game is started within a new tab. Because B and L are used for loading the previous opened site and R the next, if there is one. ZL and ZR can only be used, when all other tabs are closed, because they are for tab navigation. If you share that info with the player of your game, you can use these buttons like this:

update: function(){
    if(window.wiiu){
        
        var GamePadState = window.wiiu.gamepad.update();
        
        if(GamePadState.isEnabled && GamePadState.isValid){
            
            //here is the button code
            if((GamePadState.hold&0x00004000)==0x00004000)
                this.pressB();
                
            if((GamePadState.hold&0x00000020)==0x00000020)
                this.pressL();
            
            if((GamePadState.hold&0x00000010)==0x00000010)
                this.pressR();
            
            if((GamePadState.hold&0x00000080)==0x00000080)
                this.pressZL();
            
            if((GamePadState.hold&0x00000040)==0x00000040)
                this.pressZR();
        
            //you can also access the D-Pad and the A-Button from here if you want
            if((GamePadState.hold&0x00000200==0x00000200)
                this.pressUp();
            
            if((GamePadState.hold&0x00000800)==0x00000800)
                this.pressLeft();
            
            if((GamePadState.hold&0x00000100)==0x00000100)
                this.pressDown();
            
            if((GamePadState.hold&0x00000400)==0x00000400)
                this.pressRight();
            
            if((GamePadState.hold&0x00008000)==0x00008000)
                this.pressA();
        
            //here is the old stick code
            if(GamePadState.lStickX>=0.5)
              this.pressRight();
            else if(GamePadState.lStickX<=-0.5)
              this.pressLeft();
            
            if(GamePadState.lStickY>=0.5)
              this.pressUp();
            else if(GamePadState.lStickY<=-0.5)
              this.pressDown();
            
        }
    }
}
      

Step 4: Don't forget the touchscreen!

Oh, yes, there is a touchscreen. Wonderful. Let's try to use it.

For the touchscreen there are 4 properties in GamePadState.

tpTouch - which returns 1, if you touch your screen.
tpValidity - which is 0, when your touch was detected on the game canvas
contentX and contentY - which stores the touched position on your games screen in pixels

Let's add the following in our update routine and see if it works:

update: function(){
    if(window.wiiu){
    
        var GamePadState = window.wiiu.gamepad.update();
        
        if(GamePadState.isEnabled && GamePadState.isValid){
            //here goes the Buttons B,L,R,ZL,ZR
         
            //and here the D-Pad and the A-Button

            //here goes the code for the left Stick

            
            //here we start our touchscreen action
            if(GamePadState.tpTouch==1 && GamePadState.tpValidity==0)
                this.processTouch(GamePadState.contentX,GamePadState.contentY);
            
        }
    }
}
      

It's working! Well done! Now if you do a short tap in your game, it is seen as a mouse click. If you slide, it is seen as a mouse move! Woohooo. And the best thing is:

You didn't need the games focus when you are using the touchscreen!!! So you can actually use iFrames if you want.

Step 5: What about the Sound?

After all this is implemented, we have achieved our second goal in Wii U browser compatiblity. Now let's do the last step.

And that is a big problem on the Wii U's web browser. It only allows you to have AAC encoded music in an MPEG 4 container. That means first: You have to include a video on your games site with the background music in it. And second: The player will have to start it manually, because the Wii U browser prevents all video autoplay...

I've used Audacity and the Windows Movie Maker for that task. In Audacity I created a 20min playalong of my games background music and in Movie Maker I placed a picture on it and saved it as a movie. I uploaded this to my web space and included it the following way in my html file:

<video webkit-playsinline id="backmusic" src="music.mp4"
    width="213" height="120" controls>
</video>

You have to add webkit-playsinline to the video tag, because otherwise the video starts fullscreen and you couldn't play your game.

But what about all those cool sounds I've created for my game? They can't be played on Wii U's web browser and thats a pity. Because unfortunately all sounds have to be in a video container you can't play them when you want to...

Congratulations! We have achieved all goals on our way to make our game Wii U web browser compatible.

If you want to play 'Walk the Plank' on your Wii U browser, you can do it here:
Walk the Plank (Wii U Browser Version)
Walk the Plank (Web Browser Version)

And here is Treasure Quest, which I updated for the Wii U's touchpad:
Treasure Quest

I hope you like my first blogpost. If you want to contact me, just click on the twitter sign or the letter above and let me know what you think. Thanks for reading,

ruerob.

A big big really big big big THANK YOU goes to Liam Twose for watching over this text!!! Follow him on Twitter: @liamtwose