スマートフォンゲームでよく話題に上る「IPコラボレーション」や「IPもの」。原作アニメやキャラクターの人気が高ければ高いほど注目を集めやすい一方で、ファンからの期待に応えるのは一筋縄ではいかないはず。

人気アニメ「ガールズ＆パンツァー」のスマートフォンアプリの開発・運営を手がけるGamegate社に訪問し、アプリ開発上のこだわりや、AmazonとIPコンテンツを上手く活用した施策などについてお話を伺いました。

We have just completed the final Amazon Developer Spotlight competition of the year. With hundreds of submissions received across UK, US, and Germany, our Amazon Appstore experts had a tough job selecting the winners...

Today we’re excited to announce the all-new standalone Amazon Appstore mobile app for Android. The new mobile app is redesigned from the ground up, allowing customers to enjoy the same apps and games that they engage with on Fire TV and Fire tablets on their mobile phones.

Martin King, technical lead at Casual Arts, explains how life has changed for the team since their winning the UK Developer Spotlight (an indie featuring initiative on Amazon Appstore). Casual Arts specialise in hidden object games.

The Amazon Appstore Spotlight is back, just in time for new customers unwrapping their new Fire devices this December.

Is summer keeping you too busy to stay up-to-date with our tutorials, articles, and announcements? Never fear - the week in review blog is here!

Vision Mobile recently shared a new chart showing a higher percentage of Amazon Fire developers above the app poverty line versus other platforms. More specifically, 59% of developers distributing their apps on the Amazon Appstore make more than $500 per month versus <50% on other platforms. The chart also showed that developers continue to experience increased monetization in the Appstore - Amazon had a bigger proportion of developers making $5,000+ a month compared to developers on other platforms. We’re excited to see developers like you expand their reach and monetize apps through the Amazon Appstore.

Today the Amazon Appstore is available on more than just Fire devices including the all-new Amazon Fire TV Stick. The Amazon Appstore for Android is also pre-loaded on BlackBerry 10 devices and carriers including O2, EE, Deutsche Telecom and others on millions of Android devices. This wide reach gives your app 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.  Here’s what some developers are saying about their experience with Amazon:

“When we compared our 2014 data, we noticed that ARPU on Amazon was 70% higher than on Android and 15% higher than on iOS”.                                                                          

– Elad Kushnir, VP of Business Development at Playtika

“The Average Revenue Per Download (ARPD) on Amazon is actually higher than on Android.”   

– Jean-Baptiste, CEO at DJIT

Check out the infographic below to learn more about where your apps will be available once you distribute them on the Amazon Appstore then get started and submit your apps here.

P.S. The holidays are the best time of the year to submit your apps. Read our latest blog post to learn more: Three Important Stats About Holiday Device Sales

Now available in 41 additional international locations, the Amazon Appstore has expanded its global presence to 236 countries and territories. Publishing your Android app on Amazon means you can reach customers from around the world, including those in countries that were previously inaccessible.

Africa, Asia, the Middle East, Oceania

This expansion represents an opportunity for Amazon developers to target new areas in Africa, the Middle East, and Southeast Asia, including some of the most populous and connected nations in the world. Singapore, Indonesia, Saudi Arabia, Nigeria, Bangladesh, Egypt, and Turkey are just a few examples.

Local Restrictions

All apps will not be approved to be published in all countries, based on local restrictions. As always, you should familiarize yourself with any content guidelines or rules that may be imposed by specific governments in the countries in which you select to distribute your apps.

Impact on Existing Apps

For apps that are already live on the Amazon Appstore (or that you are in the process of submitting), distribution to these new areas will be enabled automatically if:

• You selected In all countries and regions where Amazon sells apps when asked where you would like the app to be available; and
• The app complies with the local restrictions described above.

As before, you can also fine tune where your app is distributed in each geographic region by selecting countries and territories individually.

More Countries, More Potential Customers

As the Amazon Appstore expands its presence around the world, your potential customer base expands with it. With the ability to publish your Android apps and games to 236 countries and territories around the world, Amazon helps you reach a truly global audience.

Here are the newly added locations (see Countries & Territories Eligible to Shop for Apps for the complete list of all accessible areas):

-peter (@peterdotgames)

The Amazon Appstore will soon be available on more devices. Early yesterday, BlackBerry announced that the Amazon Appstore preloaded on BlackBerry 10 devices starting this fall.

What Does This Mean For Amazon Appstore Developers?

This is great news for Amazon Appstore developers. In addition to Fire phone, Kindle Fire tablets, Fire TV and Android devices, you’ll now have the opportunity to distribute your apps and games on BlackBerry 10 devices. This expanded reach gives you the opportunity to sell to more customers.

What Does This Mean for BlackBerry World Developers?

You don’t have to wait to migrate your app or game to the Amazon Appstore. Click here to give your app a test run now. Submitting your app to the Amazon Appstore is easy. Register for a developer account at no cost. If you have questions, see these FAQs.

