Developer Console
Appstore Blogs

Appstore Blogs

Want the latest?

appstore topics

Recent Posts

Archive

Showing posts by jesse freeman

November 17, 2014

Jesse Freeman

While Friday was our last day of re:invent, our booth was open during the entire conference.

A lot of work and planning goes into each of our booth setups and our re:invent one was by far our biggest. We used the opportunity to not only show of our hardware including the Fire phone, Fire tablet and Fire TV but to also highlight all of the great apps and games available in the Amazon Appstore. Our booth was broken up into three zones helping show off all that we have to offer developers interested in publishing to the Amazon Appstore.

Firefly Zone

At the main zone, we featured “every day” objects you can identify with our Firefly feature available on the Fire phone and the newest Fire tablet HDX 8.9.

With Firefly you can not only scan in real world objects to identify them but also identify numbers, addresses and even names from business cards and posters. Event better is that this API is available to developers to use as well. To learn more, check out this section on our dev portal.

Hardware Zone

At our next zone was the actual hardware, which allowed people to explore and play with our phone and tablets.


We demos all three of our new tablets, the HD 6, HD 7 and HDX 8.9. Each of these devices feature our latest Fire OS which is based on Android and people visiting our booth could not only play with the apps and games already installed but were invited to bring their own APKs and test how things run right there on the spot.

Fire TV Zone

Finally, our last zone was dedicated to Fire TV. This was one of our most heavily trafficked areas and the large HD TVs really showed off all of the great streaming videos, apps and games available to Fire TV customers.

Of course games like Flappy Bird Family, Asphalt 8, Badland, Worm Run, Gunslugs and many more were incredibly popular with those who stopped by for a quick gaming session.

The booth was a great success and it’s really great to offer attendees some hands on time with our hardware as well as offer a platform to showcase all of the great apps and games in the Amazon Appstore. Are you a developer with an app or game in the Amazon Appstore and looking to be featured in our next booth setup? If so, tweet us a link to your creation in the Amazon Appstore to @AmazonAppDev and we’ll take a look.

If you missed us at re:invent, make sure to check out the day one, two, and three summaries as well as the videos of each session when they get uploaded to YouTube in the next few days.

Now Is the Time to Submit Your Apps for Fire

Create immersive apps that respond to the way a customer holds, views and moves the phone. We have updated Appstore Developer Select, Amazon Mobile Ads API, and Amazon Testing Services with more incentives:

  • Appstore Developer Select: Optimize your apps for Fire phone and get enhanced merchandising and 500,000 Amazon Coins incentives for your customers. Get the details here.
  • Amazon App Testing Service: Most Android apps just work on Fire mobile devices. Test your app's compatibility in 90 seconds by dragging and dropping your Android APK into our testing tool. Sign up for a free developer account to test your app's look and feel on devices and get the results within 6 hours. Test your app now.

- Jesse Freeman (@jessefreeman)

 

November 04, 2014

Jesse Freeman

It’s time to kick off a new developer series on the Amazon Developer Portal. These interviews help to highlight how developers on our platform are using our services and tools. To help promote how we are making publishing Web Apps a first class citizen on Fire Tablet, we sat down to interview SB Nation. Chris Hines, SB Nation's Sr Product Manager, tells us about how they are leveraging responsive design, HTML5 and our web app publishing tools to deploy their fan-centric sports community sites to Fire Tablet users.

Can you tell us a little bit about SBNation and your products?

SB Nation is the fastest-growing online sports media brand and the largest network of over 300 individual fan-centric sports communities. From the beginning, SB Nation has focused on developing the highest quality grassroots sports sites on the web, recruiting only the most respected web-native journalists to build their communities. SB Nation's audience consistently ranks as the most affluent and influential in the sports category.

SB Nation is published on Chorus, Vox Media's proprietary modern media stack. Chorus supports seven different verticals, over 300 individual communities, and thousands of writers.

Why did you choose HTML5 as your development platform?

Our sites our completely responsive at this point and when Amazon reached out about being a partner in their HTML5 program, it was really a no-brainer way to seamlessly enter the Kindle App marketplace.

Have you found HTML5 to be an easy platform to scale on?

Absolutely. We already have almost 70 apps running with only minimal development effort from our team.

Talk about your move from Web to mobile. What hurdles have you faced and what successes have you had?

The move from web to mobile was really very natural for us. Our audience was increasingly discovering and using our sites on their mobile phones and tablets (a percentage that is still growing every day). That led us to prioritize the development and performance of our mobile experience. The switch to a fully responsive experience across all of our sites was not without it's challenges, but it has ultimately been very fruitful for us.

How did you hear about publishing HTML5 apps on the Amazon Appstore?

Amazon reached out to us about being a partner.

Can you describe the process and how you got your web apps ready for the Amazon Appstore?

The process was very simple. We connected with an Amazon rep who got us squared away with a login for the developer console on Amazon. We pulled together an XML file of a number of our sites and passed that over to the team at Amazon. Less than a week later, our apps were live.

Were there any special modifications you needed to make to your site in order to get them working with the Web App Tester?

No changes were needed at all. It was very simple.

What are your thoughts on the move from Web to mobile for HTML5 developers?

For publishers, the mobile web will always be a large source of traffic, given the in-app browsers for large traffic sources (Twitter and Facebook) and search traffic, but HTML5 wrappers are very good ways for developers to take advantage of the native app experience and audience

What advice do you have for other companies that are leveraging HTML5 on the Web in order to make the move to native stores such as the Amazon Appstore?

Ultimately, the move to developing in HTML5 will be a benefit to the performance and flexibility of a web app and limit the specific development necessary for a native app thanks to stores like the Amazon Appstore.

Anything else you would like to add or say about the platform, your experience working with it or about the Amazon Appstore in general?

It has been a pleasure working with the Amazon team. Everything has been very simple and straightforward.

Wrapping Up

SB Nation is just one of many companies taking advantage of our HTML5 publishing tools for Fire OS. If you are looking for more information on how to publish your own Web Apps to Fire OS and any of our devices, make sure to get yourself a free developer account at http://developer.amazon.com and checkout the following links.

About Chris Haines

Chris Haines is the Senior Product Manager for Audience Development and SB Nation at Vox Media. In this role, Chris leads product development for Vox's SB Nation property and leads up all product efforts on Vox Media's Audience Development team.

Related links:

- Jesse Freeman (@jessefreeman) is a Developer Evangelist at Amazon focusing on HTML5 and Games for the Amazon Appstore.

 

October 29, 2014

Jesse Freeman

With the launch of the Amazon Fire TV stick, there has never been a better time or more developer friendly device to realize your own dreams of building apps for the living room. And, with an incredibly low price point of $39, it is one of the most affordable devices on the market for creating apps and casual games intended for the big screen. The best part is if you are already building for Android, especially Fire TV, the Fire TV stick is another great platform to help grow your audience.

In the following post we’ll cover how to get started, optimizing for Fire TV Stick as well as the hardware/software differences between the Fire TV Stick and Fire TV to help make your apps and games run great on both devices.

Android Developers Can Easily Tap into New Audience

Now is the perfect time for Android developers to get into the growing streaming device segment with their existing Android app or create something entirely new, designed specifically for the Fire TV Stick. In addition to media-centric apps, casual games that feature local multi-player options are also becoming very popular on these types of devices.  

Android developers will find that developing for Fire TV Stick is familiar, and optimizing their apps for the new controllers and TV display will not require learning a new language or new frameworks. Fire TV Stick runs Fire OS, which is based on Android. This means that it is easy to bring an Android APK to Amazon devices, including Fire TV Stick. Amazon Fire TV Stick offers Android apps a potentially new set of customers to engage with – all through the same Amazon Appstore.

Click here to download the Fire TV SDK and learn more

Getting Started is Easy

If you are already building Android apps and games, chances are you have everything you need to get started. Simply connect over WIFI with the Android Debug Bridge (ADB) and either manually push your APK via the command line or use your IDE of choice to push the build for you. We support a range of IDEs including Android Studio, Unity, or other IDEs that can create an APK. While most APKs will work without any changes, there are a few things you should keep in mind:

In addition to the SDK and documentation, publishing to the Amazon Appstore is free, so if you have an app you think would be great for Fire TV stick, get started testing and submitting it today!

Optimizing Fire TV Apps For Fire TV Stick

Do you already have a Fire TV app? Well the good news is that your existing Fire TV app should run on Fire TV stick. The biggest things to keep in mind are the subtle differences in specs between the two devices. While the Fire TV Stick is incredibly powerful, given its size and price point, you will still want to test and optimize existing apps and games to account for the hardware performance differences from the Fire TV. For existing Android developers, you are probably already familiar with having to support difference devices ranging in performance, so your normal testing process should still apply here. To help, here are a few things to keep in mind:

  • Less available RAM (1GB split between video and system memory in SD02, 2GB in Fire TV)
  • Broadcom Dual Core 1 GHz Cortex A9 CPU (versus Qualcomm Quad Core Krait 300 in Fire TV)
  • Broadcom VideoCore IV GPU (versus Qualcomm Adreno 320 in Fire TV)

Looking for some more details on the differences between the Fire TV stick and the Fire TV? Below you will find some of the important specs between both systems to help you better understand how to optimize your Android app for the Fire TV stick.

Fire TV Stick Remote

The most important thing you'll need to know is that the new Fire TV stick has its own dedicated remote with same buttons as the standard Amazon Fire TV voice remote. Here is button layout:

All of these buttons can be accessed via stranded Android key press events. For more information, check out the Fire TV input documentation.

Likewise, you can also detect which Fire TV platform you are on or the name of the attached remote/controller via the following properties:

Item

Amazon Fire TV

Amazon Fire TV Stick

android.os.Build.MANUFACTURER

"Amazon"

"Amazon"

android.os.Build.MODEL

"AFTB"  (Fire TV only) 
 
"AFT*" (all Fire TV devices) 
 
"AFTM"  (Fire TV Stick only) 
 
"AFT*" (all Fire TV devices) 
 

Input Device Name (Fire TV remote)

"Amazon Fire TV Remote"

"Amazon Fire TV Remote"

Input Device Name (Fire Game Controller)

"Amazon Fire Game Controller"

"Amazon Fire Game Controller"

Fire TV and Fire TV Stick Hardware

Here is a summary of the main differences between the Fire TV and Fire TV stick's hardware and specifications. One thing to point out while optimizing your app or game is that on the Fire TV stick the 1 GB of RAM is split between the system and the GPU. Also, while 720p is listed as a supported resolution, you should simply build for 1080p (xhdpi) and the Fire TV OS will downscale to 720p for you automatically.

Item

Amazon Fire TV

Amazon Fire TV Stick

Screen resolution (px)

1920 x 1080 (1080p)

1280 x 720 (720p)

1920 x 1080 (1080p)

1280 x 720 (720p)

Density (dp)

320 (1080p)

213 (720p)

320 (1080p)

213 (720p)

Density Identifier

xhdpi (1080p)

tvdpi (720p)

xhdpi (1080p)

tvdpi (720p)

Storage

8GB

8GB

RAM

2GB

1GB (512MB system, 512MB video )

System on Chip (SoC) Platform

Qualcomm Snapdragon ARMv7

Broadcom BCM28155 (Capri)

CPU

Qualcomm Quad Core Krait 300, up to 1.7 GHz, 2MB L2 Cache (APQ8064T)

Dual Core 1 GHz Cortex A9

GPU

Qualcomm Adreno 320, 400 MHz

Broadcom VideoCore IV GPU/VPU (Capri VC4 device)

Networking: WiFi

802.11 b/g/n; 2x2 MIMO

(2.4 GHz & 5.0 Ghz dual band)

802.11 b/g/n; 2x2 MIMO

(2.4 GHz and 5.0 GHz dual band)

Networking: Ethernet

10/100 Base-T

No

Bluetooth

Bluetooth 4.0

Bluetooth 4.0

Device OS/Platform Software

Amazon FireOS 3.0; Based on Android 4.2 (Jelly Bean), API Level 17

Amazon FireOS 3.0; Based on Android 4.2 (Jelly Bean), API Level 17

 

Fire TV platform software v1.1

OpenGL Properties and Limits

The following table shows the OpenGL properties and limits for the Fire TV and the Fire TV Stick for 3D games and graphically intensive effects in your app.

Item

Amazon Fire TV

Amazon Fire TV Stick

GPU

Qualcomm Adreno 320, 400 MHz

Broadcom VideoCore IV GPU/VPU (Capri VC4 device)

OpenGL Version

OpenGL ES 3.0 V@66.0 AU@04.04.02.052.050 (CL@)

OpenGL ES 2.0

MAX_TEXTURE_SIZE

4096

2048

MAX_CUBE_MAP_TEXTURE_SIZE

4096

2048

MAX_RENDERBUFFER_SIZE

4096

2048

MAX_VERTEX_TEXTURE_IMAGE_UNITS

16

8

MAX_TEXTURE_IMAGE_UNITS

16

8

MAX_COMBINED_TEXTURE_IMAGE_UNITS

32

8

MAX_VERTEX_UNIFORM_VECTORS

256

300

MAX_FRAGMENT_UNIFORM_VECTORS

224

300

MAX_VERTEX_ATTRIBS

16

8

MAX_VARYING_VECTORS

16

8

MAX_VIEWPORT_DIMS

4096 x 4096

2048 x 2048

