Posts

Showing posts with the label Penguins Rising

Penguins Rising: Possible Multiplayer

    With my first attempt, I started to look at what Google Game Services to see what it had to offer for real time multiplayer but quickly found my answer in the documentation. Game Service "Real-time multiplayer is currently only supported for the Android platform." So I looked at Google Hangout as an option. The example I found helped me test out this theory and proved that creating multiplayer mode would be possible. However there was minor issues with latency as the example code shows and also ways to handle it. I didn't publish any code on github since there is a lot more for me to do and this year my plans are to start working more on my other games. For now its just important to make note of it so that I can pick up on it later...

Example
sendMessageApp.xml - google-plus-hangout-samples - It's sample code... for Google+ Hangout Apps

https://developers.google.com/+/hangouts/resource-management
line:188 gapi.hangout.data.sendMessage(
          JSON.stringify(());

Penguins Rising: Html5 Custom Cursor Support

Image
    Apart from the original Penguins Rising game, I thought it would be interesting to allow the user to modify or upgrade their cursor for a particular gun. However this was not possible for Internet Explore at all, even for 11! In most cases when I can not implement something in one browser or another, I simply default to the original structure.  With though IE styling breaks completely when using custom cursor so I had to scrap the idea for now. My goal for Penguins Rising has always been to support "modern browsers" and "mobile browsers". IE9 is in that grey area but IE10 is a must and because of this I have to just use the built-in cursor styling which is how it is setup right now. Sadly this limits me to only what is available in the browser's styling.


Resources
CSS cursor property
How To Create an IE-Only Stylesheet CSS-Tricks - Not helpful in my case.
css - Custom cursor image doesn't work in all IEs? - Stack Overflow

Penguins Rising: Responsive Text with the Title Screen

Image
    With little testing as possible I wanted to create a title for penguins rising that was styled and would resize based on the device. I knew how to achieve this using css media queries however I would still need to test my queries on multiple devices which would take more time to test than actually write them. So I wondered what if there was a faster way to do this. Looking around I found ways to achieve this but most required Jquery and creating an event trigger to update the text size. Which wouldn't be too difficult to create but I have removed Jquery from my solution for sometime now.

Things I looked at for this solution

Text (not changing it too often.)Font-size - scale to full width of the screen.Font-Style - Added this later but not all devices liked text strokes in css.
The answer if very clear to me and one that at the beginning I considered, but I wanted to weigh all my options first. By simply making the Title a image and setting the width to 100% should have no probl…

Penguins Rising: Caching in Google App Engine

Image
      One day while I was exploring Google's Page-speed Insights to determine whether there was anything I could possibly improve with Penguins Rising. I discovered that I was not Leveraging the browser cache. Up to this point the only type of caching I had done was with the HTML5 cache manifest, however this was different than what Page-speed insight was advising me with and this was also what lead me to my question that is the majority of what this article is about. QuestionLucky for me, I am not the only person to have asked this, but "What is the difference between a Cache Manifest and a Cache header?" As it stand with Page-speed Insight my current results with Penguins Rising (will vary) as you can see for yourself.

Using Expiration in the Content Header
You can set the expiration time however you like, I tested my application with 10 minute expiration date.
//Inside the app.yaml default_expiration:"10m"


Warning
Once you set the expiration in the header it will…

HTML5 Audio doesn't Autoplay for Chrome on Android

    Recently I was playing Penguins Rising on my nexus 7 and notice that the background music wasn't playing but strangely all the other sounds were. After a hard look at the code, I found no reason for the audio not to be work. So I could tell right away this wasn't going to be an easy fix. The first thing I did was check the support to see if  the HTML5 audio element had any support issues. Since the support for the audio element seemed to be alright with what I was using, the next thing I thought was that it must be the attribute autoplay. Its important to note that I am also using the loop attribute but I will return to that later.

Example from Penguins Rising
<audioautoplayloop><sourcesrc="content/ArcticWind.wav"type="audio/wav"><sourcesrc="content/ArcticWind.ogg"type="audio/ogg"><sourcesrc="mp3/ArcticWind.mp3"type="audio/mpeg"></audio>
Currently I have for my solution is to simply st…

CSS Side Borders for a HTML5 Game

Image
It's time to created a HTML game with a more efficient background. As it stands I have already created an effective way to display my icy landscape with the actual game load on top of the canvas. Making it so I don't have to clear the whole canvas to create animations.This is a great improvement verse what I had before,  it was a much bigger image and had everything inside it. So moving from there I separated the side borders and split them into two images. Using a Div around my canvas tag I set the left image as the background and the second image on the canvas tag itself. This was not enough I now wanted to see if I could use a single image flipped horizontally for the other side.

The Setup
<divid="game"><canvasid="window">Sorry but Canvas is not Supported</canvas></div>
First Attempt
Doing some research I found a way to flip background image. The problem was the flip effecting both images and trying to get the images to face the rig…