IDC conducted an Amazon sponsored survey of 360 mobile application developers to understand their key motivators and gather feedback on their experience developing apps for the Kindle Fire platform versus Android and iOS. According to the survey, 65% of surveyed developers say that total revenue on Kindle Fire was similar or better than on other platforms. 76% of surveyed developers say that Amazon helps them connect to new customer segments.

To download the full report, click here.  

65% of Developers Say Total Revenue Similar or Better Than Other Platforms

IDC asked developers who currently build apps for the Kindle Fire to describe the return-on-investment profile of Kindle Fire and compare it to other platforms.

65% of the surveyed developers also say that the Total Revenue achieved on the Kindle Fire is similar to, or even better that, what they experience with other major platforms.  74% of the same developers say that Average Revenue per App/User is similar to or better than other platforms.

76% of Developers Say Amazon helps them Connect with New Segments

Finding new customers can be extremely difficult.  Developers who build apps for the Kindle Fire say:

The Kindle Fire platform can be a significant source of net new business and “reach” for developers at a time when new segments may be difficult to find on competing platforms.

Download the Report

To learn more, click here to download The Case for Developing Mobile Apps for the Amazon Appstore and Kindle Fire report prepared for Amazon by IDC.

With the release of the latest version of the Amazon Appstore for Android, customers using the Amazon Appstore on Android tablets and phones have more ways to discover and purchase apps.

New Features for Customers

The Amazon Appstore for Android is continuously updated with new features that improve the customer experience and make it easier for developers to monetize their apps. Here are a few recent updates:

• Customers can purchase your apps, and associated in app items, with Amazon Coins on Android tablets and phones
• Amazon Coins launched in France, Italy and Spain
• Enhanced Search with the ability for your customers to purchase your app directly from their search results

More Ways to Buy Apps with Amazon Coins

Amazon Coins can be purchased directly inside the Amazon Appstore for Android. Customers save up to 10% on apps, games and in-app items by purchasing Amazon Coins. Customers are shown their current Coins balance at the top of the screen as well as during checkout.

Figure 1- Available Amazon Coins displayed at top with ability to purchase at discount when clicking

Any of your apps or games that reward Amazon Coins when purchased can also be easily discovered in the Amazon Appstore for Android. Customers can search only for those apps and games that reward Amazon Coins from the navigation menu. We also feature apps and games rewarding Coins directly on the home screen.

Amazon Coins are a great way for your apps to get noticed in the Amazon Appstore. As a developer with a qualified app in the Appstore Developer Select program, customers who purchase your app will be rewarded with Amazon Coins for simply downloading your app. They can then use these Coins to buy other apps and in-app items.

Figure2- Apps and games that reward Amazon Coins can be viewed from the menu and on the main screen

Purchasing Directly from Search

Customers now get search hints whenever they’re searching for new apps and games. The title, publisher, customer rating and price are all displayed on the search hint. If a customer clicks on the button to make a purchase (Free or Paid), then more details about the app or game will be displayed, along with a “Get App” button that allows customers to immediately download your app or game. 

Figure 3- Purchasing a new game directly from search

Publish Your App to the Amazon Appstore

With the Amazon Appstore, customers can purchase your apps and games from a web browser, Kindle Fire tablets, Amazon Fire TV and select Android devices. Customers can find your apps and games in a variety of ways inside the Amazon Appstore.

If you have not submitted your Android app yet to the Amazon Appstore, registration is free and simple to complete and over 75% of Android tablets we tested work on Kindle Fire devices with no additional development required. Amazon also offers a free Mobile App SDK that supports In App Purchasing, Mobile Ads, A/B Testing, Analytics and more. Once your app is in the Amazon Appstore you can expand your reach to Kindle Fire and Amazon Fire TV devices at any time directly from within the developer console.

You may also want to check out these additional developer resources:

• Create a Free Amazon Developer Account
• Submit Your Android App
• Download the Amazon Mobile App SDK
• Android & Fire OS
• Amazon Fire TV
• Kindle Fire

-Dave (@TheDaveDev)

Last year, we launched Amazon Coins in the US, UK, and Germany. As of today, Amazon Coins are available to even more customers in Europe as we are expanding the program to France, Spain, and Italy. We’re giving millions of Euros (100 Coins = €1)  worth of coins to customers in France, Italy, and Spain, so this is a great time to submit new apps to the Amazon Appstore and ensure your existing apps are available for distribution in these countries.

Amazon Coins allows Amazon customers to buy and enjoy Android apps and in-app items at a discount, with savings of up to 10%. As a developer, you are paid whether your apps or in-app items have been purchased with Amazon Coins or another payment method, and you’ll continue to get your full 70% revenue share. Since the launch of Amazon Coins in the US, UK, and Germany, customers have already purchased hundreds of millions of Amazon Coins and are actively using them on Android phones and tablets, including Kindle Fire devices, representing real dollars to developers.