What Are You Going to Build?

As a child, growing up playing on home consoles, my dream was to always make games for the TV. Now with affordable and easy to developer for devices like the Fire TV Stick and of course Fire TV it’s never been easier for developers to realize a similar dream. You no longer need expensive dev kits and complicated coding languages to build your first app or casual game for the TV. The only question is what will you build? To help you get started, check out the links below in the resource section to realize your own dreams of building experiences for the living room.

Additional Resources

- Jesse Freeman (@jessefreeman) is a Developer Evangelist at Amazon focusing on HTML5 and Games for the Amazon Appstore.

 

October 27, 2014

Jesse Freeman

Less than seven months ago, Amazon introduced Amazon Fire TV, and it quickly became the best-selling streaming media box on Amazon. Today, Amazon is bringing the same experience customers love about Amazon Fire TV—ease of use, great performance, and vast selection—to a smaller and even more affordable device.

Introducing Fire TV Stick, a tiny stick that connects to the HDMI port on your HDTV for instant access to movies, TV shows, music, photos, apps, and games. Fire TV Stick is just $39 and is available for pre-order starting today at www.amazon.com/fire-tv-stick and will ship November 19.

As a thank you to Prime members, Fire TV Stick is available for two days only for just $19 on Amazon.com. Customers who are new to Prime can sign up for a free trial and also receive this special price. Eligible customers get a free 30-day trial of Netflix and Amazon Prime when they purchase Fire TV Stick.

The Most Powerful Streaming Media Stick

The Amazon Fire TV Stick has serious hardware specifications. Included inside of its streamlined thin case are a dual-core processor, 1 GB of RAM, 8 GB of storage, dual-band, dual-antenna (MIMO) Wi-Fi, support for 1080p HD video and immersive audio with Dolby Digital Plus surround sound. At its core, the Fire TV Stick is simple to set up and easy to use, just plug it into a HDMI port on your HDTV and you're ready to run apps and casual games like Monsters University, Ski Safari, and Flappy Birds Family in minutes. The Fire TV stick even comes with its own dedicated remote and of course you can also connect the optional Amazon Fire Game Controller.

Click here to learn more about the Fire TV Stick.

Android Developers Can Easily Tap into New Segment

Now is the perfect time for Android developers to get into the growing streaming device segment with their existing Android app or create something entirely new, designed specifically for the Fire TV Stick. In addition to media-centric apps, casual games that feature local multi-player options are also becoming very popular on these types of devices.  

Android developers will find that developing for Fire TV Stick is familiar, and optimizing their apps for the new controllers and TV display will not require learning a new language or new frameworks. Fire TV Stick runs Fire OS, which is based on Android. This means that it is easy to bring an Android APK to Amazon devices, including Fire TV Stick. Amazon Fire TV Stick offers Android apps a potentially new set of customers to engage with – all through the same Amazon Appstore.

Click here to download the Fire TV SDK and learn more.

Millions of Customers: Fire Devices, Android Devices, and Blackberry

The Amazon Appstore has never been available on a broader selection of devices and platforms.  Fire TV Stick is the newest addition to the Fire device family that includes recently released Fire tablets, Fire phone and Fire TV.  The Appstore is preloaded on all Fire devices, so when a developer submits their app to the Appstore they have the opportunity to reach customers no matter where they are and what device they’re using.

The Amazon Appstore for Android is also pre-loaded on millions of Android devices and hundreds of thousands of Android customers have already downloaded the Appstore on their own. We recently announced that the Amazon Appstore is preloaded on BlackBerry 10 devices throughout the world, giving developers access to even more customers. Plus, the latest Amazon shopping app fully integrates apps and games into the shopping experience enjoyed by millions of customers. So when customers are searching for products in the Amazon shopping app, they’ll also discover relevant apps and games that they may also enjoy.

Take Advantage of the Holiday Season Sales Spike

Fire TV Stick is launching just in time for the holiday shopping season. Amazon device activations historically surge during this period. According to Flurry Analytics, Christmas sees the highest number of device activations for Amazon—24 times the number for a typical December day in 2013, a bigger bump than other major tablet and smartphone manufacturers—so now is the time to develop a new app or bring your existing Android or web app to Fire tablets, Fire TV, Fire phone and Fire TV Stick.

Click here to submit your Android app or game.

Now is the Time to Submit Your App for Fire TV Stick

Reach new customers and expand your reach to the living room with Fire TV Stick.  Submit your app now to make sure it’s available when Fire TV Stick launches November 19th.

Additional Resources:

September 26, 2014

Jesse Freeman

Are you a game developer already publishing Android games or looking to get started? Need a small, affordable tablet that is not only good for testing but can also play games and help you develop your own?

Well the new Fire HD 6 is an excellent gaming device in disguise, as well as the ultimate digital companion for game developers. At the low price of $99, you get an incredibly well built 6” Android based tablet powered by Fire OS and leverages the Amazon Appstore. This is the one device I have been incredibly excited about, and I wanted to add it to my game development toolset from the moment I got my hands on it.

The Perfect Size For Gaming

I have a wide collection of tablets ranging from 13” all the way down. The one thing I have noticed is that for larger devices, it’s sometimes uncomfortable to play games on for long periods of time without my hands getting tired. Also, my hands are used to the size of game controllers and mobile gaming devices. The Fire HD 6 is roughly the same size and thickness of the base of the Nintendo 3DS XL. That means for games with virtual controls on the screen, it feels more natural to hold the tablet; you still have enough room for your thumbs and the controls without blocking the action.

Games like Grand Theft Auto San Andreas, Minecraft, Terraria, VVVVVV, Thomas Was Alone, Delver and many others with on-screen touch controls work great! Especially games where you can customize the size and position of the virtual controls, allowing you to maximize your view of the game will feel more natural on a 6” tablet. The other thing exciting about this device – and many of our other tablets - is the fact that you can also connect a Bluetooth game controller and create a portable Android gaming experience. Playing GTA with the controller, as it was intended to be played, is great. If you have an Amazon Fire Game Controller, connect it up to the Fire HD 6 and enjoy an incredibly portable gaming device. Also, with the new SlimPort connector, you can even connect the Fire HD 6 to the TV with a controller and play games on the big screen.

Game Developer's Companion

In addition to the Fire HD 6 being a capable gaming device, it’s also the perfect digital companion for game developers. Of course using it as an Android based testing device is probably number one in most developer’s minds. The fact that it runs productivity apps as well will help you even more. I use my Fire HD 6 as a digital sketchpad. With a copy of Sketchbook Pro, Wacom’s Bamboo Paper and a touchscreen stylus I am not only able to sketch out all my game ideas, literally in the palm of my hand, but I also don’t have to worry about my hand accidentally resting on the screen causing streaks in my artwork. The Fire HD 6 is a little bigger than the traditional moleskine notebooks I used to carry around, and with everything backed up in the cloud, I no longer worry about losing any of my drawings.

I also take lots of digital notes. I collect articles, websites, jot down ideas, or build to-do lists while I am working on a given project. The Amazon Appstore has Evernote, OneNote and may other note taking apps you probably already use on a daily basis. And since each of these solutions also takes advantage of cloud syncing, my notes are always with me wherever I go. I can easily jot down stuff on my computer and follow up on the go with my Fire phone, or use it as a companion next to my computer while I code.

Enabling Indies

Of course the Amazon Appstore has some big name games, but my own personal interest in mobile gaming is with indie devs and hobby developers. The Fire HD 6 is a new market for indie devs looking to reach customers looking to get an affordable small form factor tablet. There has never been a device at this size or price point from a well-known company such as Amazon that will appeal to consumers. Amazon already has a loyal fan base and adding a more affordable tablet to its holiday lineup means access to even more screens this holiday season.

Here in New York, I’ve been working with local indie devices such as Golden Ruby, who recently launched their hit game Worm Run on Fire tablets and Amazon Fire TV. Because they’re already part of the Amazon Appstore, they’re automatically available on the new line of Fire tablets.

Not only does their game look great on the new device, but since they take advantage of a single binary across all of our devices, Worm Run also supports a Bluetooth controller too. This means that developers who are already taking advantage of the Amazon Appstore and hardware ecosystem continue to grow their customer base as we bring new devices to market.

Developers like Charlie Schulze, who works part time on his games outside of his day job, is also excited about supporting the new Amazon devices.

His latest game, Squiggle Racer, has been growing in popularity on multiple platforms and it is great to see him bringing his game over to the Amazon Appstore. Not only can he now target this new Android powered device with his existing APK, but by adding in GameCircle and controller support, he can now reach customers across our entire family of devices from the Fire phone to Fire TV and of course all of our Fire tablets. Leveraging his current Android build, he was able to not only get his game up and running on our devices quickly, but also take advantage of a new distribution platform to help increase his user base.

For indies and developers who build games as a hobby, the Amazon Appstore offers a great opportunity to grow your user base. Plus, with the Fire HD 6’s affordable price, developers can get a fully functional, well-built Android-based tablet for all of their development needs. But it doesn’t stop at just the hardware and OS, we also offer all game developers some great APIs to increase engagement and help monetize their creations.

Game Services

One of the key benefits of building a game on Fire OS, which powers all of our devices, is the deep integration it has with GameCircle. GameCircle represents more than just a way to add leader boards, achievements and cloud syncing to your game. It also enables developers to increase the player’s engagement in their game and automatically tracking their gamer progress across all of our devices. Each user has their own GameCircle profile that automatically syncs across any Fire OS device they own. As a developer, if you also implement Cloud Syncing you can also ensure that customers who bought your game and play on the Fire HD 6, or any Fire tablet, can continue their progress on their Fire TV and Fire phone.

In addition to GameCircle, we also offer more APIs critical for building a successful game such as:

  • In-App Purchasing API can help with conversion by enabling millions of Amazon customers to purchase your game using Amazon 1-Click settings.
  • Amazon Mobile Ads serves up high quality ads to help you monetization your game. Right now you can earn a guaranteed $6 eCPM running interstitial ads through August and September (iOS apps, too!)
  • Amazon Coins is a virtual currency built into our Appstore, which developers can use as incentives with their customers.
  • Appstore Developer Select gives you more ways to get your app discovered and used with free advertising/merchandising and up to 500,00 Coins rewards.
  • HTML5 publishing tools for web developers looking for a simple way to get their HTML5 games on native platforms.

Learn More

 

- Jesse Freeman (@jessefreeman) is a Developer Evangelist at Amazon focusing on HTML5 and Games for the Amazon Appstore.

 

September 02, 2014

Jesse Freeman

If you haven’t noticed, we are doing a lot to make the Amazon Appstore the ideal place to publish games. With a wide range of form factors covering tablet, phone, TV and dedicated game services, we want our platform to be the next stop for your title.

If you have been thinking about expanding your game’s user base, there has never been a better time to publish on the Amazon Appstore.

From Android To Fire – Chances Are Your Game Already Works

Our platform is the perfect fit for any developer publishing Android games. We’ve found that most Android apps we tested just work on Fire mobile devices. Chances are good that you will not have to change a single line of code to get your game running on our devices. We also support all the major game frameworks such as Unity, GameMaker, Unreal, Corona and Air. In addition, we even offer tools to help you publish HTML5 games just like native ones. Basically, if your IDE outputs an APK we can run it! So if you are developing for Android and looking for a new opportunity to expand your audience on mobile, tablet and TV you should check out our device lineup.

One OS, Multiple Form Factors: Phone, Tablet & TV

For the first time in Amazon’s history, we have a complete device ecosystem for publishing your game. Our devices are powered by Fire OS, a custom build of Android optimized to run exclusively on our hardware.

Got a mobile game? Try out our Fire Phone which features top end specs, dedicated GPU, 2gb of ram and unique features such as Dynamic Perspective and Firefly.

Building for tablet? We have several tablets, including two high-end versions called the Kindle Fire HDX, which come in both 8.9" and 7” sizes. Each tablet has blazing fast processes as well and high-resolution HD displays. Our Kindle Fire HD lineup also has great performance at a more affordable price point for customers.

Want to build your games for the big screen? Target Fire TV, which allows you to take Android games and publish them for the 10-foot living room experience.

Each of these devices has you covered no matter where you are coming from.  In addition to the hardware, we do even more to create one cohesive developer experience with our gaming services.

Gaming Services

We have services designed exclusively for game developers such as GameCircle. It’s integrated into the Fire OS and offers leader boards, achievements as well as cloud syncing of game data across devices. With cloud syncing we make it easy to not only backup your player’s game data but make it available on all of our platforms to better leverage Amazon customers with multiple Fire OS devices.

Anyone who owns a Fire OS enabled device has access to his or her own gamer profile. It moves with them across different Fire OS enabled device. This allows them to maintain their player stats and achievements no matter how they want to play. If your current game has leader boards, achievements and cloud syncing it shouldn’t take long to migrate over to our APIs. We even support Unity and other 3rd party game frameworks.

In addition to GameCircle, we also offer more APIs critical for building a successful game such as:

  • In-App Purchasing API can help with conversion by enabling millions of Amazon customers to purchase your game using Amazon 1-Click settings.
  • Amazon Mobile Ads serves up high quality ads to help you monetization your game. Right now you can earn a guaranteed $6 eCPM running interstitial ads through August and September (iOS apps, too!)
  • Amazon Coins is a virtual currency built into our Appstore, which developers can use as incentives with their customers.
  • Appstore Developer Select gives you more ways to get your app discovered and used with free advertising/merchandising and up to 500,00 Coins rewards.
  • HTML5 publishing tools for web developers looking for a simple way to get their HTML5 games on native platforms.

