Ancient Brain

Worlds Minds Users Uploads JS code Search

Intro

Introduction Features

---

Definitions Principles The AI model

---

Teaching Register a class

Learn

Getting started P5 tutorial Three.js tutorial

---

Coding course Coding course II Coding for kids WebGL course AI exercises

Browse

Starter Worlds

---

Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds

---

Advanced search

Docs

Docs API docs

Register

Register Forgot password

   Login

// animation using a PNG which contains all the frames - a spritesheet
// heavily modified from:
// http://stemkoski.github.io/Three.js/Texture-Animation.html 

// Combine multiple PNGs into one PNG sheet:
// https://draeton.github.io/stitches/ 




// ===================================================================================================================
// === Start of tweaker's box ======================================================================================== 
// ===================================================================================================================

// The easiest things to modify are in this box.
// You should be able to change things in this box without being a JavaScript programmer.
// Go ahead and change some of these. What's the worst that could happen?

AB.clockTick       = 100;

// switch 2D or 3D view:

const show3d = false;


// --- Santa
// https://www.gameart2d.com/freebies.html
// https://www.gameart2d.com/santa-claus-free-sprites.html
// each frame is 934 x 641

const tilewidth         = 934;           
const tileheight        = 641;

const SPRITESHEET = "/uploads/humphrys/1541956090.png";
const htiles            = 3;        // horizontal tiles
const vtiles            = 4;        // vertical tiles 
const notiles           = 11;       // how many tiles total (may be some blank at end)


/*
// --- Cowboy runner 
// http://stemkoski.github.io/Three.js/images/run.png
// they are 64 x 64 squares 

const tilewidth         = 64;                    
const tileheight        = 64;

const SPRITESHEET = "/uploads/humphrys/1541953485.png";
const htiles            = 10;
const vtiles            = 1;
const notiles           = 10;
*/


const skycolor          = 'lightblue';             // sky/background color

const startRadius       = tilewidth * 1;       // distance from centre we start the camera at
const maxRadius         = tilewidth * 100;      // maximum distance from camera we render things 

// Christmas music 
// https://www.dl-sounds.com/royalty-free/latest-christmas-news/
 const MUSICFILE = '/uploads/humphrys/ChristmasNews.wav';

// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================


// You will need to be some sort of JavaScript programmer to change things below the tweaker's box.





var texture;                    // one texture, but its offset is changed every step 
var currentTile = 0;        	// which tile is currently being displayed 

const skycolorObject    = new THREE.Color ( skycolor.toLowerCase() );                              



AB.world.newRun = function() 
{
    
    if ( show3d )   ABWorld.init3d ( startRadius, maxRadius, skycolorObject ); 
    else            ABWorld.init2d ( startRadius, maxRadius, skycolorObject );            

	texture    = new THREE.ImageUtils.loadTexture ( SPRITESHEET );
	
	// sheet is bigger than object
	// do not re-size whole sheet to object
	// rather only show one tile of the sheet on the object
	// https://threejs.org/docs/#api/en/textures/Texture.repeat
	texture.wrapS = texture.wrapT = THREE.RepeatWrapping;            
	texture.repeat.set ( 1 / htiles, 1 / vtiles );

	var material = new THREE.MeshBasicMaterial ( { map: texture, side:THREE.DoubleSide } );
	var shape;
	
    //	    shape = new THREE.PlaneGeometry ( tilewidth, tileheight );
	
    if ( show3d ) 	 shape = new THREE.BoxGeometry ( tilewidth, tileheight, tileheight );   
    else    	     shape = new THREE.BoxGeometry ( tilewidth, 1, tileheight );     

     var object = new THREE.Mesh ( shape, material );
     
	ABWorld.scene.add(object);
};

 
    
AB.world.nextStep = function()               
{  
		var row = Math.floor ( currentTile / htiles );
		var col = currentTile % htiles;
			
		texture.offset.x = col / htiles;        // offset into the sprite sheet, and then only one tile is visible because of texture.repeat above 
		texture.offset.y = row / vtiles;

        // the render will then show the new texture offset 
        // update to next tile for next timestep, tiles numbered 0 to (notiles-1)
        
		currentTile++;
		if ( currentTile == notiles )	currentTile = 0;    // loop round 
};  



// background music 

 var music = new Audio ( MUSICFILE );
 music.loop = true;                   // loop music forever            
 music.play();
 AB.standardAudioButtons ( music );   // create standard play and pause buttons