500 Coins for Amazon Appstore Customers

Kindle Fire owners will receive 500 free Coins automatically in their accounts and, for a limited time, users of the Amazon Appstore on Android phones and tablets will receive 500 Coins once they’ve updated the client and downloaded an app. During the promotion, you’ll have additional opportunities to boost your sales while customers enjoy buying apps with their free Coins. We ran a similar promotion after we launched Coins in the US, UK, and Germany, and developers gave us positive feedback about the monetization they achieved in conjunction with the promotion. Here’s what a few of them had to say:

“Sales went up 10-fold (1000%) for about a week during the Amazon Coins promotion and 500% afterwards.” –Barnstorm Games

“We saw a significant increase in revenue after the Amazon Coins announcement. Revenue from Amazon Coins during the launch week was higher than previous week’s revenue. What was also interesting is that our cash receipts also saw a lift from Coins.” — Halfbrick Studios Pty Ltd

 “Our SMS texting and calling app revenues grew more than 300% on Kindle Fire the day after Amazon Coins went live, with a staggering 78% coming from Coins. We’re convinced that this virtual currency makes sense for developers no matter what category their app is in; it certainly does for us.” — textPlus, Inc.

We continue to receive positive feedback from developers about the monetization they see on Amazon and their ability to connect with new customers via Amazon Appstore. Learn what developers like Pixowl, TuneIn, and Toca Boca have to say in our latest developer blog.

No API Integration Necessary

To benefit from Amazon Coins, you do not need to integrate an API. If your apps are already available on the Amazon Appstore and available for distribution to customers in France, Italy, and Spain, you’re already set. If you have new apps and games that are still in development, then you’ll want to submit them soon to take advantage of this promotion. If you have a new Android app, we’ve found that 75% of Android apps we’ve tested just work on Amazon Appstore, with no coding changes required. Test your APK in less than 10 minutes with our drag-and-drop testing tool. It’s also a good idea to ensure your apps are available in France, Italy, and Spain, which you can check from your account on the developer portal.

For the past several years, HTML5 web app developers have been using the Apache Cordova project to create an incredible array of apps targeting native platforms. Many, such as the Wikipedia Foundation's mobile app, have had tens of millions of downloads across platforms. Cordova is the fundamental tool which enables developers to use open web technologies - HTML5, CSS3 and JavaScript - to create both fundamental and innovative mobile apps. This is why Amazon supports the Cordova project and enables developers to target the Amazon Fire OS platform. We want to enable web developers to take advantage of the advanced capabilities of the Chromium-based Amazon WebView integrated into Kindle Fire tablets running Fire OS.

We've covered the basics of setting up your Amazon Fire OS development environment for Cordova, so for this post, I'm going to create a new web app from scratch, covering all the varied little details you'll need to know to get your app from idea to Appstore. To do this, I created a simple drawing app that shows off both mobile and platform specific capabilities, and used Cordova to wrap it up into a native app ready for publication.

For the sake of simplicity, I developed an app targeting just Amazon devices. Though much of the power of Cordova is the fact that it allows developers to create cross platform apps, it can also be used as a way of quickly creating apps targeted at a single specific platform. This lets me use some more advanced HTML5 capabilities available on the Fire OS platform - in this case the accelerated 2D drawing canvas - and it also lets me cut some corners and use my rusty Java skills to add a few lines of native code to enable some needed functionality. In the future, I'll take this bit of native code and turn it into a plugin that can be used to target a wider range of devices.

I called the app Simple Draw, and it's available on the Amazon Appstore right now, downloadable for free. If you have a Kindle Fire device, go grab the app and try it out. It's a very simple drawing app targeted at young children - you can draw with your finger in various neon colors, clear the screen, or save the drawing as an image, which you can view in your Photos and share with others.

Here's everything you'd need to do to create this app yourself.

Setup

First, we'll start with the basics - setting up a new Cordova project and adding in support for Fire OS: 

$ cordova create simpledraw com.example.html5.simpledraw SimpleDraw
$ cd simpledraw
$ cordova platform add amazon-fireos