The Amazon Appstore

The Amazon Appstore is the main vehicle for you to distribute your game on our platforms as well on other Android devices. While the Amazon Appstore comes built into every Fire OS powered device, Android users can also download the store to access our library of apps and games. The Amazon Appstore offers customers a way to buy a single game across our devices or you can configure different APKs per devices via our multiple binary uploader. You have full control over how your game shows up on the store. If you are already building for Android, why not grow your reach with Amazon customers?

Get Started For Free

It’s completely free to publish your games to the Amazon Appstore. To become a developer, simply sign up at the top of the developer portal and create your own account. Once you submit your app, it goes through an approval process. This ensures that it works correctly on our devices before going into the store. Once in the store, you’ll have access to millions of Amazon customers looking for great games.

Additional Resources

- Jesse Freeman (@jessefreeman) is a Developer Evangelist at Amazon focusing on HTML5 and Games for the Amazon Appstore.

 

August 18, 2014

Jesse Freeman

We are excited to be working with Seattle indie game incubator HouseOgames to host this year's HOGJam, right here on Amazon's Seattle campus.  Join us to build games, have fun, and hopefully meet some cool people.  In addition to a great location, we have industry veterans from the Amazon to help you brainstorm ideas, offer technical support and mentorship during the HOGjam. This is also a great opportunity to get your hands on some of the latest devices and services we offer game developers such as the newly announced Fire Phone, Kindle Fire tablets and of course Fire TV.

The HOGjam starts on Saturday, August 23rd at 10am until 12am and reopens again on Sunday, August 24th from 10am to 6pm. The following will be providing during the event:

  • Comfortable, creative environment for you to work on you game on your own or in teams
  • Wifi (please pre-install everything you need in case it’s slow)
  • Snacks and drinks
  • Device bar for you to try out the latest Amazon hardware
  • Mentors from Amazon
  • A theme to inspire your game during the event

At the end of the GameJam, everyone gets to demo their games and get constructive feedback on how to turn their creation into a commercial product. The goal is for everyone to be creative and have a fun. There is no judging since making a game in less than 48 hours is hard enough! It’s also an excellent opportunity to show off your creativity to professionals in the gaming industry. Got a game you are working on or have published? We’d love to see that as well after the HOGJam,

Everyone is welcome from developers to designers and we fully encourage people to team up. We’ll provide full details on the rules of the HOGjam at the event so be prepared to come out with everything you need to make your game from scratch. We hope to see you there!

Event Details:

Saturday August 23rd:  10am – 12am

Sunday August 24th: 10am – 6pm

Amazon Arizona Building

207 Boren Ave N, Seattle, WA

Registration: Free

 

July 30, 2014

Jesse Freeman

Fire phone represents an incredible opportunity for HTML5 developers to create new experiences.  Developers now have direct access to the hardware sensors that power Fire’s Dynamic Perspective, which opens up all kinds of new ways to let users interact with your web app content. Just like native devs, Fire phone’s four dedicated cameras offer x, y and z data that you can access directly to determine where the player’s head is looking at the screen, and shift the perspective to reveal new angles on what would have otherwise been a flat web page.

Over the course of this tutorial, we will walk through how to create a simple splash screen for a game in Phaser (a popular open source game framework). We’ll also cover how to take advantage of the ability to run web apps next to native ones on the Fire phone and how to add Dynamic Perspective to create a parallax layering effect which gives the scene more of an immersive experience. Before we get started, let’s take a quick look at the splash screen we’ll be creating:

Here you can see a standard splash screen for a game where the main player will float up and down, giving the scene some sense of motion. The start text also blinks to let the player know what action they should take.

Getting Started

To start, download my Phaser Project Template from https://github.com/gamecook/phaser-project-template. You will need to have the following setup on your computer:

  • NodeJS
  • Grunt
  • IDE (Sublime Text, WebStorm, or any text based IDE)

This project will give you everything you need to run our project and has step-by-step instructions on how to get everything configured to run locally.  Once you have everything set up, rename the Phaser Project Template to DynamicPerspectivePhaserDemo, then navigate into it via the command line. You’ll want to run the following command to get everything configured:

> npm install

Once that is done running, you should be able to launch the project by typing in the following:

> grunt

This will start a local server and open up your browser to http://localhost:8080.

Now we have everything up and running to build our Phaser splash screen. Just download the artwork from here. You’ll need to create an assets folder inside of the deploy directory of the Phaser Project Template. Once that is created, put all of the artwork you just downloaded into it.

One note: if you are using WebStorm, you will want to exclude the deploy/js folder from the Directories setting so you don’t have any performance issues as our grunt script automatically rebuilds the JS code for us.

Building the Splash Screen

Step 1. Let’s create a clean slate to work from by opening our main.js file in the src/game folder of the Phaser Project Template. Once you have it open, simply delete all the boilerplate code in that file.

Step 2. Next we are going to create our new state object and Phaser game instance from scratch by typing out the following:

var state = {
    preload: function () {
    },
    create: function () {
    },
    update: function(){
    }
}

// Create new game instance
var game = new Phaser.Game(
    800,
    480,
    Phaser.AUTO,
    'game',
    state
)

Step 3. Once you have all the artwork in your assets folder, we can add it to our preload function:

preload: function () {
	this.load.image("mask", "/assets/background-mask.png");
	this.load.image("background", "/assets/background-image.png");
	this.load.image("title", "/assets/title.png");
	this.load.image("start", "/assets/start-text-touch.png");
	this.load.spritesheet("player", "/assets/player-sprites.png", 385, 412);
}

Here you can see we are simply loading everything up as an image with the exception of the player, which will be animated. That means we can use the dedicated sprite sheet loader.

Step 4. In our create() function, let’s setup the scaleMode to give us full screen on different device resolutions:

create: function () {
	this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
	this.scale.pageAlignHorizontally = true;
	this.scale.pageAlignVertically = true;
	this.scale.setScreenSize(true);
...

Step 5. We can start blocking out how the scene will be laid out. Inside of our create() method, add the following:

	// Calculate center point for laying scene out
	var centerOffset = {x: (this.world.width - 679) * .5,
                    y: (this.world.height - 466) *.5};

	// Create background image
	this.background = this.add.image(centerOffset.x, centerOffset.y, "background");

	// Save bg position
	this.bgPos = this.background.position.clone();

} // end create

This will calculate where we will center the background image. We’ll also save out the value for the background in order to use it as a reference point later on.

Step 6. If we refresh the browser, we’ll see our first glimpse at how the splash screen will look:

Step 7. Let’s get back into our code now and add in the player as well as the title and other elements that will help complete the scene. In our create() function. Below the background code we just added, put the following code:

create: function () {
...
	// Create player
	this.player = this.add.sprite(this.bgPos.x + 20, 	this.bgPos.y + 20, 'player');
	this.player.animations.add('fly', [0, 1, 2, 3], 10, true);
	this.player.animations.play("fly");
	this.playerStartPos = this.player.position.clone();

Here you can see we are setting up our player as well as creating and setting a fly animation. We also save out our player’s start position, which we will use later on when we start modifying it based on the Dynamic Perspective code we’ll add for Fire.

Step 8. Now we can wrap this up with the last bit of layout code:

	// Add mask, title and start images
	this.mask = this.add.image(this.background.position.x-50, 	this.background.position.y + 280, "mask");
	this.title = this.add.image(this.bgPos.x + 370, 	this.bgPos.y+295, "title");
	this.start = this.add.image(this.bgPos.x + 405, 	this.bgPos.y+385, "start");

} // end create

Here we add the background mask, the title and the start text.

Step 9. If you refresh the browser you will now see our scene:

While this is really easy to setup, it looks a little boring. Let’s add some animation to it.

Step 10. In our update() function, add the following code:

// Make player float up and down
this.player.y = (this.playerStartPos.y / 2) + 8 * Math.cos(this.time.now / 200) + 20;

// make start text blink
this.start.visible = Math.round(this.time.now/500) % 2 ?  true : false;

This code will make the player float up and down as well as make the start text blink. You can test this by refreshing the browser again.

At this point, we have our entire splash screen laid out. Let’s talk about how to set up the Web App Tester on Fire phone to get our splash screen ready for adding the Dynamic Perspective APIs.

Configuring the Web App Tester

Just like you can currently do on the Kindle Fire, you’ll need to download the Web App Tester on the Fire phone for this next part of the tutorial. You can get the latest build from the Amazon Appstore here.

Step 11. Once you have the Web App Tester installed, you’ll want to look up your computer’s IP address.

Step 12. When you have the IP address, you can enter that into the URL field and save it.

Step 13. Now you can pull up the Amazon WebView to make sure everything is working. Once it’s loaded, you should see the splash screen running at full screen on the device. One thing to note is that we are not locking the rotation in this simple demo, so make sure you are holding the phone in landscape. Here is the splash screen being rendered at full 720P resolution on the Fire phone:

As you can see, the process for installing and testing hosted web apps on Fire phone is straight forward. We’ll be using the Web App Tester and Fire phone for the remainder of our tutorial to make sure we can properly test the Dynamic Perspective APIs.

Adding Dynamic Perspective

The good news is that the Dynamic Perspective APIs are built into the Amazon WebView we’ll be testing within the Web App Tester. That means that you don’t have to add in any extra JavaScript libraries to start using Dynamic Perspective in your own HTML5 apps and games, it’s ready for you right out of the box. Let’s get started:

Step 14. We are going to want to make some global variables to store the motion tracking data points we’ll be using in this example. At the very top of our project above where we declared our state object, add the following:

var dpX = 0;
var dpY = 0;
var faceDetected = false;
var scale = 2;

Here we are going to store the x, y values for the Dynamic Perspective x and 7 axis, whether  facial detection is working, and a scale factor to help us manipulate the raw data into something more manageable.

Step 15. Now at the very end of our create() function add the head tracking event listener:

addEventListener('amazonheadtracking', this.handleAmazonHeadTracking);

As you can see, we’ll be using a standard event listener to implement the Dynamic Perspective APIs in our web app.

Step 16. After our create() function, add the following:

handleAmazonHeadTracking: function(event){

    dpX = event.x_mm/scale;
    dpY = event.y_mm/scale;

    faceDetected = event.isFaceDetected;
},

This will save the head tracking position values into our global variables that we set up previously. You’ll also see that we are dividing it by our scale to reduce the value a little so we don’t see large x, y values shifts since the original artwork is being scaled up to 1280 x 720 from 854 x 480. Remember that the data returned is relative to the size of the phone’s renderable screen area - not your game - if it’s up-scaled like we are doing here. You may want to modify these factors by the games scale factor instead. Here I am simply dividing them in half.

Step 17. Now let’s calculate the new position we’ll use to apply to each of our layers. Add the following to the top of our update() function:

var newPositionY = Phaser.Math.clamp(dpX, -30, 30);
var newPositionX = Phaser.Math.clamp(dpY, -30, 30);
this.background.x = this.bgPos.x + newPositionX/5;
this.background.y = this.bgPos.y + newPositionY/5;

Here we are using a method called clamp() which is part of the Phaer.Math lib. We supply our Dynamic Perspective x and y values along with a limit so it stays within the specified range. One thing to note is that since this splash screen is designed to run in landscape we need to swap the Head Tracking x and y values since they don’t change based on the phone’s orientation.

Now if you run the game on Fire phone and look at the device as well as move it around, you’ll see the background now subtly shifts in response to your head movement.

Step 18. Let’s add the same effect to our player. You’ll want to replace the current this.player.y line of code where we calculate the floating animation with the following:

this.player.x = this.playerStartPos.x + newPositionX;
this.player.y = (this.playerStartPos.y / 2) + 8 * Math.cos(this.time.now / 200) + (20 + newPositionY);

Now we are modifying the player’s x position and adding the newPoistionY to the end of where we calculate the up and down value to create some additional movement along the Y position. You may also notice that we are not dividing the new x and y values by 5 like we did in the background. This allows us to give the layers a parallax effect so that the background will move at a slower rate.

Step 19. Run the scene again on Fire phone and you’ll see the final effect.

Publishing Your App

If you have previously published a web app to the Amazon Appstore,  you can follow the same process. For those who are new to this, there are 3 easy steps after you have set up your free developer account and specified that you want to create a new app in the portal:

Step 1: Verifying Your Web App’s URL

You can now validate your web app’s URL right from the developer portal.

 

Simply put in the URL for your web app or game with the Fire phone code and click the verify button and the tool will let you know if the contents of the URL pass the preliminary submission requirements.

Step 2: Declaring Web App’s Permissions

Once your URL has been verified, you can select your app’s permission. Simply check off the options that apply to your app.

 

Step 3: Select Compatible Platforms

Then you can define which devices this web app can be published on.

While the Kindle Fire HD, HDX and Fire phone devices offer the best performance for web apps, make sure you test your web app on older devices to ensure the performance is ideal for your users. Intensive web games and anything using WebGL should be distributed on Kindle Fire HD and above.

While you can install web apps in the Amazon Appstore on any Android device that has the store installed, it will default to the native WebView on that device. This means that your app will not have access to the Dynamic Perspective APIs on other Android phones.

Step 4: Certification of Distribution Rights

