Client Skin System

Technical Overview

Overview

The DIRECT client skin system is a framework for presenting the user interface (UI) and specifying the user experience (UX) of a custom deployment application. The skin system allows for UI and UX modifications without requiring changes to the DIRECT source code. Skin Assets are a collection of web application resources (files) that include HTML, CSS, Javascript and Image files that are included in the DIRECT application. The skin system has been developed using modern web frameworks such as JQuery, AngularJS and Bootstrap, making it easy for your web team to be contributors in the development and maintenance of your client UI/UX.

Rendering

DIRECT supports two UI rendering options:

  1. Native OS rendering- Native utilizes the onboard rendering capabilities of the Windows and Mac Operating Systems. This option keeps the client executable size very small (typically 1-3MB depending on image sizes). However, supporting older OS versions can introduce compatibility issues as some modern web technologies may not be supported on those versions. We recommend keeping Native UI/UX designs simple in order to minimize these potential compatibility issues. Our native skin templates are tested to work on supported versions.
  2. Chromium Embedded Framework 3 (CEF3) – DIRECT has been integrated with CEF3 to provide a modern UI rendering solution that is consistent across all OS versions. Modern web experiences made using HTML5 and CSS3 are possible to designers without the compatibility concerns of OS versions that exists with Native rendering. However, the CEF3 payload is larger, adding approximately 30 MB to the total executable size.

 

CEF3 vs Native: Choosing the right option*

Deployment Use Case
Operating System Version Download Manager Installer Integrated Installer/Launcher Single-App Launcher Multi-App Launcher
Win XP SP2, SP3 Native N/A N/A CEF3 CEF3
Win 7 No SP Native N/A N/A Native or CEF3 CEF3
Win 7 SP1 Native Native Native Native or CEF3 CEF3
Win 8 All Native Native Native Native or CEF3 ?
MacOS 10.7+ Native Native Native Native or CEF3 CEF3
Linux Ubuntu+** Native Native Native Native or CEF3 CEF3
Linux Others CEF3 CEF3 CEF3 CEF3 CEF3

*DIRECT may be integrated with any third-party application.  See Workflow Engine API.
​**Any Linux distribution that includes WebKitGTK+2.0

Skin Templates

DIRECT includes several skin templates geared toward specific use-cases that make getting started even easier. All of the sample skin templates are written utilizing modern web-technologies such as AngularJS and Bootstrap. With the client skin system, it is possible to develop skins with other UI frameworks.

  • Downloader
  • Installer
  • Launcher
  • Integrated Installer/Launcher
  • Multi-App Launcher
  • Branch Mgr

Download Manager (DLM)

The download manager use case supports the download and delivery of content to end-users machines. It shows advanced download statistics and allows the user to optionally select the download location on their machine. When the download is complete, the user has the ability to open the directory where the content was downloaded or launch an executable that was delivered.

The download manager is for customers who have large content objects and want to ensure that the data is delivered with a minimal amount of errors. Often, browsers might have problems delivering large content.

Typically, the download manager has an application icon and background image or banner that is customizable.

Advanced Features

  • Open a web page when done
  • Customizable color scheme
  • Desktop or start menu shortcuts
  • Require and record End User License Agreement (EULA)
  • Third-party login (SSO)

Installer

The installer use case allows for the installation, repair and uninstallation of software or games. It supports the delivery and installation of common system prerequisites that are required for the proper installation and use of complex pieces of software.

The installer can prompt the user to accept and end-user license agreement. Once the user accepts they can select the directory where they want to install the software to and whether or not they want desktop or start menu shortcuts to be created. After all the installation customization options have been selected, the installer will perform the installation and at the end will launch the application. The installer also supports uninstallation and repair for when the user wants to modify the installation.

One benefit of using the installer is a small initial delivery (< 2MB typically) which means that you can control the installation experience quicker. For games, this helps create a seamless onboarding process that reduces abandonment and increases first-time player logins.

Features

  • Create/delete directories and files on the system
  • Read and write JSON, ini, plists
  • Install prerequisites such as DirectX, .NET runtime, Visual C++ runtime
  • Create and update and check for the existence of registry keys
  • Download content
  • Allow the user to select whether or not to create desktop or start menu shortcuts
  • Launch binary executables that are part of the install
  • User-selectable installation directory
  • Require and record End user license agreement (EULA)
  • Create restore points on Windows
  • Extract zip files
  • Install third-party MSIs
  • Run applications on an Apple Disk Mounted Image (DMG)
  • Customize banner