This will create our new Cordova project directory, pre-fill it with the skeleton folders, and then add in the appropriate Fire OS support files (amazon-fireos). (The first time you run through this process, you'll be prompted to download the AWV SDK found here) Make sure you change the package name to be unique to you or your company, rather than com.example.html5 in the above example.

The resulting directory should look like the following - I expanded a couple important folders to show where we're going to be tinkering.

Web Assets

Now that we've got somewhere to put our app's files, we can go in and clear out the placeholder files and folders that are in the project’s www folder. This is where your app's web files go. The Simple Draw web app above only needs an index.html and a main.js JavaScript file, but other apps could have various text files, images, sound files, etc.

Let's take a quick look at both files.

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Draw</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
        <style>
            html, body { height: 100%; margin: 0; padding: 0; background: #fff; color: #fff}
        </style>
    </head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

You'll notice there's not much there. It's really just a placeholder for a full-screen app that uses the HTML5 Canvas, so it doesn't need to be very complicated. It's important to set the viewport meta tag correctly, so my app knows that it's meant to be used on a handheld device, and to then call the JavaScript file at the end to make sure the DOM is loaded by the time I want to start manipulating it.

JavaScript

Next is the JavaScript, which is a bit longer, but is relatively straight forward and doesn't rely on any external libraries. The script creates a new full-screen canvas element, then listens for touch events that are used to draw on and to select from the menu bar at the bottom. There is a colorful gradient to choose your color and a couple icons at the bottom left which are used to clear the screen or save the image to your device's Pictures directory. Everything except that last bit can be done using pure JavaScript.

var canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
var context = canvas.getContext("2d");
context.fillStyle = "#000";
context.lineCap = 'round'

document.body.appendChild(canvas);

var pictureCanvas = document.createElement("canvas");
var pictureContext = pictureCanvas.getContext("2d");

var width;
var height;

var menuSize = 40;
var lineColor = '#fff';
var lineWidth = 6;
var isDown = false;
var points = [];

// listen for events
window.addEventListener("resize", reset, false);

canvas.addEventListener("touchstart", pointerDown, false);
canvas.addEventListener("touchmove", pointerMove, false);
canvas.addEventListener("touchend", pointerUp, false);

document.body.addEventListener("touchcancel", pointerUp, false);

//set up and begin
reset();
requestAnimationFrame(animate);

// functions
 function reset(e){
    width  =  window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    pictureCanvas.width = width;
    pictureCanvas.height = height - menuSize;
    context.fillRect(0,0, width, height);
    drawMenuBar();
    lineColor = "#fff";
    points = [];
 }

function drawMenuBar(){
    // color gradient
    var grad = context.createLinearGradient(menuSize * 2, height - menuSize, width, height);
    grad.addColorStop(0, 'black');
    grad.addColorStop(1 / 8, 'red');
    grad.addColorStop(2 / 8, 'orange');
    grad.addColorStop(3 / 8, 'yellow');
    grad.addColorStop(4 / 8, 'green')
    grad.addColorStop(5 / 8, 'aqua');
    grad.addColorStop(6 / 8, 'blue');
    grad.addColorStop(7 / 8, 'purple');
    grad.addColorStop(1, 'white');
    context.fillStyle = grad;
    context.fillRect(menuSize * 2, height - menuSize, width, height);

    // icons
    var refreshIcon = new Image();
    refreshIcon.onload = function(){
        context.drawImage(refreshIcon, -2 , height - menuSize);
    }

    refreshIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACg0lEQVRYCe2XMa8pQRTHx/MSjRBRENEpCBEJEoUQvgO1UqGlFirxaURoVSqh0IioFKIRiYRCKObt2XdnMruse8bam1vsSTZzdpzzPz9nszOzDkIIVa5fa39+LdkXmA1o9gnZHbQ7aLYDZvP/mhWA/FQqReLxOAmFQqrcfr8nq9WKLJfLT8irCzUs1lKXx+Oh3W6XbrdbamTwW6fToRArqy/Ey4FBYrVapYfDwYjrYR5iIUcoKuPLAbbb7QcA7ATkvgGJB2w0Gg8s8BhbrRZNJpPU7XarF/gw9+zxg4YkJA4wk8nQ+/2uAez3+9TlchkWhN8gRjTQAC0JSBzgZDIR69Bms4kuArGigdZHAXO5nKhPB4OBTAE1FnJEA00k5Pcd7PV6ojaNRqNYcR4Xi8U0GqD5McDZbMbFF4sFVvghDnKZgSYGEHWaCYfDitZ/m8/nzJUexVxR85UQCtDv93ON4/HIfVlHzBU1X+mgAN8RflZUhBI1n8WyORTgbrdj8SSbzXJf1hFzRc1XOihAZd3iGul0mihvMb/HOspbTCCXmajJ5ozGb98m2XXQ6XTSWq2m0bV0HVT+GdXvJJFIRAMAMeyCNe50OvFt0PKdBAqLe/F4POYwDIqNlUqFLXUU/B/biwEATiLX65UadS+RSNDz+cwBL5cL95lj2WmGdahUKj3tntfrpZvNhnGoo/70Y/l5kEHqR4fDQUejkQZOvPnRE7UeDu7r9brIo/HX67WpbxLHV0FlMGfBYJAUi0VSKBRIuVxWv/KUzpLb7UYCgQBR3uq3CnwMUF/d5/ORfD6vQg+HQzKdTvUhqHvLAFHVEUGorQ6hY1mIDWi2tXYH7Q6a7YDZ/H90B3qb+wyF3wAAAABJRU5ErkJggg==";

    var downloadIcon = new Image();
    downloadIcon.onload = function(){
        context.drawImage(downloadIcon, menuSize, height - menuSize);
    }
    downloadIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABCklEQVRYCe2X0QmDUAxFtegA4hCKfy4huIvgCG4hiLMIziHuoP4LqQFfwVLa2puWR0ngka/7OJ4EVNdxHNqOtXWxlmwHU0B0QmpQDaIG0LzIDlZV5RDR4aBgJi8CaC77RldA1KoaVIOoATSvO6gGUQNoXndQDaIG0Lz1O8gPyD/up06SJLQsy/aN+l61bXvq/juec3AmnOc5rev6krDve/J9//eADFqW5VPAcRwpDEMEjrOfGTS5pmkeQs7zTHEco3A4oOd51HXdAZJHn2WZBBwOyCaDIKBhGG6QRVFIwckAMmQURTRNE9V1LQknB8iQaZoSj9zsp0R390u2ZmdZ/yZRQHRx1ODfG7wCaGXbMjKT0dAAAAAASUVORK5CYII=";

    //icons border
    context.strokeStyle = "#fff";
    context.lineWidth = 2;
    context.beginPath();
    context.moveTo(menuSize, height-menuSize);
    context.lineTo(menuSize, height);
    context.moveTo(menuSize * 2, height-menuSize);
    context.lineTo(menuSize * 2, height);
    context.stroke();
}

function saveImage(){
        if(confirm('Save Image?')){
            pictureContext.drawImage(canvas, 0, 0);
            var dataUrl = pictureCanvas.toDataURL("image/png");
            if(typeof SimpleDraw !== 'undefined'){
                SimpleDraw.savePNG(dataUrl);
            }
        }
}

function eraseImage(){
    if(confirm('Erase Image?')){
        reset();
    }
}

function drawLine(){
    if(points.length > 1){
        context.strokeStyle = lineColor;
        context.lineWidth = lineWidth;
        context.lineCap = 'round'
        context.lineJoin = 'round';
        context.shadowBlur = lineWidth/2;
        context.shadowColor = lineColor
        context.beginPath();
        context.moveTo(points[0].x, points[0].y);
        for (var i = 1; i < points.length; i++) {
            context.lineTo(points[i].x, points[i].y);
        }
        context.stroke();
    }
}

// events
function animate(time) {
    drawLine();
    requestAnimationFrame(animate);
}

function pointerUp() {
    isDown = false;
    points = [];
}

function pointerDown(e) {
    e.preventDefault();

    var point = {};
    point.x = e.targetTouches[0].pageX;
    point.y = e.targetTouches[0].pageY;

    if(point.y > height - menuSize){
        if(point.x < menuSize){
            eraseImage();
            return;
        }
        if(point.x > menuSize && point.x < menuSize * 2){
            saveImage();
            return;
        }
        if(point.x > menuSize * 2){
            var data = context.getImageData(point.x, point.y, 1, 1).data;
            lineColor = 'rgb(' + data[0] + ',' + data[1] + ',' + data[2] + ')';
        }
    }  else {
        isDown = true;
        points.push(point);
    }

}

function pointerMove(e) {
    e.preventDefault();

    var point = {};
    point.x = e.targetTouches[0].pageX;
    point.y = e.targetTouches[0].pageY;

    if(isDown && point.y < height - menuSize){
        points.push(point);
    }
}

A few notes about the Javascript:

• For the menu, I used an image program to create some basic icons, which I converted into data:// URLs. This makes the script a bit more contained. Images still take time to load even from a data URL, so I added onload listeners to draw the icons to the canvas.
• Rather than draw to the canvas every time the event fired, I call the drawLine() function using requestAnimationFrame. This makes sure the screen is ready to be redrawn, and makes the app a bit more performant.
• Since modern desktop browsers enable touch-event emulation, I didn't bother adding in mouse events as I'm targeting only mobile devices.
• The saveImage() function has a reference to a SimpleDraw object. This doesn't exist in the web engine until we add it using the Java wrapper (below).

So we're all set with the main functionality of the app, and can quickly test the script by building/running the application on the device.

Please note: Cordova apps for Fire OS don't currently support emulation because of the integrated nature of Amazon WebView.

Plug your Kindle Fire into your computer via a USB cable and perform:

$ cordova run

On first run, this will compile the application using the Android Developer Toolkit, then push the app's debug version to your Kindle Fire so you can test.

Hey, it works! Well, almost - it doesn't actually save the images, so we'll have to wire that up next.

Native

When I first started testing out the functionality of the app, I assumed I'd be able to use the Cordova FileSystem API plugin to save the resulting image to the local file system. So I added the plugin via the command line (see the Cordova docs on how to do this), and used it to save the canvas image data as files. But I couldn't see them from the Photo gallery! That's not useful for this particular application - so I uninstalled that plugin, and decided to add that bit of native functionality myself.

The problem is that Fire OS (and other Android systems) keeps a separate database of images that needs to be updated in order for the images to appear in the photo browser. So in addition to saving the file, I needed to update the system to recognize the fact that the file is an image and to update the database. To do this, I needed to add a few lines of Java code to add in a custom JavaScript Interface in Cordova's native app wrapper code, found deep within the platforms folder here:

/simpledraw/platforms/amazon-fireos/src/com/example/html5/simpledraw/SimpleDraw.java

If you've done any sort of Java development, you'll recognize what that long path is - it's the standard Java directory system based on the name of the package. I had to do some digging on the web to find the right APIs to wire together, but in the end it was only a few lines of Java. I would have preferred to stay within JavaScript, but having the option to dive into native code if I needed to was very useful.

Here's the resulting SimpleDraw.java CordovaActivity class:

package com.example.html5.simpledraw;

import org.apache.cordova.*;

import java.text.SimpleDateFormat;
import java.util.Date;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.provider.MediaStore;
import android.util.Base64;
import android.view.Gravity;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class SimpleDraw extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();

        //super.getFactory().enableDeveloperToolsUnix(this.getPackageName() + ".devtools");

        this.appView.addJavascriptInterface(new JSObject(), "SimpleDraw");

        super.loadUrl(Config.getStartUrl());

    }

    public class JSObject {

        @JavascriptInterface
        public void savePNG(final String dataUrl) {

            runOnUiThread(new Runnable() {
                @Override
                public void run() {

                    SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd-HH-mm-ss");
                    String fileName = "drawing-" + df.format(new Date()) + ".png";

                    byte bytes[] = Base64.decode(dataUrl.substring(dataUrl.indexOf(",") + 1), Base64.DEFAULT);

                    Bitmap bmp = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);

                    MediaStore.Images.Media.insertImage(getContentResolver(), bmp, fileName, fileName);

                    Toast toast = Toast.makeText(getApplicationContext(), "Image saved!", Toast.LENGTH_SHORT);
                    toast.setGravity(Gravity.CENTER, 0, 0);
                    toast.show();


                }
            });

        }
    }

}

