HTML5 Canvas scrolling in Win8 and IE10 – taterboy
October 28th, 2012 | Filed under: Games, Tips

This week Microsoft released Windows 8, it’s *13th Operating system, and with it the 10th version of Internet Explorer. Win8 promises to be an OS that works and looks the same across multiple devices. So you might be surprised when you try to interact with your HTML5 site/app/game in IE 10 on a tablet. Moving your finger around the page does not register, scrolling or dragging horizontally actually moves the browser window or creates a new tab; depending on the direction.



Luckily there’s a simple fix, when preparing your HTML5 web app for IE10 on tablet, remember to add the “-ms-touch-action” css property to the Canvas tag and set the value to “none”.

<canvas id="html5-canvas" style="-ms-touch-action:none;"></canvas>

This property lets IE10 know that the Canvas app is not static content, allowing all those gestures to be picked up by the app or game.

Learn more about -ms-touch-actions, as well as other IE css tags.

As a side note, I’ve been very impressed with the speed and snappiness of Windows 8 on a tablet. It screams and is super responsive to touch.

Disclaimer: This Article was written while the author was employed by Microsoft.

*History of Windows.

Technorati Tags: , , , , , , , , ,

| No Comments »

How Mobile Technology Can Create Smarter Homes – taterboy
January 10th, 2012 | Filed under: Games, General Info, iPhone, Video

According to CNET, there were about 1.2 billion mobile broadband subscriptions in 2011, mobile computing is quickly becoming the primary computing platform. As a developer, mobile is an exciting place to be and the technology and landscape is changing every day. So what do we make of products like Google TV?

With so many companies trying to shoehorn every possible online service onto a tiny screen, do we really need to think about a technology that is stuck in one place, where people spend very little time these days? Web TV came and went in the 90s, with little success at bringing web services to the sofa; but, is cramming everything into a mobile device the right way to go either?
Read More »

Technorati Tags: , , , , , ,

| No Comments »

AS3-101: Game Development Part 3 – taterboy
October 2nd, 2011 | Filed under: ActionScript 3, Flash, Flash AS2 to AS3, Flex, Games, Tutorials

This tutorial is the third part in a series on game development with AS3. We will pick up where we left of in the last tutorial which can be found here: ActionScript 3 101 : Game Development part 2

In the previous tutorial we made a MovieClip of a ball move back and forth by pressing the left and right arrow keys on the keyboard. We accomplished this through the use of a variables, functions and events. In this tutorial we will continue to modify our existing code by adding a couple new functions and create something that will begin to resemble an actual game.

The Swap:
The first thing we need to do and swap out the ball artwork with a spaceship graphic. The graphic included with the source is the same dimensions as the ball, which was 72 x 72 pixels. You can use the one in the source code below ( just copy it into your project and delete the ball) or build your own.




Read More »

Technorati Tags: , , , , , , , ,

| 1 Comment »

Pyramix: New and Noteworthy According to iTunes – taterboy
June 7th, 2011 | Filed under: Design, Games, iPhone, Reviews

We are pleased that our latest application, Pyramix, was listed in the New and Noteworthy section of the iTunes Store for iPad word games.



In the last couple months we have released 7 of our own iPhone, iPad and Android applications. Here’s the rundown.
Read More »

Technorati Tags: , , , , , , ,

| No Comments »

AS3-101: Game Development part 2 – taterboy
June 1st, 2011 | Filed under: ActionScript 101, ActionScript 3, Flash, Flash AS2 to AS3, Flex, Games, Tutorials

This tutorial is part 2 of the ActionScript 3 101 : Game Development series. For part 1, go to ActionScript 3 101 : Game Development part 1

In part 2, we will continue animating a ball on stage, but this time we will setup keyboard controls so that a user can control the animation of the ball’s x property.

Before we move into the keyboard event listener, we should structure our code to be more organized and flexible. The top of the actionScript is where I like to put all my variables and things that configure how the game runs. As a general rule, any values that are used more than once or could change should be stored as a variable. Notice the left and right bounds for the ball ( 20 and 455) are used more than once, we should change them to a variable to make our code more flexible. Later in this series, we will move some of these variables from the top of the code to an external xml file, this will make your game very tweak-able without republishing from Flash. The secret to flexible code is lots and lots of variables.

New Variables:

?View Code ACTIONSCRIPT
var boundsLeft:Number = 20;
var boundsRight:Number = 455;
var maxSpeed:Number = 10;

Read More »

Technorati Tags: , , , , , , , , , ,

| No Comments »

AS3-101: Game Development part 1 – taterboy
April 21st, 2011 | Filed under: ActionScript 101, ActionScript 3, Flash, Flash AS2 to AS3, Games, Tutorials

