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 (        

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. Just an idea of what could have been... 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 a

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

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 cach e . 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 .        Question Lucky 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 " An Ex

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 < audio autoplay loop > < source src = "content/ArcticWind.wav" type = "audio/wav" > < source src = "content/ArcticWind.ogg" type = "audio/ogg" > < source src = "mp3/ArcticWind.mp3" type = "audio/mpeg&qu

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 < div id = "game" > < canvas id = "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