Playable Template with PixiJS and Spine

A starter template for creating playable ads using PixiJS with Spine animation support and TypeScript. This template combines:

• PixiJS - Fast, flexible 2D WebGL renderer
• Pixi Spine - Spine animation runtime for PixiJS
• @smoud/playable-sdk - SDK for creating playable ads with standardized events and methods
• @smoud/playable-scripts - Build and development tools optimized for playable ads

Demo

Try out this template:

• Open in CodeSandbox

Features

• PixiJS v7 integration for high-performance 2D graphics
• Spine animation support with pixi-spine runtime 4.1
• Animated Spineboy character example
• TypeScript support for better development experience
• Hot module replacement during development
• Game structure with PixiJS, Spine, and SDK integration
• Event handling (resize, pause, resume, volume, etc.)
• Installation button implementation
• Interaction tracking
• Responsive canvas scaling

Getting Started

1. Clone this repository
2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

4. Build for production:

   npm run build

Project Structure

• src/index.ts - Main entry point with SDK initialization
• src/Game.ts - Game logic with PixiJS application and Spine animation setup
• src/index.css - Styles for your playable
• src/index.html - HTML template
• assets/ - Directory for your game assets (sprites, textures, etc.)

Looking for More?

Check out other available templates for different frameworks and use cases:

• playable-template-base - Template base version
• playable-template-base-js - Template base version (JavaScript)
• playable-template-pixi - Template with PixiJS
• playable-template-three - Template with Three.js
• playable-template-phaser - Template with Phaser