Notes about the native code:

• The native functionality is exposed to the web engine using the addJavascriptInterface() method, which takes a parameter defining the name of the JavaScript object you want to use - in this case I named it the same as the project, but it could be anything.
• The commented out line in the onCreate() method can be used to enable access to Chromium's remote Developer Tools. You can then connect to your device remotely using this command, then browsing to localhost:9222 in your browser: 

adb forward tcp:9222 localabstract:com.example.html5.simpledraw.devtools

• From JavaScript, the canvas is converted into an image/png data URL using the toDataURL() method. This is what’s passed to the Java class via the SimpleDraw.savePNG() method. It's then converted into an array of bytes to be saved as an image file.
• Rather than using the basic File API, I used the built-in MediaStore class to save the converted PNG image to the file system, which automatically updates the device's internal data table so it appears instantly in the Photo gallery.

AndroidManifest.xml

In order for the app to be able to save files to the device's local storage, it needs to have the right permissions. This is done by editing the AndroidManifest.xml file found in the /platforms/amazon-fireos directory.

In the example below, you can see that the WRITE_EXTERNAL_STORAGE permission has been added to the list of user-permissions, allowing the app to save images to the file system. Additionally, the android:screenOrientation flag has been set in the application element to lock the screen to landscape mode only.

The resulting file looks like this: 

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" android:windowSoftInputMode="adjustPan" package="com.lab126.html5.simpledraw" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:name="SimpleDraw" android:screenOrientation="landscape" android:theme="@android:style/Theme.Black.NoTitleBar">

