pxlNav

Description:

• Primary pxlNav engine module

Source:

• pxlNav.js, line 91

Examples

// Example of a pxlNav environment setup
//   This is how you would initialize the pxlNav environment for your project
import { pxlNav, pxlEnums, pxlUserSettings, pxlOptions } from './pxlNav.js';
 
// Verbose Level
//   NONE = 0, ERROR = 1, WARN = 2, INFO = 3, DEBUG = 4
const verboseLevel = pxlEnums.VERBOSE_LEVEL.INFO || 3;
 
// Project name
const projectTitle = "Your Project Title";

// Booting rooms
const startingRoom = "YourEnvironment";
const bootRoomList = [startingRoom];

// pxlRoom folder path, available to change folder names or locations if desired
const pxlRoomRootPath = "../pxlRooms";
// User settings for the default/initial pxlNav environment
//   These can be adjusted from your `pxlRoom` but easily set defaults here
const userSettings = Object.assign({}, pxlUserSettings);
userSettings['height']['standing'] = 1.75; // Standing height in units; any camera in your room's FBX will override this height once loaded
userSettings['height']['stepSize'] = 5; // Max step height in units
 
// Target FPS (Frames Per Second)
//   Default is - PC = 60  -&-  Mobile = 30
const targetFPS = {
  'pc' : 45,
  'mobile' : 30
};

// Copy the default options
let pxlNavOptions = Object.assign({},pxlOptions);
pxlNavOptions.verbose = verboseLevel;
pxlNavOptions.fps = targetFPS;
pxlNavOptions.userSettings = userSettings;
pxlNavOptions.pxlRoomRoot = pxlRoomRootPath;

// Initialize the pxlNav environment
const pxlNavEnv = new pxlNav( pxlNavOptions, projectTitle, startingRoom, bootRoomList );
pxlNavEnv.init();

// Subscribe to events emitted from pxlNav for callback handling
//   Non loop - pxlNavObj.subscribe("pxlNavEventNameHere", procPages.functionName.bind(procPages));
const printEvent = ( eventType, eventValue )=>{
  console.log( eventType, eventValue );
};
const myClassObj = new MyCustomClass();

// Subscribe a single function to an event -
pxlNavEnv.subscribe( "booted", printEvent );

// Or multiple event subscriptions -
const pageListenEvents = [ "booted", "shaderEditorVis", "roomChange-Start", "roomChange-Middle", "roomChange-End", "fromRoom", "pingPong" ];
pageListenEvents.forEach( ( eventType )=>{
   // Subscribe functions to events -
  pxlNavEnv.subscribe( eventType, printEvent );
  // Make sure to bind the class object if you are using class methods
  pxlNavEnv.subscribe( eventType, myClassObj.eventHandler.bind(myClassObj) );
}); 

// Trigger events within pxlNav
// Possible triggers -
//   "camera" - Change the camera position, either 'roam' or 'static'
//   "warptoroom" - Change the room to a new room
//   "roommessage" - Send a message to the current pxlRoom, add a `onMessage( eventType, eventValue)` method in your pxlRoom to get outside messages.
//   "ping" - Send a "pong" event
pxlNavEnv.trigger( "warptoroom", "changeRoom", "SaltFlatsEnvironment" );
pxlNavEnv.trigger( "camera", "roam" );
 
// For testing purposes, trigger a `pingPong` event
//   Subscribe to the `ping` event
const pongPrint = ( eventType, eventValue )=>{
  console.log( eventType, eventValue );
};
pxlNavEnv.subscribe( "pingPong", pongPrint );

// Trigger the `pingPong` event
pxlNavEnv.trigger( "ping" );

// pxlNav Event List
//   "booted" : Emitted after the engine has fully booted and is ready to be addressed.
//   "shaderEditorVis" : Returns a [bool]; Emitted when the shader editor is toggled on or off.
//   "roomChange-Start" : Emitted when the room change transition begins.
//   "roomChange-Middle" : Emitted when the room change process occurs mid transition.
//   "roomChange-End" : Returns a [bool]; Emitted when the room change transition ends.
//   "fromRoom" : Returns a custom object; Emitted from your Room code you choose to emit during run time.
//   "device-keydown" : Returns an [int]; The just pressed key.
//   "device-keyup" : Returns an [int]; The just released key.
//   "device-resize" : Returns an [{height:#,width:#}]; Height Width object of the new window size.
//   "camera-move" : Returns a {'pos':vec3(),'dist':float}; Emitted when the camera moves.
//   "camera-rotate" : Returns a [quaternion]; Emitted when the camera rotates.
//   "camera-jump" : Returns a [bool]; Emitted when the camera jumps to a new position.
//   "camera-fall" : Returns a [bool]; Emitted when the camera starts to free-fall / gravity.
//   "camera-landed" : Returns a [bool]; Emitted when the camera lands from a jump / fall.
//   "camera-collision" : Returns a [bool]; Emitted when the camera collides with an object.
//   "pxlNavEventNameHere" : Never emitted; You did some copy'pasta.
//   "help" : Hello! I'm here to help you!
//   "pingPong" : Send 'ping', Get 'pong'! - pxlNav.trigger('ping');
//
//   ** NOTE : callbacks get an event object shaped -  **
//   **   callbackFn( eventType, eventValue ) **
//   **   eventValue = { 'type' : *eventName*, 'value' : *data* } **

// Listen to when pxlNav has finished booting
const printBoot = ( eventType, eventValue )=>{
  console.log( "pxlNav has booted!" );
  console.log( eventType, eventValue );
};
pxlNavEnv.subscribe( "booted", printBoot );

Parameters:

Name	Type	Description
options	object	The options object for the pxlNav environment
projectTitle	string	The title of the project
startingRoom	string	The initial room to load
roomBootList	Array.<string>	A list of rooms to load

Returns:

Type

pxlNav