Creating a Cross-Platform Marketplace

Having a unified buying experience is an essential quality of a true cross-platform application. Many people have asked how I overcame the challenge of creating a consistent marketplace for my cross-platform game, Hero Mage, so I’ve put together this brief tutorial and downloadable example. This tutorial doesn’t cover writing ANE’s or setting up vendor-specific storefront; rather, it demonstrates how to write a common interface that can leverage existing native extensions to create a unified user experience that allows you to compile your app from a common code base. The provided examples demonstrates a unified marketplace that functions identically for billing services that include Paypal, Google Play, Amazon, and iTunes.

Requirements
  • Example Files
    • Hero Mages Cross Platform Market Assets and Source (Download)
  • User level
    • Intermediate

Bridging Proprietary Vendor Billing Systems

It shouldn’t surprise that every platform uses its own proprietary billing systems. Because of the sheer variety of systems, most cross-platform development toolkits like Flash and Adobe AIR don’t come pre-equipped with API’s for connecting to specific vendors. Instead, the developer is open to write native platform extensions that connect with Flash. Or, if you’re like me and would rather spend time developing a better application experience, you can use already made extensions available for a minimal fee from companies like Milkman Games.

The key to bridging the gap between the different billing platforms is finding the commonalities at each level of interaction. Here’s a breakdown of what this looks like:

  1. Native Source Code Implementation
  2. Native Extension to Cross-Platform
  3. Store Interface
  4. Vendor-Specific Store Class
  5. Market Interface

Think of your “marketplace” as the unified buying experience you want to create in your application. Think of “stores” as the vendor-specific billing system through which your user will purchase content.

For each platform, development starts with the native code examples provided by each vendor’s unique billing API. For cross-platform development using runtimes like Flash and Adobe Air, this native code can be packaged as an extension that enables Flash developers to access native billing functions.  These first two steps are handled for you if using ANE’s sold by third party services like Milkman Games.

Creating the store interface is trivial- simply define all the common methods your store will need. In the case of Hero Mages, there are three items users can buy, so the interface class looks like this:

1
2
3
4
5
6
7
8
9
package hm.interfaces{
     public interface IStore{
          // Interface methods:
          function buyDarkAvengers():void;
          function buyArcaneDisciples():void;
          function buyMapSaves():void;
          function destruct():void;
     }
}

For each vendor, you’ll create a store class that implements this interface. My example files show what this implementation looks like for Google Play, iOS, and Amazon using Milkman’s store kit ANE’s. I’ve also included a store class for Paypal.

Your marketplace is your app-specific store designed to provide users with a common buying experience across all platforms. It handles adding the content for users after successful purchase as well as validating what content the user already owns. Hero Mages implements the following interface:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package hm.interfaces{
     public interface IMarketplace{
          // Interface methods:
          function addDarkAvengers():void;
          function addArcaneDisciples():void;
          function addMapSaves():void;
          function showPrompt(promptType:String, promptTitle:String = null, promptMessage:String = null, promptParameters:Object = null):void;
          function log(msg:String):void;
          function setMarketInstructs(instructs:String):void;
          function populatePrices(products:Array):void;
          function get hasDarkAvengers():Boolean;
          function get hasArcaneDisciples():Boolean;
          function get numMapSaves():int;
          function get hmId():int;
     }
}

Hero Mages Cross-Platform Marketplace

With the example files, I’ve also included  Hero Mages’ marketplace UI assets in FLA form and its screen class that demonstrates how to wire everything together.

Managing Stores Across Platforms

The magic line that makes all of the cross-platform possible is in the HM_MarketplaceSceen.as class:

1
store = new HM_AppSettings.storeClass(this);

This code determines which type of store class will be created depending on the context of how the application is deployed.

How it Works

  1. For each targeted platform (Web, iOS, Google Play, Amazon, etc.) setup either:
    1. Platform-specific FLAs for Flash Professional with application descriptors for each platform
    2. New Projects in Flash Builder with application descriptions for each platform
  2. Each platform specific FLA/Project will have a unique settings class allowing programmer to customize platform specific settings
  3. For controlling the marketplace, we specify in this settings class which store object (HM_AmazonStore, HM_GooglePlayStore, HM_iOSStore, etc.) we want to use
  4. Include in each project the appropriate platform specific ANE to handle the native code implementation of the store front

The end result is a project that uses a common interface for marketplace and is only compiled with code needed to run the vendor-specific store on the targeted platform

Where to Go From Here

Unifying your store fronts with a common interface is only half the battle. A bulk of your time will be spent setting up your item SKU’s in each vendor’s internal systems.  Whether you intend to use third-party ANE’s or write your own native billing extensions, I highly recommend Alex Lieburt’s fantastic store setup tutorials on the Adobe Developer Connection:

About Ross Przybylski

Ross Przybylski is a game designer, Flash developer, and technical consultant. He is the founder of D20Studios, LLC and the creator of Hero Mages, a cross-platform, multiplayer strategy game. He is also the Director of Flash Development for Reflection Software, an innovative eLearning services provider company. You can learn more about Ross on his website and follow him on Twitter @RossD20Studios.
This entry was posted in Cross-Platform Development, Game Development, Mobile Development, Uncategorized and tagged , , , , , , . Bookmark the permalink.

Comments are closed.