Finally, certify that have the necessary rights to publish your web app.

 

Conclusion

As you can see, not only can you easily publish HTML5 apps and games alongside native Android apps through the Amazon Appstore, you also get access to the Fire’s Dynamic Perspective API just like native Android apps do. So be sure to submit your app to the Amazon Appstore to tap into millions of potential new customers. 

Related links:

- Jesse Freeman (@jessefreeman)

 

July 23, 2014

Jesse Freeman

Welcome to part 3 and the final installment, of my Introduction to Phaser. In the first post, we configured our dev environment as well as the code we’ll need to run Phaser itself. In the second post, we covered preloading, displaying sprites and setting up the game modes. If you missed the two tutorials, please go back and follow those steps before moving on. In this tutorial we are going to cover the following:

  • Building A Wall
  • Spawning Walls
  • Debugging Walls
  • Handling Collision Detection
  • Adding Score
  • Adding Sounds

Let’s get started.

Building A Wall

Right now our game isn’t very fun or challenging. To help with this we’ll add walls with a small gap in the middle for our player to fly through. To get started, we’ll need to create two functions: one to spawn a wall and the other to put two walls together with the gap for the player to fly through.

Step 1. Add the following method to our state object:

spawnWall: function(y, flipped){

}

This function accepts the y position for the wall and if it needs to be flipped vertically. This is important since we will be using the same wall graphic for our top and bottom wall sprites. We’ll need a way to group them together into a single manageable game object.

Step 2. In our create() method, right under where we setup the background TileSprite we should add our wall group:

create: function(){
    this.background = this.add.tileSprite(0,0, this.world.width, this.world.height, 'background');

    this.walls = this.add.group();

It’s important to create this after our background so it shows up on top. Now we’ll be able to access each of the wall sprites in our game from a single group which we are calling walls. This will make a little more sense later on when we add in collision.

Step 3. Add the following to our spawnWall() method:

spawnWall: function(y, flipped){
    var wall = this.walls.create(
        game.width,
        y + (flipped ? -OPENING : OPENING) / 2,
        'wall'
    )
}

This adds a new wall sprite to our walls group. The staring x position is set to the width of the game so it starts off-screen and we also use the supplied flipped value to detect if the wall going to be displayed on the top or the bottom. To do this we take advantage of something called a Ternary Operator. Basically the way that this works is we have a condition to the left of the question mark and then the value if true followed by the value if the condition is false. Here is a representation of this:

condition ? true : false;

Step 4. Add the following constant to the top of our script:

var OPENING = 200;

Step 5. Add a few more lines of code to our spawnWall() function:

this.physics.arcade.enableBody(wall);
wall.body.allowGravity = false;
wall.scored = false;
wall.body.immovable = true;
wall.body.velocity.x = -SPEED;
if(flipped){
    wall.scale.y = -1;
    wall.body.offset.y = -wall.body.height;
}

This disables gravity for the wall.  Then, we set the y scale to -1 if it’s flipped, or 1 if it is staying the same. We also need to adjust the y offset value of the body if the wall is flipped to account for the scale change we made on the previous line. Finally we set the velocity.x of the wall to our SPEED constant. You’ll notice we make this value negative. That way it moves to the left of the screen giving the impression that the player is flying past it.

Step 6. Add the following line to the end of the spawnWall() function:

return wall;

This will allow us to get a reference to the wall instance being created every time we call the spawnWall() method. We need to test if this works, but we’ll need to add a little bit of debug code first.

Step 7. Add the following line of code to our create method:

this.spawnWall(300);

Step 8. Refresh the game in your browser and now you should see your first wall fly by below the player:

Step 9. To test creating a wall on the top of the screen, simply modify the wallSpawn() function to look like this:

this.spawnWall(300, true);

Step 10. With true being passed into wallSpawn() you can refresh the game to see the new wall on the top of the screen:

Spawning Walls

At this point we have the foundation in place for us to spawn the walls in our game. We’ll create a method to generate both a top and bottom wall as well as connect it up to a timer.

Step 1. Before moving on, make sure you comment out the spawn code we used to test with in the previous section:

//this.spawnWall(300, true);

Step 2. Now add new method called spawnWalls() with the following:

spawnWalls: function(){
    var wallY = this.rnd.integerInRange(game.height *.3, game.height *.7);
    var botWall = this.spawnWall(wallY);
    var topWall = this.spawnWall(wallY, true);
}

Take note that we added a s to this function’s name since our spawnWall() function only generates a single instance. In the spawnWalls() function we are taking advantage of Phaser’s RandomDataGenerator class. You can access it from the game object by calling this.rnd. This utility has a lot of useful methods for helping create random values in your game. We’ll be taking advantage of integerInRange() which requires a minimum and maximum value to return something in-between the two. Finally to keep the walls within the screen area we calculate the “safe” zone were we would want our walls to spawn by taking a percentage from the top and bottom of the visible area.

Step 3. Now we are ready to start a timer to spawn new walls. In our start() function, add the following code:

this.wallTimer = this.game.time.events.loop(Phaser.Timer.SECOND * SPAWN_RATE, this.spawnWalls, this);
this.wallTimer.timer.start();

Step 4. We’ll also need to add a new constant at the top of our script:

var SPAWN_RATE = 1.25; 

Step 5. Refresh your browser and you can now fly through an endless supply of walls being randomly generated at a set interval.

Debugging Walls

Everything is looking good but there is just one minor issue. While you may not see it, the walls that have moved off the screen are still in the game. We need to do a little bit of cleanup to make sure that we destroy any wall that is no longer visible.

Step 1. Add the following code to our update function right after we test if player is out of bounds:

if (this.player.body.bottom >= this.world.bounds.bottom) {
    this.setGameOver();
}

this.walls.forEachAlive(function (wall) {
    if (wall.x + wall.width < game.world.bounds.left) {
        wall.kill();
    }
})

Remember back to when we set up our walls in the group? This forEachAlive loop allows us to easily iterate through all the wall instances inside of that group still active in the game. From there we setup a generic function to test if the instance’s x position is greater than the game world’s bounds.left value so we can destroy it. Calling kill() on an instance completely removes it from the game and from memory as well. Without this function, the game would have a memory leak which would cause performance issues and a poor user experience. Phaser also has some really great pooling classes but for this intro level tutorial we’ll just do this manually. The game is simple enough not to worry about the extra overhead we incur by creating new wall instances from scratch.

Step 2. In the reset() function of our state object add the following line:

this.walls.removeAll();

This ensures we get a clean slate when starting the game over. And while we are on the topic of starting over, you may have noticed that the walls still scroll by when the game is over?

Step 3. Next, we’ll need to stop the walls from moving when we end the game. Add the following to our setGameOver() function:

this.walls.forEachAlive(function (wall) {
    wall.body.velocity.x = wall.body.velocity.y = 0;
});

this.wallTimer.timer.stop();

This function will iterate through each wall instance and set the velocity.x to 0 to stop it from moving. We also stop the wallTimer to make sure nothing else gets created while the game is over.

Step 4. Run the game and make sure that the walls stop when game over before continuing on.

Handling Collision Detection

Now that we have walls, we can define what happens when a player hits a wall. Luckily for us, collision detection is really easy to implement in Phaser.

Step 1. To get started we’ll need a way to detect the actual collision. To do this, we add one line of code to our update function right after where we test if the player hits the bottom of the screen:

if(!this.gameOver){
    if(this.player.body.bottom >= this.world.bounds.bottom){
        this.setGameOver();
    }
    this.physics.arcade.collide(this.player, this.walls, this.setGameOver, null, this);
}

This tells the physics engine to test for any collisions between two game objects or in this case a single object, the player, and the walls group. The next parameter is the callback the collision check should trigger if an overlap is detected.  Finally, we need to pass the game’s scope to the callback parameter.

Step 2. At this point, everything else is already setup for us to build the game over state. Now if you test the game, you’ll see the game ends when the player touches the walls.

Step 3. When a collision occurs you may notice that the player actually bounces back. Add the following to the setGameOver() function to fix that:

this.player.body.velocity.x = 0;

Step 4. Run game and you’ll see the player no longer bounced back because we set the velocity.x to 0 when the game is over.

Adding Score

In this section, we learn how to add a function that increases the score when a player flies through the walls. To get started, we are going to need a way to determine if the player has flown past a wall, and then give them a score for it.

Step 1. We’ll need to add a new function called addScore() to handle the collision callback:

addScore: function (wall) {
    wall.scored = true;
    this.score += .5;
    this.scoreText.setText("SCORE\n" + this.score);
}

Here you can see we are getting a reference to a wall instance, adding a score and updating the score text. One thing to keep in mind is that since we have 2 instances, a top and bottom, that make up a single wall we only add half a point to the score. As the player flies past each wall section they will add up to a single value of 1 and the player will not even notice.

Step 2. Now we need to add in the logic to call addScore(). In the forEachAlive loop within the update() function, add the following:

this.walls.forEachAlive(function (wall) {
    if (wall.x + wall.width < game.world.bounds.left) {
        wall.kill();
    } else if(!wall.scored && wall.x <= state.player.x){
    		state.addScore(wall);
	}
})

Step 3.  Now you can refresh the browser and as you fly through each section of wall you’ll see the score increase by 1.

Adding Sounds

We now have a functional game. The only thing missing is fun – we need to add some sound effects to round out the playing experience.

Step 1. Before we can access any sound effects we’ll need to load them up. Add this to our preload method:

this.load.audio("jet", "/assets/jet.wav");
this.load.audio("score", "/assets/score.wav");
this.load.audio("hurt", "/assets/hurt.wav");

Step 2. Next we’ll create variables for each of our sound effects so we can access them easier. Add this to our create method:

this.jetSnd = this.add.audio('jet');
this.scoreSnd = this.add.audio('score');
this.hurtSnd = this.add.audio('hurt');

Step 3. Now it’s time to play our sound. In jet() function right after we set the player’s velocity.y to our jet constant add the following:

if(!this.gameOver){
    this.player.body.velocity.y = -JET;
    this.jetSnd.play();

Step 4. Now if you run the game and make the player fly, you should hear the sound. One thing to keep in mind is that each browser supports specific sound codecs. If you have any issues running the sound effects, make sure you are in Chrome or a browser that supports .wav playback.

Step 5. Next we’ll want to let the player know when they score.  To enable that, we need to add the following script to our addScore() function:

this.scoreSnd.play();

Step 6. Add this to the end of our setGameOver() method to let the player know when they hit a wall or go out of bounds:

this.hurtSnd.play();

Step 7. Now that we have the rest of our sound effects integrated, we can refresh the browser and test. You should now hear sounds when the player flies up, scores and dies.

Wrapping UP

At this point the game is basically done, and hopefully you’ve learned how some of the core mechanics of Phaser work.

To recap, we have covered importing assets, creating sprites, managing collision detection and playing sounds. There are a lot of really great resources out there to help you as you dig deeper into the Phaser framework. Make sure you check out the documentation as well as the samples included with the source code.  Also, feel free to take my existing codepen project and fork it to create your own variation of it.

One last thing I wanted to highlight is just how easy Amazon’s Web App tools are to use, helping to make publishing an online HTML5 game in the Amazon Appstore simple. I’ll be talking about how to take any HTML5 game and submit to the Amazon Appstore in a future post but the process couldn’t be easier. Here are the steps:

  1. Host your game online
  2. Download our Web App Tester to your Kindle Fire or Android device
  3. Put in the URL to your game to test that it works
  4. Sign up for free for an Amazon developer account and submit your game.

To learn more about the process, check out the documentation on our developer portal and the following reference links:

Related links:

- Jesse Freeman (@jessefreeman)

July 22, 2014

Jesse Freeman

Welcome to part two of my Introduction to Phaser. In the first part we configured our dev environment as well as the code we’ll need to run Phaser itself. If you missed the first tutorial, please go back and follow those steps before moving on. In this tutorial we are going to cover the following:

  • Preloading Assets
  • Displaying Images & Sprites
  • Building The Intro Loop
  • How to Start The Game
  • How to End The Game

Let’s get started.

Preloading Assets

Phaser has a built in preloader library. Over the course of this tutorial we will be loading in images, sprite sheets and audio files that will be accessible globally within to our game.

Step 1. If you are building your project locally with NodeJS or Apache you’ll need to copy over all of the assets (click here to download) and put them inside of the deploy folder like so:

You do not need to follow this step if you are using CodePen since the same files are being hosted online.

Step 2. Now let’s add the following to the empty preload function we created in our state object. The code bolded below represents what you need to actually add since we have already defined the preload function itself:

preload: function(){
    this.load.image("wall", "/assets/wall.png");
    this.load.image("background", "/assets/background-texture.png");
}

If you are using CodePen, you will need to preface the urls with http://games.jessefreeman.com/wp-content/public/workshop/phaser/ in order for this to correctly load. As an example, to load in the wall.png you will need the following URL:

http://games.jessefreeman.com/wp-content/public/workshop/phaser/assets/wall.png

Remember to do this for any external asset we preload in our game.

Before we move on, let’s talk about what is happening here. First, you’ll notice that we are calling Phaser’s built in game methods via the this scope. That’s because when our state is loaded up it assumes the same scope as the game object itself. This will allow us to call all of Phaser’s built in methods directly. Next, there are two parts to our load.image call, the unique id of the asset itself and the path to the asset so Phaser knows where to load it from.

Step 3. Now we will need to load in our player sprite sheet. Sprite sheets can be vertical, horizontal or even a grid. The only thing to keep in mind is that each sprite will need to be the exact same width and height in order for this to work correctly. This is what the sprite sheet looks like:

 

To correctly load this into our game we’ll need to add the following code below where we loaded the first two images:

this.load.spritesheet("player", "/assets/player.png", 48, 48);

This is similar to our load.image request except we have to define the width and height of the sprite. This allows Phaser to have the correct dimensions it needs to cut up our sprites into separate frames for animating later on. Phaser also supports loading texture atlases as well if you prefer to package all of your artwork into a single graphic but we will not be covering that in this tutorial.

Step 4. To test that this is working correctly, go back to your browser, refresh the page and inside of network connection debug tool you should now see that all of the game’s assets are loading correctly.

Now that we have our images, let’s look into how we can display them on the screen.

Displaying Images and Sprites

Adding images and sprites to the display is very easy in Phaser. To get started we are going to create our game’s background then make it scroll before adding in the player.

Step 1. Add the following to the create() function

this.background = this.add.tileSprite(0,0, this.world.width, this.world.height, 'background');

Here we are setting up a new background variable and assign it a TileSprite by calling this.add.tileSprite. The method requires x, y, width, height and label values. Since this texture will take up the entire screen, we are just going to set its x and y value to 0,0 and the width and height to the world’s width and height.

Step 2. Add the following constant to the top of our main.js file:

var SPEED = 200;

This SPEED value will now be a global in our game and help keep everything in sync.

Step 3. Now add the following code right below where we defined our background in the create() method:

this.background = this.add.tileSprite(0,0, this.world.width, this.world.height, 'background');
this.background.autoScroll(-SPEED,0);

Step 4. At this point we have enough to see the background scrolling by based on our SPEED constant. Refresh the browser to see the background scroll.

Step 5. Next, add the following constant, which will represent the gravity in our game:

var GRAVITY = 900;

Step 6. Add the following to the top of the create() function to setup the physics engine:

this.physics.startSystem(Phaser.Physics.ARCADE);
this.physics.arcade.gravity.y = GRAVITY;

Step 7. Now add the following to our create() method below our background texture:

this.player = this.add.sprite(0,0,'player');
this.player.animations.add('fly', [0,1,2], 10, true);
this.physics.arcade.enableBody(this.player);
this.player.body.collideWorldBounds = true;

Here we are creating a sprite instance from the sprite sheet image we previously loaded. Once we set the player sprite up we are going to create our fly animation. We do this by simply calling animations.add on the sprite itself and supply: a label for the animation, the frames, the amount of milliseconds between each frame and if it should loop.

Step 8. Refresh the browser and now you should see the players animate, and it should fall to the bottom of the screen due to gravity:

In most physics engines, a physics body represents the actual object collision area. It’s easy to define a downward pull by adding gravity to the y value of the player’s body object. Also, by setting the player.body.collideWorldBounds to true we tell the physics body that it should be constrained by the boundaries of the game’s world so the player doesn’t fall off the screen.

How To Start The Game

Now that we have a player and our background, let’s get started adding in a way to play our game. As we build this out, we’ll be taking advantage of the single state of our Phaser game so we’ll need to set up variables to represent the game modes to let us know when the it has started and when it is over. In order to do this we’ll need to create a function that will reset all of our games values first.

Step 1. Add the following function to our state object

update: function(){
},
reset:function(){
	this.gameStarted = false;
	this.gameOver = false;
	this.score = 0;
}

It’s important to note that you need to add a trailing comma to the previous function as you continue to add new functions to the game’s state object so we don’t get an error.

Step 2. Let’s add a call to reset()at the end of our create() function like so:

this.reset();

Now we have a convenient way to reset all of our game values at anytime by calling the reset() function. Not only will this help us get the game ready in the create() function but later on in the when we want to restart the game.

Step 3. Now we need to do a few things in order to build out our intro loop. Add the following to our reset() function:

this.player.body.allowGravity = false;
this.player.reset(this.world.width / 4, this.world.centerY);
this.player.animations.play('fly');

Here you can see that we are turning off our player’s gravity, resetting his position and setting the animation to fly.

Step 4. Now that our player in the correct position for the intro loop, let’s move the background.autoScroll() out of our create() function and put it into the reset() function with the following modification to the x value:

reset:function(){
    this.background.autoScroll(-SPEED * .80 ,0);

Here you’ll notice that we are now to multiplying the SPEED constant by .80 which will slow it down a bit and give us a nice little parallax effect when we add in the walls later on in the tutorial.

Step 5. At this point you can refresh the browser to see the player stays in one place and the background is scrolling a little slower:

Step 6. Now we will need to start building in the logic to differentiate between the attract loop and game play.  Let’s add the following to the update() function:

update: function(){
    if(this.gameStarted){

    }else{
        this.player.y = this.world.centerY + (8 * Math.cos(this.time.now/200));
    }
},	

Here we test if the gameStarted value is true, which means the game is running. If it is false we know that we are in the intro loop. During the intro loop we are going to automatically move the player sprite up and down like he is floating until the player starts the game. You can see that we use Math.cos to modify the y position of the player over each frame, which will give us our up and down motion.

Step 7. Refresh the game in the browser and can see the effect.

Displaying Text

At this point we have our intro loop but we don’t have a way to let the player know what they should do next. We’ll create some text that will not only tell the player how to start the game but also will be used to display the score when the game is running.

Step 1. Add the following code below where we setup our player sprite in the create() function:

this.player.body.collideWorldBounds = true;

this.scoreText = this.add.text(
    this.world.centerX,
    this.world.height/5,
    "",
    {
        size: "32px",
        fill: "#FFF",
        align: "center"
    }
);

As you can see, Phaser supports canvas text and also embedded web fonts if you have them loaded up into your page. To keep things simple we’ll just use the default font, which is Arial. Here we are setting the x and y position of the text, passing it an empty string to start with and defining an object for how the text should be styled.

Step 2. Now we’ll need to set some text to be displayed. To do this, we’ll set it up in the restart() function then add the following to it:

this.scoreText.setText("TOUCH TO\nSTART GAME");

You can use \n to create line breaks in your text.

Step 3. Refresh browser and you should now see the text rendering correctly:

While we can now see our start text, you’ll notice that it’s off center. We can use a built-in feature of Phaser that allows us to anchor elements.

Step 4. In our create() function, right after we instantiated our scoreText instance, add the following code:

        align: "center"
    }
);
this.scoreText.anchor.setTo(0.5, 0.5);

This will center the anchor position of the text object which helps give the impression that it is properly align when displayed.

Step 5. Refresh the browser to see the changes

Now that we have our intro loop complete, let’s look into how to start our game.

Starting The Game

In this section we are going to wire up our game to start when the player presses the mouse button and if the game is running, we’ll make our player fly up.

Step 1. We’ll need to create our start function on the state object:

start: function(){
    this.player.body.allowGravity = true;
    this.scoreText.setText("SCORE\n"+this.score);
    this.gameStarted = true;
}

Just like we did before, make sure you remember to insert a comma before you add this function. When called, this will enable the player’s gravity again. Next, we change the display to show the score and set the gameStarted flag to true.

Step 2. Now we need a way of calling the start() function. We’ll be adding a single function that will handle any mouse click. Let’s go ahead and create the jet() function on our state object:

jet: function(){
    if(!this.gameStarted){
        this.start();
    }

    if(!this.gameOver){
        this.player.body.velocity.y = -JET;
    }
}

Here we are testing if the game has not started when the function is called. If the game is in the intro loop mode, meaning that gameStarted is false, we call start() to begin the game. If the game is not over, we also change the velocity of the player’s body. By changing the velocity.y value we immediately send the player flying up. You’ll notice that we are applying a negative value to move up. Now we just need our JET constant.

Step 3. Add a constant for the JET value at the top of our game’s code:

var JET = 420;

Step 4. Now in our create() method, we can bind the mouse click to call our jet() function above where we call this.resent() like so:

this.input.onDown.add(this.jet, this);
this.reset();

Phaser handles the mouse input for us by allowing you to easily bind the onDown event to a function, in this case jet(), and supply a scope for the callback. This last bit is critical for maintaining scope in your game as you bind events. By passing this along with the reference to the jet() function we can safely reference properties in the game state like we have been in other places of our code.

Step 5. Now we are ready to refresh the browser and test out flying up and falling down.

Step 6. At this point we are ready to clean up the player animations. Add the following to the update() function, inside where we test if the game has started. We stop the jet animation when the player is falling and start it back up when the player is moving up:

update: function(){
    if(this.gameStarted){
        if(this.player.body.velocity.y > -20){
            this.player.frame = 3;
        }else{
            this.player.animations.play("fly");
        }

I usually tie all of my animations to the game object’s physics, in this case testing the value of the player’s velocity and updating the animation to reflect that movement. You’ll note that we set the fall frame number manually to display when the jet is off. It’s not critical to create a one-frame animation if you know the correct sprite ID.

Step 7. Refresh the browser to test out the new animations we added to the player:

How To End The Game

We now have everything we need in order to run our game, with the exception of detecting when the game is over.

Step 1. To create the game over logic we are going to need to figure out when the player actually hits the bottom of the screen and goes “out of bounds”. Add the following code just below where we setup our player’s animation in the update() function:

        this.player.animations.play("fly");
    }

    if(!this.gameOver){
        if(this.player.body.bottom >= this.world.bounds.bottom){
            this.setGameOver();
        }
    }
}else{
    this.player.y = (this.world.height/2) + 8 * Math.cos(this.time.now/ 200);

Here you can see we are testing to make sure that the game is not over. This will keep the setGameOver() function from getting called continuously when the player touches the bottom of the screen. Once we verify that the game is not over, we test to make sure the player’s body is above the bottom of the world bounds. Phaser has several shortcuts for getting values from game objects.  Accessing the .bottom property keeps us from having to manually configure the player’s dimensions.

 

Step 2. Now we need to create our setGameOver() function:

setGameOver: function(){
    this.gameOver = true;
    this.scoreText.setText("FINAL SCORE\n"+ this.score+"\n\nTOUCH TO\nTRY AGAIN");
	this.background.autoScroll(0, 0);
}

Here you’ll see that we set the gameOver flag to true, change the text to reflect that the game is over and stop the background from scrolling.

Step 3. At this point we have enough logic to actually test that our game can end. Refresh the browser and let the player fall to the bottom of the screen.

Now we need a way to restart out game.

Step 4. Let’s modify our jet() function where we test if the game is over. Add the following else condition to that logic block like so:

if(!this.gameOver){
    this.player.body.velocity.y = -JET;
}else if(this.time.now > this.timeOver + 400){
    this.reset();
}

You’ll notice that we are testing a new variable called timeOver. The basic idea here is that we are creating a simple delay between the time that the game is over, and when the player can click to restart. At the end of most game sessions, the player is frantically clicking away before they die to try and extend their session.  Without a delay before restart, the player would accidentally restart the game without seeing their final score. To overcome this, we’re going to test that 400 milliseconds have passed before we actually let the player restart the game, giving them just enough time to see their final score.

Step 5. To make this fully work we’ll want to save the timeOver value when the player dies. Add the following to our the end of our setGameOver() function:

this.timeOver = this.time.now;

By saving out the current game’s time.now value we are able to track how many milliseconds go by before we allow the player to reset the game.

Step 6. Refresh browser and give it a try. You should now be able to fully start, end and restart the game.

Conclusion

Our game is starting to come together. We have sprites on the screen, we are able to control the player to make them fly, we have an intro loop, the game, and a “game over” state to manage. Coming up next we will add in our obstacles, add collision detection, score, points and talk about publishing our game.

Phaser Part 3

- Jesse Freeman (@jessefreeman)

 

July 16, 2014

Jesse Freeman

Introduction

For game developers, Fire’s Dynamic Perspective SDK opens up all kinds of new ways to let players interact with your game’s environment. The phone’s four dedicated cameras offer x, y and z data that you can use to determine where the player’s head is in relation to the device’s screen. This allows you to shift the perspective to reveal new angles on what would have otherwise been a flat image. Over the course of this tutorial, we will walk through how you can convert a simple splash screen to take advantage of a perspective camera, add Dynamic Perspective and create a parallax layering effect to give the scene more of an immersive feel. Before we get started, let’s take a quick look at how the splash screen appears before modifying it:

The above splash screen was built using Sprites in Unity 4.5 and setup with the Orthographic camera. You can download the original Unity project from HERE.

Getting Started

Once you have the project downloaded, open up the Splash scene inside of the Scenes folder so we can walk through how everything is set up.

Here you can see we have 5 sprites and our main camera. You’ll notice that our camera is set to Orthographic. We also have a black background to handle the outside areas around our artwork. Finally, each of our GameObjects has their own custom layer order so they render correctly.

If you run the project, you should see that our player moves up and down (appearing to float), and the start text blinks on and off. Inside of the Scripts folder you’ll find two scripts – “Blink” and “FloatEffect” that make this animation possible.

Now that you have a general understanding of how the project is set up, let’s start making the modifications to work with the perspective camera and lay down the foundation for adding in Fire’s Dynamic Perspective SDK.

Working with the Perspective Camera

Step 1. Select the Main Camera from the Hierarchy tab and change its Projection from Orthographic to Perspective.

You’ll see in the Camera Preview window that everything becomes smaller since the new perspective camera’s Field of View is set to the default value of 60.

Step 2. To start, let’s setup the game to run at the native resolution of the Fire phone (we’ll change this later). Go into the Game tab and select the resolution drop down. We’ll need to add a new resolution called 720p. It will look like this:

Step 3. Select the 720P resolution we just added and re-select the Main Camera so we can play with the Field of View until we find something we like.

Here I have set the Field of View to 30. Now the artwork is centered in the display correctly. Next, we’ll want to move things around a bit so that we add some depth to the scene.

Step 4. Go back into the Scene tab and change the following GameObject’s Z indexes like so:

GameObject

Z Position

BackgroundImage

1

BackgroundMask

-0.25

ClickToContinue

-0.5

Player

-1

Title

-0.5

You should now see there is a difference between what you see in the Scene view (Object A, Left) and what you see in the Game tab preview (Object B, Right) due to the perspective camera and the new Z positions we just setup.

In the game, the objects closer to the camera such as the player, the title, and the “click to start” text are now larger. It’s important to keep in mind that you won’t see these perspective differences in the Scene tab so it’s best to do our layout work in the Game tab.

Step 5. Now we can start testing out how our camera will react as it changes position and rotation in preparation for adding the Dynamic Perspective logic. We’ll run the game and be manually changing the values of the camera on the fly.

Here you can see we are testing by modifying the X position and X,Y rotation values of the Main Camera to simulate our scene being moved all the way to the right-hand side of the screen.

It’s also important to note that we will use this technique to determine our minimum and maximum camera values of the scene inside of Unity itself. This is not something I advise doing on the hardware because moving the phone while trying to test it distorts the view. Instead, I recommend you test all the measurements in Unity. Before we move on, let’s make a few corrections. We’ll want to alter the Main Camera’s Z position to move it closer to the graphics and we’ll need to readjust the Field of View as well.

Step 6. While in the Game tab, you can preview the changes you just made. Change the Main Camera’s Z position to -4.2 to bring the camera in closer, and reset the Field of View to 67.2. This will center the screen better and help give us a better effect later on when we add in Dynamic Perspective. You’ll want to play around with the camera based on you own needs to find the ideal zoom level as well as distortion when the camera rotates based on the head tracking position.

You’ll notice that the perspective is a lot more dramatic. Now when the user is moving their head or the phone as the game is tracking their head position. Widening the Field of View and moving the Camera closer to the objects in the scene will create a little more distortion at the far ends of the screen helping emphasize the effect.

Step 7. Let’s make sure we stop the game, permanently make the Position Z and Field of View changes, and save the scene.

Correcting Layout for Perspective

Step 8. While our GameObjects look OK in their current position, we should make a few adjustments to ensure they stay in place as the camera moves around. To get started, make the following modifications:

GameObject

X Position

Y Position

BackgroundImage

0.44

0

BackgroundMask

-0.35

-3.25

ClickToContinue

1.8

-1.57

Player

-1.15

0

Title

1.6

-1.05

Now all of our GameObjects are aligned a little higher on the screen to account for the shift in perspective. In a production game, you would want to detect if the Dynamic Perspective API is available via HeadTrackingReceiver.isAvailable() and possibly move the camera down a bit to compensate for the higher shift in perspective. You can just lower the camera since the code we’ll add will automatically reset the camera for you, but we don’t want to yet.

At this point you can run the game, play around with the X and Y Positions, and see the rotations of the camera. This will give you a sense for how everything will look when we add in our Dynamic Perspective logic.

Setting Up the Amazon Head Tracking Asset Package

Step 9. Now we are ready to import the libraries that will enable us to add Dynamic Perspective logic to our splash screen. You’ll find the Unity asset files in the Fire Phone SDK. From inside of Unity, select the Asset drop down and pick Import Package then Custom Package.

Step 10. You’ll need to find the Fire Phone SDK Unity Asset Package from the SDK folder. Once you select it, you’ll be presented with the following screen.

Here we are just going to import everything in the package. While we’ll only be focusing on the AmazonHeadTracking Plugin, you can also add Fire phone’s Motion Gestures to your game as well to add in support for those APIs. Once installed, you will now have a plugin folder along with the source code and sample scenes you’ll need to test out all of the features of the Fire hardware in Unity.

 

Creating the Dynamic Perspective Logic

Step 11. Let’s create a new script called HeadTrackingCamera. We’ll be using C# for the Script. Once you have the script open, add a few properties to the top of the class.

public float movementScale = 5.0f;

private Vector3 newPosition;

Step 12. The first property will represent the multiplier we will use on the X and Y position we’ll receive from the Dynamic Perspective API. The newPosition property will store the updated X and Y values for the camera after we do our calculations on the raw Dynamic Perspective data. Now add the following to the Start() method:

newPosition = transform.position;

This will save our initial camera position, and, moving forward, we will modify the X and Y properties of this vector instead of creating a new one from scratch.

Step 13. In our Update() method we are going to need to test that the Dynamic Perspective API is working and that we can access its data so add the following:

void Update() {
if (HeadTrackingReceiver.isAvailable &&
(HeadTrackingReceiver.lastEvent != null && HeadTrackingReceiver.lastEvent.isTracking)) {
}
}

Here you’ll see that we can talk directly to the HeadTrackingReciever class and access its data. We’ll be testing if it’s available, that the last event isn’t null and that it is still tracking the user. We want this to shut down if it stops tracking the user’s head.

Step 14. Now we can add our position calculations. Add the following inside of the new conditional we just created:

newPosition.x = Mathf.Clamp(HeadTrackingReceiver.lastEvent.x * movementScale, -.7f, .5f);
newPosition.y = Mathf.Clamp(HeadTrackingReceiver.lastEvent.y * movementScale, -.2f, .5f);
transform.position = newPosition;

We are getting the last event’s X and Y values, multiplying it by the movementScale we set up at the top of the class and using a Clamp() to keep it within a certain range of values. I have figured out the optimal values for you based on how far the scene will look when at the edges of the screen, which should help keep our scene in the camera’s view later on when we add the rotation to the camera.

Step 15. Before we test, we’ll need to add this script and the HeadTrackingReciever, which samples for new data every update during the Unity game loop, to the camera.

Step 16. At this point you are ready to test your game on the Fire device. Make sure Unity is set to Android as your platform and do a Build and Run of the game.

When you run this for the first time, you may be asked to locate your Android SDK. Just point Unity to the root of the SDK folder. You may also get the following error:

 

If you haven’t already done this, you’ll need to change the Bundle Identifier. From the Build Settings menu, select Player Settings, then change the default value of the Bundle Identifier.

Also, while you are in the Settings for Android tab, change the rotation to Landscape Left.

Finally, save your Android build to its own folder in your project.

Once you have the Scene deployed, you should now be able test out the Dynamic Perspective.

Step 17. We’ll also need to add a few properties to the class to make this work:

public float smooth = 1.0F;
public float tiltAngle = 2.0F;

Step 18. After running the project on the phone, you may notice that the parallax effect isn’t very dramatic. While it’s a cool effect, we can greatly enhance it by simply modifying the rotation of the camera in addition to changing its position. Below where we set the new transform value, let’s add this code:

float tiltAroundX = HeadTrackingReceiver.lastEvent.x * tiltAngle;
float tiltAroundY = HeadTrackingReceiver.lastEvent.y * tiltAngle;
Quaternion target = Quaternion.Euler(tiltAroundX, tiltAroundY, 0);
transform.rotation = Quaternion.Slerp(transform.rotation, target, Time.deltaTime * smooth);

Step 19. Now if you re-run the project on the phone, the effect will be a little more dramatic since we are also rotating the camera to match the shift in X and Y position.

Conclusion

At this point, you now have a reusable script you can apply to your camera that takes advantage of Dynamic Perspective in your Unity games. You don’t have to limit this to just the splash screen; I’ve been playing around with adding it to my main game scenes as well wherever I can take advantage of subtle shifts in perspective. When done correctly, the Dynamic Perspective effect is incredibly powerful. Use it to show off parts of the scene that may have normally been blocked by other items in the foreground, or just as a subtle way to add a little more depth to your Unity scenes. I also suggest checking out the Motion Gesture examples included in the Head Tracking Asset Package to add peek and tilt events to your game as well for menus and even to control elements in the game itself.

Now Is the Time to Submit Your Apps for Fire

Create immersive apps that respond to the way a customer holds, views and moves the phone. We have updated Appstore Developer Select, Amazon Mobile Ads API, and Amazon Testing Services with more incentives:

  • Appstore Developer Select: Optimize your apps for Fire phone and get enhanced merchandising and 500,000 Amazon Coins incentives for your customers. Get the details here.
  • Amazon Mobile Ads API: Developers earn $6 for every thousand interstitial ads displayed across any supported device in August and September (up to one million impressions per app per month) when they distribute their apps on Fire phones and send the first ad request from a qualified app. Get the details here.
  • Amazon App Testing Service: Most Android apps just work on Fire mobile devices. Test your app's compatibility in 90 seconds by dragging and dropping your Android APK into our testing tool. Sign up for a free developer account to test your app's look and feel on devices and get the results within 6 hours. Test your app now.

Now is the time to submit your apps and games! Apps that are submitted by July 18 and approved will be in the Amazon Appstore when Fire ships on July 25.

Fire Developer Resources:

July 11, 2014

Jesse Freeman

In this tutorial we are going to create the “new hello world” in gaming, a Flappy Bird style game. We’ll be using Phaser, which is a popular HTML5 game framework, and the game we are going to build will feature the main character from my Super Jetroid game along with a few obstacles from my free Space Exploration Art Pack. In the first part of this three part series we are going to cover the following:

  • How To Configure Your Environment (CodePen, NodeJS and Apache)
  • Setting up Phaser

Before we dig into the code, you can check out the live demo of the game here.

How To Configure Your Environment

The next three sections will walk you through three different configuration options: CodePen.io, NodeJS + Grunt and Apache local server.

Simply pick the one you feel the most comfortable with, and once you have your environment configured you can move ahead to setting up Phaser itself. It’s important to note that each of these development options have advantages and disadvantages.  Which option you choose depends on your technical comfort level and your past experience building HTML5 content.

Option #1:  CodePen.io: Online Editor

Sometimes the hardest part of making an HTML5 game is setting up the development environment. To help make this as easy as possible, you can actually use an online code editor such as CodePen.io in order to run all of the code we’ll cover in this Introduction to Phaser tutorial. The advantage here is that you don’t have install anything on your computer. The disadvantage is that you will not be able to really publish and share your game; you’ll still end up having to host it online somewhere else.  This means, you’ll need to rewrite the code to be standalone which I will not cover in this tutorial. Here are instructions for setting that up.

Step 1. You will need to create a new account on CodePen.io.

Step 2. Create a new project.

Step 3. Add the following to the HTML Window

<div id=“game”></div>

This will give us an empty div where we can put our game.

Step 4. Now we’ll need to add the following into the CSS Window

body {

    background: #333;

    margin: 0;

    padding: 0;

}

#game {

    margin: 0 auto;

    max-height: 568px;

    max-width: 320px;

}

This will represent our default CSS for the body of the page and the game div itself.

Step 5. We need to configure an external JS file for the project. We’ll be using a version of Phaser I have hosted on my server. Click on the gear icon to the left of the JS window and paste the following url in the “External JS File” field:

http://games.jessefreeman.com/wp-content/public/workshop/phaser/phaser.min.js

You should have something that looks like this:

Step 6. At this point we are done with the basic configuration, so make sure to minimize the HTML and CSS windows so you have a larger place to work on your code.

One thing to note when using CodePen is that you’ll need to load all of the artwork and sounds from an online server. We’ll cover this later in the tutorial but just keep in mind that you will need to preface the url path to all of the assets we load as part of this tutorial with the following url (which is coming from my personal website):

http://games.jessefreeman.com/wp-content/public/workshop/phaser/

As an aside, you may have issues loading your own artwork into a CodePen project if you are not a pro member and using their hosting solution. To get around this, I have a .htaccess file in the root of my server’s public folder with the following:

<IfModule mod_headers.c>

    Header set Access-Control-Allow-Origin "*"

</IfModule>

This allows you to bypass the cross-domain issues you normally get when loading images from severs on a different domain.

At this point we are ready to move on so you can skip the next two sections on setting up the project locally with NodeJS and Grunt or Apache.

Option #2:  NodeJS + Grunt: Local Automated Build Process

I am a big fan of having an automated build process when I develop HTML5 games. For all of my projects I use NodeJS and Grunt. This automated build process will compile the game’s code into a single JS file for you any time you make a code change and hit save. The workflow also sets up a temporary server to run your game locally and even opens your browser to the correct URL making the entire setup and development process dead simple once it’s fully configured.

To help you get started I have created a Phaser Template Project which you will need to download in addition to NodeJS, Grunt and the project’s dependent modules. The following steps will walk you through this process from scratch. If you already have node and grunt installed, simply skip ahead to step 2.

Step 1. You will need a copy of NodeJS, which works on Mac, PC and Linux. Simply go to http://nodejs.org and get the correct installer for your computer. Once it’s installed you want to open up the command line and type in the following:

> npm

You should see something like the following:

This means that NPM (Node Package Manager) is installed and you can continue on with the rest of the setup process.

Step 2. Next we’ll need to install Grunt on the command line. If you have never used Grunt before, you can learn more about it at http://gruntjs.com. For now, enter the following in the command line:

> npm install -g grunt-cli

Step 3. At this point you have everything you need to support the automated workflow. Next you’ll want to download my Phaser Project Template from https://github.com/gamecook/phaser-project-template and unzip it on your computer where you do your development.

Step 4. Let’s go ahead and rename the Phaser Template Project to phaser-demo.

Step 5. Now we need to install the project’s module dependencies that will allow us to run the Grunt build script. Open up the command line and navigate to the project folder. Once inside, type the following command.

> npm install

You’ll see the following in the terminal window:

 

If you get an error for any reason, simply re-run the command again.

Step 6. Run the following command to start the grunt task:

> grunt

Once the command is executed your browser should automatically open showing you the default project page and display the current Phaser build version.

Phaser is a very active project, so your build number may be slightly higher then what is displayed above. As of this writing, the current version of Phaser is v2.0.3. As long as you have the Grunt task running, your project will automatically recompile every time you make a change to any JavaScript file inside the src directory. Once the project is recompiled, simply refresh your browser to see the changes. Also, make sure you disable your browser's cache.

This template project has everything you need to build your own Phaser game. You’ll find the game’s source file in the src/game folder called main.js.

 

 

Phaser’s source code is inside of the lib folder. You can update Phaser on your own at any point by simply replacing the phaser.min.js file in that folder. Just be careful because newer versions of Phaser may break your game’s code.

Since this project is pre-configured to display the Phaser version number, you will want to open up the main.js file and delete all the code inside of it so that it’s blank before you get started building your new game. Now you can skip ahead to the Setting up Phaser section of the tutorial.

Option #3:  Apache as a Local Server

Phaser is just like any other HTML/JS project you have ever worked with. If CodePen and NodeJS/Grunt are not your thing, simply run the game from Apache or any web server you are familiar with. Let’s look at how to setup the Phaser Project Template from the NodeJS configuration setup inside of Apache.

Step 1. Make sure you have Apache installed. I suggest using one of the following depending on your OS:

Step 2. Once Apache is installed and running, you will need to download my Phaser Project Template (https://github.com/gamecook/phaser-project-template) and put it in your Apache’s web root.

Step 3. Now you will want to move main.js and phaser.min.js from src folder into deploy/js folder. Since we are not automatically compiling these two files, we’ll just manually set them up like any regular script tag reference in an HTML file.

Step 4. Open up the index.html file inside of the deploy folder and fix the paths. You will need to load both js files like so:

<script src="js/phaser.min.js"></script>

<script src="js/main.js"></script>

Step 5. At this point you are ready to load the project up in the browser. Navigate to your Apache’s localhost and go into the deploy folder. You should see the following:

Note that your url may be different depending on what port your Apache is configured to use. You may also see a different Phaser version number than what is displayed above. As of this writing, Phaser 2.0.3 is the latest build.

Step 6. Now that everything is working, open up the main.js file that should now be located in your deploy/js directory and delete everything inside of it. Then you’ll be ready to start the tutorial in the next section.

Setting Up Phaser

The hard part of configuring our environment is now behind us and it’s time to build our first Phaser game.

Step 1. At this point you should have an empty main.js file if you are using the Phaser Project Template or an empty JS window in CodePen.

Step 2. Type out the following object, which we will assign to a state variable:

var state = {
    preload: function(){
    },
    create: function(){
    },
    update: function(){
    }
}

Phaser uses a notion of “states” to represent each screen of your game. Think of the state as a place to keep all of the logic that belongs in that scene. Phaser will take a state and wire it up to the main game engine to run your code. When creating states, we’ll take advantage of a few functions such as preload(), create() (which is run first when a state is created and done preloading), and update() (which is run before the draw call). While Phaser has other state functions available, we’ll only be focusing on these three main ones for this tutorial.

Step 3. Now it’s time for us to create an instance of the actual Phaser game. Add the following code below where we created our state object:

var game = new Phaser.Game(
    320,
    568,
    Phaser.AUTO,
    'game',
    state
)

This will represent our Phaser game. Here you can see we are creating an instance of Phaser.Game as well as supplying the width and height. We are going to set the render mode of Phaser to Phaser.AUTO. This will detect what rendering options your browser supports and either run the game with WebGL support or call back to software based 2d Canvas. Finally we define the name of the div where our game should be created as well as pass in a reference of the initial state object.

Step 4. Now you are ready to refresh browser. You should see that we simply have a black box representing where our game will eventually go.

Conclusion

At this point you should now have a stable work environment for building Phaser games as well as the initial game code setup to build upon in the next parts of this tutorial. Coming up next, well talk about preloading, displaying images and building out some basic game mode logic for starting, playing and ending our game.

Phaser Part 2

- Jesse Freeman (@jessefreeman)

 

June 23, 2014

Jesse Freeman

Fire represents a huge leap forward in mobile UX (user experience). As a developer, you’ll want to design the best customer experience possible for this new platform.  To help you achieve that, we’ve outlined the core design principles that will allow you to take advantage of Fire’s unique Dynamic Perspective features. The good news is that if you are an Android developer your app will work on Fire with little or no work, and as you will see, just a few modifications to your app’s UX will let it better take advantage of what the Fire SDK has to offer.

Design Principles

At the core of the Fire UX is the following principle: connect the real world to the digital world, with immersive experiences and rewarding moments. While it’s easy to dive into the deep end and use everything the Dynamic Perspective SDK and Firefly SDK have to offer, the real question you should be asking yourself is: “how will each Fire feature improve the user’s experience?” 

Here are three best practices for designing with the Dynamic Perspective SDK.

Supporting One-Handed Shortcuts with Dynamic Perspective

One way users will interact with the UI elements in Fire-optimized apps is through one-handed shortcuts. You are probably already familiar with incorporating gestures into your UX designs, but what makes Fire unique is the one-handed shortcuts that are driven by a user’s physical interaction with the device. The unique head tracking capability tracks the position of the user’s head relative to the device and when combined with other sensor inputs enables the entire UI to respond to how the device is held, moved and where the user looks.

To help illustrate this, let’s look at the orientation of the device itself.

Here you can see we have the three axes you’ve come to expect in 3D space: x, y and z. By moving the phone along a particular axis the user is able to trigger a gesture. There are three main gestures the user will come to rely on.

Peek

A Peek is triggered when the user subtly rotates the phone around the Y-axis. By slightly angling the device, the perspective of the Dynamic Perspective UI shifts to reveal contextual content.  

Here you can see on the home screen, the device is being held at the default orientation directly facing the user and the top status bar is hidden.

droid@screen-4

When the user angles the phone to the right, it enables the peek gesture, which will begin to display contextual information such as the top status.

It’s important to keep the following in mind when adding peek experiences to your own app:

  • Show things that help the user in the moment. The best way to think of this is mouse-overs on desktop computers that reveal contextual tooltips.
  • Reveal secondary information that the user may be looking for, but don’t ‘hide’ primary information on peek.
  • Reward close inspection.
  • Peek gestures work best in the primary panel.

Tilt

Rotating the phone around the Y-axis will trigger a Tilt. While Peek is a subtle movement, Tilt is at the far end of the movement’s spectrum. Tilt is designed to pull open the left and right panels.

Tilting the phone to the far right on the home screen you will pull up the Left panel. Left panels are typically used for menus and navigation, such as in the below example from the Fire home screen:

droid@screen-7

For many, this will represent a totally new way of interacting with a digital device and its intention is to invoke a sense of playfulness and delight for the user. In addition to the left panel, there is a right panel, which we’ll talk about more in the next section. You can use a tilt gesture in the opposite direction, moving the right side of the phone towards you, to pull up the right panel. These gestures become intuitive for users since they are facsimiles of how we would interact with physical objects in the real world.

While it’s important to be playful in your design, it’s critical that you don’t make the user work too hard to understand your app’s UX. The key goal is to make the primary UI clean and visually easy to scan by distilling it down to only the essential information.

Working with Fire’s Panels

Fire apps consist of three different panels that help tie the entire experience together for the user. These are the Left Panel, Primary Panel and Right Panel. Let’s take a look at each one and how they work.

Primary Panel

The primary panel is the main application space where most of the action takes place. Here you can see in the Maps app that we are presented with a standard Android View that displays the main UI of the App.

                                                                          droid@screen-11

Left Panel

As we discussed in the previous section, the left panel contains quick navigation, refinement controls, sort controls, and other contextual controls. User actions on this panel change the view in the primary panel.

                                                        droid@screen-13

The left panel should contain your app’s actions that are not key to the primary interaction of the app. Core UX should always be contained within the primary panel.

Right Panel

The right panel helps users discover new things or perform essential tasks more quickly without leaving the current context.

droid@screen-12

The right panel is always contextual whereas the left panel is constant throughout the app. This means that the right panel can also be used for quick summaries, actions tied to what is being displayed on the primary view, or additional shortcut actions that wouldn’t make sense to be exposed in the left panel. The right panel is a good place to positively surprise the user with information that is delightful in the moment, but which they didn’t know to expect. For example, the Amazon MP3 app surfaces song lyrics in the right panel.

By taking advantage of these panels, you’ll also be integrated into the system-wide gesture events. A great place to start is by going through the phone’s default apps such as Email, Maps, Messaging and even the Silk Browser to see how they are setup.

Designing for the Home Carousel

The next important thing to also consider is how your app will look on the home screen carousel. Each app is represented in the carousel with two parts—an icon on top and a widget below the icon.

In the image above, the highlighted red area is your app icon and the area highlighted in green is the widget area.  The widget allows you to expose content without needing the user to launch the app. Text and images can be presented in a grid or list.

droid@screen-10

The widget communicates with your app using an intent. When the user taps an item in the grid or list, the intent you defined for the item is sent. If you do not provide a widget for your app, the system displays a default widget that shows “Customers Also Bought” content related to your app.

Be creative with this space and use it to drive user engagement.  You could use it to help users quickly launch your app.  Or, use the space to expose a summary of past activity the user may be searching for again.

Now Is the Time to Submit Your Apps for Fire

Create immersive apps that respond to the way a customer holds, views and moves the phone. We have updated Appstore Developer Select, Amazon Mobile Ads API, and Amazon Testing Services with more incentives:

  • Amazon Developer Select: Optimize your apps for Fire phone and get enhanced merchandising and 500,000 Amazon Coins incentives for your customers. Get the details here.
  • Amazon Mobile Ads API: Developers earn $6 for every thousand interstitial ads displayed across any supported device in August and September (up to one million impressions per app per month) when they distribute their apps on Fire phones and send the first ad request from a qualified app. Get the details here.
  • Amazon App Testing Service: Most android apps just work on Amazon devices.  Test your app's compatibility in 90 seconds by dragging and dropping your Android APK into our testing tool. Sign up for a free developer account to test your app's look and feel on devices and get the results within 6 hours.  Test your app now.

Now is the time to submit your apps and games! Apps that are submitted by July 18 and approved will be in the Amazon Appstore when Fire ships on July 25.

Fire Developer Resources:

Jesse Freeman (@jessefreeman)

 

May 20, 2014

Jesse Freeman

If you followed along from the first part of this series you should be up to speed on how the Unity IDE works. In this post we will dig deeper into the code side of things. I am a big fan of C#, and while Unity Script is useful, eventually you will need a little more flexibility in your code. So, to help you along, I thought it would be valuable to write a quick primer on working with C# in Unity, as well as some of the most common APIs you will be using when we build our game.

Picking a Code Editor

In order to code in Unity you will need to pick an external editor since Unity doesn’t have one built in. By default, Unity ships with MonoBuilder, but you can just as easily switch it out for something a little more robust, such as Visual Studio if you are doing your development on Windows. Simply go into the Edit > Preferences menu and change the path to the external editor.

Once you have picked an editor you like, you are ready to start coding. In this post, I will be showing the code from Visual Studio, but MonoDeveloper will work similarly to Visual Studio but on Windows and Mac.

Data Structures

C# is a strongly typed language and is very similar to Java or ActionScript 3. If you have some background in JavaScript, it should feel familiar as well. Let’s take a look at the basics of the language. To start with, we will look at variables and lists, which are the building blocks of any language. To make a variable, simply declare it, like so:

var name = “Jesse Freeman”;

While C# is a typed language, it supports type inference, meaning that when you declare a variable you don’t always have to define the type. There are a few primitive types you should know about:

string name = “Jesse Freeman”;
int age = 34;
bool alive = true;

When it comes to numbers, you should also understand more complex types, such as Float:

float speed = 4f;

Notice that we use the f suffix for our float. Floats are numbers that contain decimals and are used for more granular positioning within the game world, as well as in the built-in physics engine. Ints are useful for whole numbers where you don’t need to perform calculations that would generate fractions, such as a player’s health. You should always be aware when using Int, Float, or other number types because you may be forced to cast it to a specific type in order to perform the calculation and you may incur a performance penalty. Here is an example:

float example = (float)age * speed;

You can learn more about the different types in the C# reference docs at http://bit.ly/1bwLAKW. The next set of building blocks is Array and List. An Array is collection of multiple variables, usually of the same type.

var stringArray = new string[2];

In C#, Array are fixed meaning you can’t alter their length. You can modify its contents via their position in the Array itself. The position is an id, which represents a unique number for each location in the Array. In C#, arrays start at 0.:

stringArray[0] = “Jesse”;
stringArray[1] = “Freeman”;

You can access values in an Array by their index just like we modified it. Here is how I would create a string with my full name from the above Array:

var name = stringArray[0]+” “+stringArray[1];

Unity also supports Lists as part of the C# library. In order to use this, you will have to import its package (System.Collections.Generic) at the top of your script, which I will show you how to do later on. For now, here is an example of a list:

List<int> listOfInts;

This is what we would call a generic List. The term generic refers to a dynamic type we can assign at runtime. Generics are a core part of the language, and something you should get familiar with as you gain more experience coding in C#. In this example, we can create a list with a type of Int. Now this generic list can contain whole numbers. For performance, you will want to use lists over arrays when you don’t know the exact size of the data and expect to be adding or removing values at runtime. An Array by contrast has a set number of items you can have in it and shouldn’t attempt to modify the length at runtime.

The last data object I want to talk about is a vector. Unity makes use of a Vector3, but now with the addition of the 2D workflow, they now rely on Vector2D a lot more. Here are examples of both:

var v3 = new Vector3(0,0,0);
var v2 = new Vector2(0,0);

Vectors allow you to store 3D or, in this case, 2D points in space so you can access the value of x, y, and z from the vector. Here is an example:

Debug.Log(v3.x); // will output 0

One quick note is that you see I am calling Debug.Log. This will output the value to the console window.

This is similar to most other languages, such as JavaScript’s console.log and ActionScript’s trace. It’s also the first step in debugging your apps if you ever need to see the value of an object or property.

Classes

C# takes full advantage of classes, interfaces, and a host of other ways of packaging up code for reusability. Unity itself is built on a very easy-to-grasp composition system, which it favors over inheritance. Let’s look at how to make a simple class. Go to the Create menu and select a new script.

As you begin to create a new script, you will notice you can select from the three built-in languages. Select C# and call the script HelloWorld.

Unity will stub out the code you need for your class for you. Here is what it will look like:

using UnityEngine;
using System.Collections;

public class HelloWorld : MonoBehaviour {

	// Use this for initialization
	void Start () {
	
	}
	
	// Update is called once per frame
	void Update () {
	
	}
}

As you can see, you won’t need to memorize how to create a class from scratch, so I will simply focus on two main parts of the script: the import block and the methods. By default, each new class extends from MonoBehavior. There are numerous methods you can take advantage of, but we’ll start with the first two: Start and Update.

Let’s go back to our previous example of a generic list. While this isn’t the traditional way of doing a Hello World example, I’ll be able to show off in a little more detail what it is like to import external libraries, create properties on a class, and output that to the console window. To start, look at the top of the class at the import statement and add the following:

using System.Collections.Generic;

Now, just before the Start method, we are going to add a property. Properties are variables that are scoped to the instance of the class itself. That is a fancy way of saying that anything inside a block of code will have access to its contents. Depending on how we declare the property, other classes will have access to it as well. C# supports private and public variable denotations. If you don’t declare one, it will automatically default to private. Add the following property above our Start method:

public List displayText;

Now, in our Start method, add the following:

displayText.Add("Hello");
displayText.Add("World");

Now we need a way to display this text. Add the following to the Update method:

Debug.Log(displayText[0] + “ “ + displayText[1]);

Here you can see we are using the Debug.Log method again, and we are accessing the first and second values of our list. It’s important to note that arrays and lists are 0 based in C# just like Java, AS3, and JS. Now we have a script that will output Hello World to the console tab on each frame, but we don’t have a place to put it. Go back to the Scene and select our camera. From here, scroll down to the bottom of the Inspector panel and select Add Component. Now select our HelloWorld script and it will attach itself to the camera.

Now, if you run the game and look at the Console tab, you will see Hello World outputted on each frame.

While this is a simple example, let’s do something a bit more interesting. Go back into your script and let’s have the camera scroll to the right. The camera is a GameObject just like any other primitive you add to the Scene via the Create menu. All of these GameObjects share some common properties, with position, size, and scale being just a few of them. Also, all of these GameObjects share the same API we are taking advantage of right now, which are the Start and Update methods. Let’s look at how we can programmatically move the camera. To get started, let’s add a new property called:

public float speed = 2f;

Next we’ll want to replace our Hello World Debug.Log call with the following:

transform.Translate(new Vector3(speed, 0, 0) * Time.deltaTime);

As you can see, we have taken the transform position property and are modifying it with a new Vector3 that contains our speed value and is multiplied by the Time.deltaTime. If you simply increased the x position by speed, you are not taking into account any slowdowns in the game itself. By using the delta between each frame, you are able to keep your movement consistent from frame to frame, regardless of dips in the frame rate. This isn’t a magical formula; all it means is that your GameObject will move at the desired distance over time. So if the frame rate drops, movement will look jerky but won’t slow down or speed up as the FPS naturally fluctuates based on other things going on in the game.

If you run the game, you will see the camera move. It will appear like the box that we created earlier is simply scrolling off the left side of the screen. Stop the game and take a look at the camera’s Inspector panel. If you scroll down to the script area, you will see we now have a new input field called Speed we can alter.

This is an important concept in Unity. Basically, any public property on a script can be edited from the IDE in the Inspector window. So, while it’s important to create default values for your properties, just know that you can alter those values on an instance-by-instance basis, and even temporarily at runtime when you are debugging. This is incredibly powerful and something we will be taking advantage of later on. Not only does this work with simple properties, such as Strings, Numbers, and Booleans, but it also works with collections, such as Arrays and Lists.

If you remember back to our first example, we had a list called displayText, which we also made public. You should see it in the Inspector panel as well, but the value is hidden. Simply click on the arrow next to its property name. You can even add new items to it by changing the Size value.

So, at this point, you should have a basic concept of how scripting works in Unity. Everything we covered here will be re-introduced in the following chapter. There is just one last thing I want to cover, which is how to think through scripts for GameObjects.

Composition over Inheritance

If you come from a traditional computer science background or have worked with other object-oriented programming languages before, you may be familiar with the argument on composition over inheritance. One of the cornerstones of OOP languages is the concept of polymorphism. While inheritance plays a large role in game development, Unity strives for the use of composition as much as possible. I consider scripting in Unity to follow the decorator and component design pattern. Each script adds additional functionality to your GameObject, but they are mostly self-contained. While some scripts rely on others to function, as we will see in the game we end up building, we really strive to create small, reusable blocks of code that can be applied to multiple GameObjects. When put together, each of these smaller scripts build up to a greater set of logic that builds up the functionality of each GameObject. While inheritance is possible, I strongly recommend thinking through composition as a means to not only create more modular, self-contained code but to also separate and encapsulate independent game logic. This kind of thinking is critical when it comes to grasping the true power of creating scripts in Unity.

Wrapping Up

By now I am sure you are itching to get into more coding, so start playing around with some of the great tutorials out there on Unity. We’ll continue to add new posts about Unity, especially with working with the new 2D workflow, over the next few months so make sure you keep checking back.

Also, don’t forget that to checkout Amazon’s GameCircle plug-in for Unity to help you integrate cross-platform leaderboards, achievements, and game data synchronization. The plug-in works on iOS, Android, and Fire OS plus with the built-in Whispersync for Games component you can back up all of your user’s game data to the cloud across all three platforms. You can now download it from the Scripting/Integration section of the Unity Asset Store.

Additional Resources

-Jesse Freeman (@JesseFreeman)

 

May 19, 2014

Jesse Freeman

Unity is the de facto game framework and IDE for a lot of the success stories you read about on multiple platforms. The IDE is very polished and easy to use. As Unity was previously just a 3D tool, there was a certain level of knowledge you needed before getting started. Now with the addition of an all-new 2D workflow, things have gotten a lot easier for game developers looking to build simple, non-3d games. In this post we’ll take a look at how the Unity IDE works for 2D game development.

Over the next few sections, we will take a look at the IDE itself and how to navigate around it and GameObject, which are the building blocks of your game. There are a lot of resources out there on Unity, but for people who have never opened it up before, this post will help get you acquainted with the basics in the IDE.

Creating a New Project

When you create a new project in Unity, you will see the following wizard:

As you can see, you are given an option to set the location of where you want to create your project, as well as packages you can include when it is created. The final thing to note, which is new in Unity 4.3, is the 2D setup tab at the bottom of the window.

By setting this to 2D, your project will automatically be configured for 2D game development. Let’s create a project called SPMS2D and toggle 2D.

Once you create your project, you will go into the editor and see the “Welcome To Unity” screen. I highly suggest going through some of the videos to learn more about how Unity works and get a sense for the workflow. Most of it is geared toward 3D, but it still applies to the stuff we will go over in this blog. I also suggest checking out the forums since there is a lot of really good information on there that can help you out when you get stuck as you are getting started learning Unity.

How to Use the IDE

At first, Unity may be a little intimidating, but I personally find that the new 2D mode actually simplifies things greatly. Here is a high-level overview of the IDE. When you first open up a project in Unity you will see the following window.

Let’s go over each section of the IDE’s window by window. First, we’ll start with the main area.

This is where you will lay out objects, preview and test your game, and also work on animations and other visual-based activities. As you can see from the tabs, the Scene and Game tabs are already open. Below the tabs, you will see a few quick-access menus. The most important is the 2D toggle, which is already activated. By unchecking it, you will go back into Unity’s native 3D view.

I’m not going to go into the 3D navigation tools since we will be focusing on 2D instead so let’s look at the Hierarchy panel.

As you add stuff to your scene, you will be able to see and access them from here. For now there is a single object, which is the camera. Also, you have access to a Create shortcut menu, which we will be using a little later on. The same options can be accessed in the IDE’s top menus as well.

While you are looking at the Hierarchy tab, select Camera so we can discuss the Inspector panel next.

Here you can see all of the properties that make up the camera for our game. Unity does a great job of visualizing all the parts that can be configured on each object in your Scene. The Inspector panel not only allows you to modify values, even on the fly while the game is running, but it also lets you add additional functionality onto any GameObject via the Add Component button.

We will get into some of these components a little later on, especially scripts, which will make up a huge part of your coding experience. For now, it’s important to note that a GameObject is anything in the game itself and may be the camera, the player, or even more complex objects like levels, UI or even utilities we build to help us visualize elements in the game. Next up is the Project tab.

Think of this as a view into the project folder itself. To help you better understand it, go to where you created your project on your system and open it up.

As you can see, in addition to all of the additional files that make up the Unity game project, you will see there is an Assets folder. This becomes your default location for everything you put in your game. Here we will store artwork, sounds, scripts, and prefabs, which are reusable pre-configured GameObjects.

The final two things I want to cover may be self-explanatory but are always useful to review. In the upper-left corner you have a set of controls to help you navigate the Scene window.

While these tools are mostly focused around navigating a scene in 3D mode, they don’t have much use in 2D mode. When working in 2D the tool you will use the most is the Hand to simply drag the screen around on the x- and y-axis.

The other set of controls handles playback and allows you to test the game.

Simply hit Play to start the testing in the Game tab.

You will also notice the Pause and Step-Forward buttons. These are incredibly helpful in allowing you to move through the game frame by frame to see what is going on. You can also go back to the Scene tab while playing the game and modify values of GameObjects at runtime. It’s important to note that any changes you make in the Inspector panel while running the game don’t get saved; it simply allows you to try things on the fly without having to stop testing, make a change, and recompile.

GameObjects

Before we get into the coding and specific 2D tools, I wanted to provide some information about GameObjects, which are the building blocks of a Unity game. As you begin to flesh things out, you will start by creating these GameObjects in the Scene. Some of them will represent your Player, bad guys, and level while others will make up utilities and Gizmos, which we will learn about later on, to help you manage other GameObjects in the game.

To get you used to working with GameObjects, let’s just create a simple cube and position it in our Scene. Go to the GameObject menu at the top, or the Create menu from the Hierarchy panel, and select Cube.

Now, if you check your Hierarchy panel, you will see the cube and the camera. Select the cube to bring it up in the Inspector panel.

If you run your game now, you will not see the cube. Likewise, you can click on the camera to preview the Scene without even hitting Run.

We can fix this by adjusting the cube’s z-axis in the Inspector window to 0.

Now, if you run the game, you will see the cube.

Notice that we still have the Inspector panel open with the cube. You can continue to play with the cube’s properties while the game runs. If you roll over any number property, you will see the cursor change into a two-sided arrow, and you can use that to click and drag the value in the field up and down. Give it a try with the x and y properties of the cube. Since we are in 2D mode, modifying the z-axis will not do anything eventful. When you stop running the game, all of the values will reset themselves.

Wrapping Up

At this point you sound be familiar with the Unity IDE and the new settings for working in 2D. In the next post I’ll cover a primer on C# in Unity and how to start making basic scripts for your own games. Stay tuned!

Also, don’t forget that to checkout Amazon’s GameCircle plug-in for Unity to help you integrate cross-platform leaderboards, achievements, and game data synchronization. The plug-in works on iOS, Android, and Fire OS plus with the built-in Whispersync for Games component you can back up all of your user’s game data to the cloud across all three platforms. You can now download it from the Scripting/Integration section of the Unity Asset Store.

Introduction to Unity Part 2: Learning C#

- Jesse Freeman (@jessefreeman)

 

Want the latest?

appstore topics

Recent Posts

Archive