Advanced Features

  • Fully customizable UI
  • Third-party login (SSO)

Launcher

The launcher use case supports the downloading and updating of a single game. With it, it is possible to control the user experience and engage the user while they wait for the latest version of the game to be deployed to their system. The user interface is fully customizable and can be made to match the look and feel of your game. The launcher supports displaying external RSS feeds so that the user can read about the latest news related to the game. Additionally, the latest patch notes can be shown to the user so they know what changes to expect when they get in the game. There is also a section that allows the user to receive support from the developer if needed.

Features

  • Multiple content panes for engaging the user in different ways
  • Require and record use of end user license agreement (EULA)
  • Third party login (SSO)
  • Ability to repair the game from with-in launcher
  • Periodically checks for updates while running
  • Self-updating technology to update the launcher when the skin changes

Advanced Features

  • Social login with Facebook, Google, etc
  • Client certificate selection

Integrated Installer/Launcher

The integrated installer/launcher use case combines both the launcher and installer use cases in a single application. The benefit of using an integrated launcher and installer is that there is one application that performs all the functions of installing and updating the game - there is no longer a need to manage two separate deployment applications because they have both been streamlined into one. The end-user is presented with an installer that installs the game and once it is installed it then functions as a launcher. It can perform both the uninstallation and repair of the game as well.

Getting users into the game quicker is what the integrated installer/launcher was designed to do. Some games require a large initial download which is where users can be lost. And even when the users do get past that point, they are presented with multiple prompts - each delaying entry into the game. But with the integrated installer/launcher, we minimize both the size of the initial download (to typically < 3MB) and also minimize the number of clicks requiring entry into the game.

The only limitations with this particular use case is that HTML/JS/CSS must be compatible with IE8 for games targeting Windows.

Multiple Application Launcher

The multiple application launcher use case is used for the management and deployment of multiple applications. Several applications can be downloaded, installed, and updated simultaneously. The skin provided uses the example of an ecommerce store where users purchase products and it gets added to their game library automatically. In this instance the remote ecommerce store acts as a paid-content management and entitlement system. It gives the client application information about the products that the user has access to and allows them to perform certain actions on it such as installation, uninstallation, and repair.

Features

  • User login and registration
  • Ability to purchase content from a content library (the ecommerce store)
  • Multiple simultaneous products
  • User profile information

This is an advanced implementation and will require more development and integration resources.

Studio Branch Manager

The branch manager use case allows your entire team to keep up to date with the latest changes for your product. If you have a large development shop with huge assets it can be difficult for everybody to stay in-sync and that is where the branch manager comes in. It resides on the end-user’s machine and allows them to quickly update a particular branch of your product.

Features

  • Allows your entire team to keep up to date
  • Launch executables with custom arguments
  • Periodically check for latest updates
  • Multiple branches and versions

Localization

The client skin system supports the ability to localize the user interface into different languages. By default, it has automatically detects the language that the user has configured on their system and displays it in the user interface. Additionally, the user can override and select the language that best suits them. Localization strings are stored in JSON which is a common text-based format that can be easily sent to a third party translation service.

Minimum Requirements

Minimum system requirements for the client application are as follows:

Operating System Version Native Browser
Windows XP SP3 IE 8.0
Macintosh 10.7 Safari 5.1
Linux Ubuntu 12.4 WebKitGTK+2.0

The client application on Windows and Linux is 32-bit for maximum compatibility. On Macintosh, the client application is a universal binary that is both 32-bit and 64-bit.

Advanced System Integration

The client skin system can be used to notify the user through the operating system mechanisms.

  • System tray icon
  • Customizable system tray context menu
  • Animated tray icons
  • System notifications

Security Features

The client skin system has the ability to limit changes to the system.

  • Restrict HTTP connections to specified host names
  • Restrict registry reads and writes to specified locations

The deployment console tools for DIRECT include a code signing utility that adds additional security for executable file types (.exe, .dll, .dmg, .app, .dylib, .framework).