@smoud/playable-scripts

Features

Installation

npm install --save-dev @smoud/playable-scripts

Quick Start

your-playable/
 ├── src/
 │ ├── index.html
 │ └── index.ts
 ├── package.json
 └── build.json (optional)

{
 "scripts": {
 "dev": "playable-scripts dev",
 "build": "playable-scripts build"
 }
}

npm run dev

npm run build google

🎮 Playable SDK

✨ Why Use Playable SDK?

🔧 Implementation Guide

1. Installation

npm install @smoud/playable-sdk

2. Basic Setup

import { sdk } from '@smoud/playable-sdk';
// Initialize SDK with container dimensions
sdk.init((width, height) => {
 new Game(width, height);
});

3. Event Handling

sdk.on('resize', game.resize, game);
sdk.on('pause', game.pause, game);
sdk.on('resume', game.resume, game);
sdk.on('volume', game.volume, game);
sdk.on('finish', game.finish, game);

4. Playable Lifecycle

// Mark as resources loaded and gameplay started
sdk.start();
// Mark as complete
sdk.finish();
// Handle CTA clicks
installButton.onclick = () => sdk.install();

🔍 Alternative Approach

CLI Arguments

Target Ad Network

playable-scripts build unity

Supported Networks

Supported Protocols

Build Configuration (build.json)

{
 "filename": "{app}_{name}_{version}_{date}_{language}_{network}",
 "app": "AppName",
 "name": "ConceptName",
 "version": "v1",
 "language": "en",
 "googlePlayUrl": "https://play.google.com/store/games",
 "appStoreUrl": "https://www.apple.com/app-store/"
}

Output directory and filename template

Defines

if (__DEV__) {
 console.log('Dev mode is active');
}
if (AD_NETWORK === 'google') {
 // google network specific code
}
console.log(`Current language: ${LANGUAGE}`);

{
 "defines": {
 "CUSTOM_DEFINE": "'custom value'",
 "FEATURE_FLAG": "true"
 }
}

Meta Tags

<meta name="HandheldFriendly" content="True" />
<meta name="cleartype" http-equiv="cleartype" content="on" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />

Examples

Development

playable-scripts dev --port 3000 --open

Building

npx playable-scripts build applovin

npm run build applovin

npx playable-scripts build ironsource --protocol dapi --version endcard_2

npm run build ironsource -- --protocol dapi --version endcard_2

API Reference

Default Options

const options = {
 outDir: 'dist', // Output directory for build files
 buildConfig: 'build.json', // Path to build.json configuration file
 tsConfig: 'tsconfig.json', // For TypeScript projects, path to tsconfig.json file
 jsConfig: 'jsconfig.json', // For JavaScript projects, path to jsconfig.json file
 port: 3000, // Development server port number
 open: false, // Whether to open browser automatically
 protocol: 'none', // Ad protocol to use (none, mraid, or dapi)
 network: 'preview', // Target Ad network
 zip: false, // Should the build be zipped? Works only for Ad networks which allows both .zip and .html
 filename: '{app}_{name}_{version}_{date}_{language}_{network}', // Template for output filename
 app: 'AppName', // Application name used in build filename and APP define
 name: 'ConceptName', // Concept name used in build filename and NAME define
 version: 'v1', // Version name used in build filename and VERSION define
 language: 'en', // Language code for localization
 orientation: 'both', // Orientation identifier. Adaptive design, which supports both orientations - is preferred
 googlePlayUrl: 'https://play.google.com/store/games', // Google Play Store URL
 appStoreUrl: 'https://www.apple.com/app-store/', // App Store URL
 dev: undefined, // Development mode flag
 skipRecommendedMeta: undefined, // Skip recommended meta tags injection
 debugger: undefined, // URL of debugger script to inject
 defines: {}, // Defines options
 compilation: {
 // Compilation options
 allowTemplateLiterals: true, // Enable or disable template literals in the build
 dropConsole: true // Drop console.log, console.warn, and console.info for a production build
 },
 adNetworkNames: {
 // Mapping of ad network identifiers to their display names in filenames
 preview: 'Preview',
 applovin: 'AL',
 unity: 'UNITY',
 google: 'GOOGLE',
 ironsource: 'IS',
 facebook: 'FB',
 moloco: 'MOLOCO',
 adcolony: 'ADCOLONY',
 mintegral: 'MINTEGRAL',
 vungle: 'VUNGLE',
 tapjoy: 'TAPJOY',
 snapchat: 'SNAPCHAT',
 tiktok: 'TIKTOK',
 appreciate: 'APPRECIATE',
 chartboost: 'CHARTBOOST',
 pangle: 'PANGLE',
 mytarget: 'MYTARGET',
 liftoff: 'LIFTOFF',
 smadex: 'SMADEX',
 adikteev: 'ADIKTEEV',
 bigabid: 'BIGABID',
 inmobi: 'INMOBI'
 }
};

Configuration

const { options, mergeOptions, parseArgvOptions } = require('@smoud/playable-scripts');
// Merge custom options with defaults
const customOptions = mergeOptions(options, {
 outDir: 'custom-dist',
 network: 'applovin'
});
// Parse CLI arguments
const newOptions = parseArgvOptions([
 {
 name: 'custom-option',
 hasValue: true,
 defaultValue: 'default'
 }
]);
// Change build options
newOptions.app = 'Example';
newOptions.version = 'v4';
// Change defines options
newOptions.defines = {
 APP_STORE_URL: JSON.stringify('https://www.apple.com/app-store/');
 __DEV__: JSON.stringify(false);
}
// Merge new options with defaults
const finalOptions = mergeOptions(options, newOptions);

Webpack Configuration

const { makeWebpackDevConfig, makeWebpackBuildConfig } = require('@smoud/playable-scripts');
const { webpackCommonConfig } = require('@smoud/playable-scripts');
const { merge } = require('webpack-merge');
// Create development configuration
const devConfig = makeWebpackDevConfig(customOptions);
// Create production configuration
const buildConfig = makeWebpackBuildConfig();
// Create production configuration with custom definitions
const buildConfig2 = makeWebpackBuildConfig(customOptions, customDefinitions);
// Create production configuration with custom definitions and custom webpack config to merge
const buildConfig3 = makeWebpackBuildConfig(customOptions, customDefinitions, customWebpackConfig);
// Create your own webpack config, based on webpackCommonConfig
const customConfig = merge(webpackCommonConfig, {
 // ...
});

Development Server

const { runDev } = require('@smoud/playable-scripts');
// Start development server with custom config
runDev(webpackDevConfig);
// Start development server with default config
runDev();
// Start development server with custom definitions
runDev(null, null, customDefines);

Production Build

const { runBuild } = require('@smoud/playable-scripts');
// Run production build with custom config
runBuild(webpackBuildConfig);
// Run production build with default config
runBuild();
// Run production build with custom options
runBuild(null, customOptions);

Plugins

const { ExitAPIInjectorPlugin, DebuggerInjectionPlugin } = require('@smoud/playable-scripts');
// Google Ads ExitAPI integration
new ExitAPIInjectorPlugin();
// Custom debugger integration
new DebuggerInjectionPlugin('http://debugger-url');

Demo Projects

Issues