This series has been taught to a few students over the last couple years with the intention of making it into a video tutorial series, but due to the lack of time and fear that it will never happen otherwise, we are going to have to do this old-school.

The series was originally taught in Flex / Flash Builder, but with so many Flash AS2 developers still learning AS3, this is a great program for new and old developers who want to develop Flash games using actionScript 3. This tutorial series will be focused on the Flash IDE, if you want a Flash Builder version of this series, please request it in the comments below.

Getting Started:
The foundation of any game is providing a way for users to control elements on the screen. At our game’s core is these 4 lines of code.

?View Code ACTIONSCRIPT
// 1B
function frameHandler(ev:Event):void{
	ball.x += 10;
}
 
// 1A
addEventListener(Event.ENTER_FRAME, frameHandler);

Read More »

Technorati Tags: , , , , , , , , , ,

| No Comments »

MoveThis: Another AS3 Tweening / Animation Engine – taterboy
February 1st, 2011 | Filed under: ActionScript 3, Flash, Flex, Free Components/Classes, Games, Tutorials

UPDATE 1.20, 4/21/11 : new source files below

Animation is the primary reason our clients choose Flash based applications over HTML or any other language. Creating applications that dance is the “Rich” in RIA development.

Great animation or tween engines are plenty, GTween, TweenLite and Tweener are just a few. They provide a simpler way of animating with code. The Flash IDE team has also gone to great lengths to make working with animation in code easier for the designers. Even Flash Builder 4, which one could argue is a programmers tool, has new animation classes that are far more powerful than their predecessors.


Interactive Demos below…

Animation is what makes Flash, Flash:
MoveThis has been around in many different forms as my personal tween engine for the last 8 years. I think it’s finally in a condition that it can be shared. The idea has always been one line of code to make something move, it’s extremely simple to use, yet supports many great features.
Read More »

Technorati Tags: , , , , , , , , , , ,

| 2 Comments »

SoundTrack an AS3 Sound Helper Class – taterboy
January 4th, 2011 | Filed under: ActionScript 3, Audio, Flash, Flex, Free Components/Classes, Games, Tutorials

Working on games and other projects that include many audio streams and sound effects can require a fair amount of code to manage the numerous channels and soundTransforms. This helper class started as a way to provide simple pause, play, stop and resume controls without all the channel mess. Another requirement was to make adjusting the volume and panning easier, maybe even allowing the use of existing tween engines to fade volume which was achieved by using volume as a property, instead of a method or SoundTransform.

Volume and Panning:

?View Code ACTIONSCRIPT
soundTrack.volume = 0; //(Number 0 - 1)
 
soundTrack.pan = -1; //(Number -1 - 1)

Tween engine sample using GTween:

?View Code ACTIONSCRIPT
var tween:GTween = new GTween(soundTrack,2,{volume:0});

note: GTween by Grant Skinner can be found here: http://gskinner.com/libraries/gtween/

Once a sound object is created, it can be place into a SoundTrack.

How to use:

?View Code ACTIONSCRIPT
//create a new sound and soundTrack
var audioFile:Sound = new Sound(new URLRequest("audio.mp3"));
var soundTrack = new SoundTrack(audioFile);

Read More »

Technorati Tags: , , , , , , , ,

| 2 Comments »

Hidden Marvels in Flash: Jpegs with Transparency – taterboy
September 11th, 2010 | Filed under: Design, Flash, Flex, Games, Tutorials

Ever need a compressed bitmap file with 24 bit transparency, but with the application being delivered over the web, you also need that file to be small? Gif files only have 8bit – aliased transparency and a 256 color limit. 24bit png files have transparency, but are lossless and are often produce large file sizes. Jpegs are perfect compression-wise but do not include transparency, or do they….



Read More »

Technorati Tags: , , , , , , , ,

| 1 Comment »

Hidden Marvels in Flash: Gapless MP3s – taterboy
September 11th, 2010 | Filed under: Audio, Flash, Flex, Games, Tutorials

Gapless MP3s

Ever try to loop an mp3 file in Flash or Flex? It can be done, but there’s normally an annoying gap every time the audio loops. This gap is just a part of mp3 compression and there’s nothing that can be done about it.

Example:
Take an aiff or wave file, open it in your favorite sound editor and make a loop (remove all gaps at the beginning and end of the file). Now save the file, first as an aif or wave, then as an mp3. Now close the files and reopen them. Notice the mp3 file has a gap at the beginning and end of the waveform, the wave and aiff files do not.



Read More »

Technorati Tags: , , , , , , , ,

| No Comments »

  • Page 1 of 2
  • 1
  • 2
  • >