... more xml configuration here ...

</manifest>

Now when you test out the app and click the download arrow, the image will be saved and you'll get a native Toast message pop up confirming the process. 

If you check in the Photos app, you'll be able to see your image. Hooray! So the app now works, but we're still a few steps away from publishing it to the Amazon Appstore.

Config.xml

The Cordova config.xml settings file can be found in your main project folder. Enter in your contact details, the name and description of your app, and then add in Fullscreen and BackgroundColor preference tags (see below) which will make your app fill the entire screen, and prevent any sort of color flash as it loads.

Here's what the config.xml file looks like: 

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.html5.simpledraw" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>SimpleDraw</name>
    <description>
        A sample drawing app using Cordova for Amazon Fire OS
    </description>
    <author email="beattier@amazon.com" href="http://www.amazon.com">
        Russell Beattie, HTML5 Platform Technical Evangelist
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="Fullscreen" value="true" />
    <preference name="BackgroundColor" value="0xff000000"/>
</widget>

Icons

Next we'll need to replace the different sized app icons that our project used before we are ready to publish. These images are found in the /platforms/amazon-fireos/res directory, and will need to be created and copied over manually. I used a drawing program to whip up a quick app icon and then exported it as a giant 512px square image (you'll use this later when submitting your app to the Appstore). I then shrunk the images as needed and saved them as icon.png files in the following folders:

/res/drawable = 96px

/res/drawable-hdpi = 72px

/res/drawable-ldpi = 36px

/res/drawable-mdpi = 48px

/res/drawable-xhdpi = 96px

Now when you build and run your project, the generic Cordova icon will be replaced by your app's custom icon.

Signing

We're almost there! One last step before we're ready to publish the app is to create a signed -release version of the app's .apk file. Up until now, the Cordova build process has created -debug versions of the app for testing, but now we'll set up the files needed to sign the apk when the --release flag is passed to the build command.

First, you'll need to either create or locate your Java keystore. If you haven't created one yet, definitely check out the Android documentation which summarizes the keystore process quite well. However the following command will get you started:

$ keytool -genkey -v -keystore my-release-key.keystore -alias myapps -keyalg RSA -keysize 2048 -validity 10000

This will prompt you for all the information you need to enter and create a new keystore file for you to use to self-sign your app. Put the keystore somewhere safe and accessible from your Cordova project, and don't forget the password!

Next, you need to create a new text file called ant.properties in the base of the amazon-fireos directory: /platforms/amazon-fireos/ant.properties. In it, add two lines pointing at the appropriate directory: 

key.store=/Users/example/keystore/my-release-key.keystore
key.alias=myapps

Now you can create a release version of your app to submit to the Amazon Appstore by just using the Cordova command line tool. Call the build command and add a --release flag like this:

$ cordova build --release

This time it will go through the normal build cycle, and then stop to ask you for your password to your keystore and alias. Once it is complete, there will be a brand new signed apk ending in -release.apk saved in the platform's ant-build directory. For example /platforms/amazon-fireos/ant-build/SimpleDraw-release.apk .

Submitting your app

Now that you have your apk ready to go, you can submit it to the Amazon Appstore! You'll need to gather some screenshots, that big icon image from earlier, and fill out some details describing your app on the site, but within a short time the submission process will be complete.

