jixi

    1.1.16 • Public • Published
    UNDER DEVELOPMENT
    

    jixi

    jixi is a lightweight game engine for PixiJS featuring responsive layout, scenes, sprites, camera, transitions and PSD exporting.

    Primary features include:

    • Navigation class including 6 built in transitions
    • Scene controller class with display life-cycle methods
    • Adaptive scaling and retina aware automatic layout driven from Photoshop, utilising the Choppy PSD publishing library
    • Library of 2d maths functions
    • A camera class for panning across a field of play
    • Input helpers including a button class
    • Google web font support

    Getting started

    $ npm install jixi --save
    

    Evoke in js ES6 module:

    const { createApp, utils, scaler, nav, ui, Btn } = require(`jixi`);
    
    // Nav
    
    import Home from './scenes/home.js';
    import Play from './scenes/play.js';
    
    const scenes = {
      
      home: {class: Home, sceneData: {}, default:true}, 
      play: {class: Play, sceneData: {}},
      
    }
    
    nav.setScenes(scenes);
    
    // UI 
    
    ui.registerPsdInfo(utils.requireAll(require.context('./ui', false, /.json$/))); // Path to PSD data
    ui.registerFonts({
      body: {
        fontURL: 'https://fonts.googleapis.com/css?family=Lato&display=swap', // Only accepts Google Fonts
        psdFontName: 'Lato-Regular', 
        fallbacks: ['Georgia', 'Times', 'Times New Roman', 'serif'] // Font family fallbacks
      }
    });
    
    // Scaler
    
    const artboardDims = {width: Math.round(756.0*0.5), height:Math.round(1334.0*0.5)}; 
    const artboardScaleFactor = 2.0; // How many px in a pt in art
    const artboardProjectionParams = {
      default: {
        alignment: {x:0, y:0}, // -1 (left/top) 0:(centered) 1:(right/bottom) 
        scaleToFit: 'contain', // `w` / `h` / `contain` / 'cover' (case insensitive). 
        minDensity: 1.0 // Limits up scaling. Eg. 1.0 will scale no larger than SD on retina. 
      },
      ui: {
        matchProjScale: 'default', // Match the scale of other projection before applying own limits 
        pinToProj: 'default', // Other projection will be used to position 
        minScale: 1, // Lock scale to no smaller than pts match with art.
        maxScale: 1.2 // Avoid oversized UI elements
      }
    };
    scaler.configureArtboard(artboardDims, artboardScaleFactor, artboardProjectionParams);
    
    // Kick off
    
    createApp(utils.e('game'), true, 1.0, () => {  
      gsap.to(utils.e('spinner'), 0.4, {alpha:0.0, ease:Linear.easeNone, onComplete:function(){
        utils.e('spinner').remove();
      }});
    });

    Docs

    Dependencies

    • PixiJS (v5.3.7)
    • GSAP with PixiPlugin (v3.6.0)
    • Google Webfont API (v1.6.26)

    Also:

    Release History

    Install

    npm i jixi

    DownloadsWeekly Downloads

    17

    Version

    1.1.16

    License

    MIT

    Unpacked Size

    114 kB

    Total Files

    19

    Last publish

    Collaborators

    • loksland