To start the process, head to the Amazon Developer Portal and click on the "Submit Android App" button (you'll need an Amazon developer account of course – that’s free).  That will guide you through the process - for more information about the type of information you need to answer, definitely check out our helpful submission documentation as well.

Good luck!

Hopefully this will save you some time when developing your own Cordova app for Amazon Fire OS. Though it may seem like a lot of steps the first time through, it's really only a few extra files that need to be created or changed, and the end result is a fun new app created using familiar, yet powerful, web technologies. Good luck with your app - and definitely contact us if you have any questions or concerns!

One Game, Everywhere

Gone are the days where you can make a game and publish it to a single platform and expect to be successful. Like any business that sells consumer products, you need to go where the people are. That means the games you make should run on a multitude of different platforms and accept any number of different input types. There’s also one more catch: your players expect to be able to share their game data across all of these different platforms, especially if they are paying for your game multiple times. With that in mind I have outlined what I call “responsive game design,” which is modeled loosely after some of the core concepts of responsive web design. It’s also a framework that will help you think about enabling your games to scale across multiple platforms.

Applying Responsive Design Concepts To Games

On the web, responsive design is a set of guidelines and best practices that help websites scale from desktop to mobile. Web developers discovered early on that it was too difficult to maintain separate designs for desktop and mobile so this solution allows a site to re-adjust to any resolution based on a set of ideal screen sizes. While responsive design on the web focused solely on adapting a site’s visual design based on common viewports, the notion of responsive game design builds on this concept to include other key aspects you need to consider when making multi-platform games.

Responsive game design can be summed up in the following key requirements:

1. Game graphics and UI support multiple resolutions
2. Game mechanics work across multiple types of input
3. Publish to multiple platforms with the same codebase
4. Saved data is synced across all platforms

While most of these are already best practice for games in general, the collection of them represent a guideline for game designers moving forward to help reach the broadest audience possible.

1. Scaling Game Visuals Across Different Resolutions

If you come from desktop game development this is not going to be a big shock to you since it’s common practice to support multiple-resolutions and varying computer performance. While mobile development is relatively new in this space, over the past few years, mobile device resolutions have tended to normalize around a few key aspect ratios (3:2, 4:3 & 16:9) allowing the same desktop game concepts to be applied:

• Build for aspect ratios not fixed resolutions
• Create simplified, dynamic UI that can adapt to different resolutions
• Have degradable graphics that can adapt to the power of the device

It’s also important to note that optimizing a game’s graphics goes well beyond just the resolution. Each system has different performance so being able to dynamically scale the game’s visual effects across these different platforms is critical as well. Especially when dealing with high pixel density displays, you could actually end up pushing incredibly high resolutions on devices that can’t fully support them. Also you may need to tone down specific special effects on mobile verses desktop or perform special optimizations when going to TV to account for slower display refresh rates. Make sure that you take into account these limitations and plan accordingly.

2. Supporting A Single Control System Across Different Input Types

A single game can support three types of input (mouse + keyboard, controller and touch) based on the device they are on. While thinking through each of these inputs, game designers should consider how their game will work going from desktop to tablet to phone and TV. Will the controls hold up on a system without physical buttons or should the gameplay be simplified a bit to account for the lowest common denominator?

It’s completely possible to have games work with a single input mechanic but a lot of planning and consideration must go into the overall design of the game. Most devices accept a game controller at this point so while not ideal, players can still plug one in if virtual controls are too frustrating. It’s especially important to take into account that not everyone who plays your games will have access to a controller. The Fire TV ships with a remote by default so if you want to capture the largest audience possible you’ll want to make sure you support the remote out of the box. You can still publish a controller only game but keep in mind that each input limitation you place on your game shrinks your potential audience accordingly.

3. Publishing a single game from the same codebase.

For years, developers had leaned on C++ as a cross platform solution to making games that work across multiple platforms. A successful port could be anything above 50% core reusability. I still know developers who build their own game engines that allow them to manually port from platform to platform but that process can be time consuming and if you are a small indie developer, the additional bug testing time may not possible to maintain across all the devices you want to support. That is why it is critical to find a cross publishing solution you feel comfortable with.

The most popular game engine today for indies is Unity 3D. From there other solutions, which grow in complexity, are Unreal Engine, CryEngine. There also some smaller more specialized game engines like GameMaker Studio. If pre-built game frameworks are not your thing, consider some cross compilers like HaXe, Monkey and CocoonJS. Either way there are many options and each will have some kind of impact on your end result or the platforms you can reach so do your research while designing your game.

4. Saving State Across Devices

What good is having a game that can be played on multiple platforms but the player needs to restart their progress every time? A key component to the responsive game design concept is allowing a single game session to extend across different devices allowing your player to start on one platform and continue on another. Imagine being able to play a Fire TV game at home then continuing your game on the go on any mobile device?

Steam was one of the first game publishing platforms to introduce cloud based game saving and since then more companies have offered similar solutions. The biggest issue is that these services are platform specific. For a developer to support different platforms, they would have to roll their own solution. However, built into our GameCircle API is WhisperSync, which can be used to not only have cross platform leaderboards but also sync game data across different mobile devices.

By adding GameCircle’s WhsperSync to your game, you can leverage this to let your players go from mobile (iOS, Android and FireOS) to the Fire TV for the full 10-foot experience then sync their game data back across all of these devices. While GameCircle doesn’t support PC syncing today, being able to have a consistent saved game mechanism for your mobile and Fire TV builds is a huge advantage for your players and a step in the right direction.

Where Do We Go From Here?

While this is just the foundation for a larger concept in game design, it’s up to you as the game designer to help define and shape the future of what gaming on multiple platforms means to the player. At Amazon we are incredibly focused on the customer and we build tools to help you as the developer serve them better. Over the next few years we will see more and more games that reach across platform walls to enable a gamer to pick the device and play style they want and with the correctly designed game, that player will have the same experience no matter where they choose to play your game.

Resources:

• GameCircle https://developer.amazon.com/public/apis/engage/gamecircle
• Amazon Fire TV https://developer.amazon.com/public/solutions/devices/fire-tv
• Publishing to Amazon Appstore https://developer.amazon.com/public/support/submitting-your-app

- Jesse Freeman (@jessefreeman)

One question developers commonly ask us is how they can grow their business by introducing their app to new Amazon customers. The Amazon team is here to help. Each day this week we’ll offer a tip on how to market your app on Amazon.

Marketing Tip #2: Submit your app to our marketing team for consideration for a featured marketing placement. 

We constantly strive to introduce Amazon customers to new apps they’ll love, thus helping our developers grow their businesses. We highlight apps through our storefronts on mobile devices, Kindle Fire, and Amazon.com and through marketing vehicles like e-mail, Facebook, and Twitter.  For example, as I write this, featured placements include “Highly Rated Apps and Games” and “Featured New Releases,” and your app would be considered for these placements as applicable.  Your app may also be considered for seasonally relevant placements like summer travel, back to school, or learning apps.

If you are interested in a featured placement through our marketing vehicles, we invite you to tell us more about your mobile app by completing our marketing request form available through the Amazon Mobile App Distribution Portal. 

Follow these steps to complete the form:

1) Check the Amazon Specific ID Number (ASIN) for your app on the Amazon.com site.

2) Navigate to the marketing section of the FAQ page. 

3) Click the link to the form available under the question “How do I get my app marketed?” 

4) Submit information about your app for our consideration by filling out the form.  Please include the ASIN number you recorded from the Amazon.com site.