error454 · May 26, 2015 19:17
diff --git a/index.html b/index.html
 <html>
  <head>
    <meta charset="utf-8">
    <script src="js/gsap/TweenMax.js"></script>
    <script src="js/gsap/TimelineMax.js"></script>
    <script src="js/coherent_animations.js"></script>
    <script src="js/coherent.js"></script>
    
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="player">
        <img src="img/player.png", width=8, height=8 />
    </div>
    <div id="selector">
        <img src="img/selector.png", width=16, height=16 />
    </div>
    <canvas id="MapCanvas" width="256" height="256">    
    
    <div id="scene">
      <img id="logo-duration" src="img/unknown.png" />  
      <img id="logo-duration" src="img/quest.png" />
      <img id="logo-duration" src="img/selector.png" />
      <img id="logo-duration" src="img/world.png" />      
    </div>

    <script src="main.js"></script>
  </body>
 </html>
diff --git a/main.js b/main.js
 var bInitialized = false;

 function clamp(val, min, max){
    return Math.max(min, Math.min(max, val));
 }

 function LoadImage(path){
    var image = new Image();
    image.src = path;
    
    // Add an event listener so we can track when all the images have loaded
    image.addEventListener('load', ImageLoaded);
    return image;
 }

 function ImageLoaded(){
    ImagesLoaded++;
    if(ImagesLoaded == ImagesToLoad){
        engine.call("JS_ViewReady", CanvasWidth);
    }
 }

 function DrawLine(startX, startY, endX, endY){
    if(!BackgroundCTX){
        return;
    }
    
    BackgroundCTX.beginPath();
    BackgroundCTX.moveTo(startX, startY);
    BackgroundCTX.lineTo(endX, endY);
    BackgroundCTX.closePath();
    BackgroundCTX.stroke();
 }

 function WorldCoordToCanvasCoord(worldX, worldY){
    var x = (worldX / WorldWidth) * CanvasWidth;
    var y = (worldY / WorldHeight) * CanvasHeight;
    return [x, y];
 }

 function DebugDrawTiles(){
    for(iWorldX = 0; iWorldX <= WorldWidth; iWorldX += WorldTileLength){
        var start = WorldCoordToCanvasCoord(iWorldX, 0);
        var end = WorldCoordToCanvasCoord(iWorldX, WorldHeight);
        DrawLine(start[0], start[1], end[0], end[1]);
    }
    
    for(iWorldY = 0; iWorldY <= WorldHeight; iWorldY += WorldTileLength){
        var start = WorldCoordToCanvasCoord(0, iWorldY);
        var end = WorldCoordToCanvasCoord(WorldWidth, iWorldY);
        DrawLine(start[0], start[1], end[0], end[1]);
    }
 }

 function InitGlobals(){
    BackgroundC = document.getElementById("MapCanvas");
    BackgroundCTX = BackgroundC.getContext("2d");
    Player = document.getElementById("player");
    Selector = document.getElementById("selector");
    Player.style.position = "absolute";
    Selector.style.position = "absolute";
    
    UnexploredStyle = "rgba(0, 0, 255, 0.2)";
    ExploredStyle = "rgba(255, 0, 255, 0.2)";
    DebugStyle = "#00FF00";
    CanvasWidth = BackgroundC.width;
    CanvasHeight = BackgroundC.height;
    planetImage   = LoadImage("img/world.png");
    questImage    = LoadImage("img/quest.png");
    selectorImage = LoadImage("img/selector.png");
    PlayerImage   = LoadImage("img/player.png");
    UnknownImage   = LoadImage("img/unknown.png");
    
    ImagesToLoad = 5;
    ImagesLoaded = 0;
    
    MapLimitX = CanvasWidth - Player.clientWidth;
    MapLimitY = CanvasHeight - Player.clientHeight;
 }

 // [UE4] Tile size assumed to be a common divisor of the world size.
 function SetWorldSizeF(x, y, tileUnitLength){
    bInitialized = true;
    WorldWidth = x;
    WorldHeight = y;
    WorldTileLength = tileUnitLength;
 }

 // [UE4]
 function SetPlayerLoc(x, y, bDrawMission, missionX, missionY){
    if(!bInitialized){
        return;
    }
    
    Player.style.top = y - 4;
    Player.style.left = x - 4;
        
    if(bDrawMission){
        console.log(missionX);
        Selector.style.top = missionY - 8;
        Selector.style.left = missionX - 8;
    }
    else{
        Selector.style.top = -100;
        Selector.style.left = -100;
    }
 }

 function DrawPlanets(PlanetCoords){
    // Draw the planet
    var ImageWidth = 8;
    var ImageHeight = 8;
    
    for(iPlanet = 0; iPlanet < PlanetCoords.length; iPlanet += 2){
        var newX = PlanetCoords[iPlanet] - ImageWidth;
        var newY = PlanetCoords[iPlanet+1] - ImageWidth;
        BackgroundCTX.drawImage(planetImage, newX, newY, ImageWidth, ImageHeight);
    }
 }

 function DrawUnknowns(UnknownCoords){
    // Draw the planet
    var ImageWidth = 8;
    var ImageHeight = 8;
    
    for(iPlanet = 0; iPlanet < UnknownCoords.length; iPlanet += 2){
        var newX = UnknownCoords[iPlanet] - ImageWidth;
        var newY = UnknownCoords[iPlanet+1] - ImageWidth;
        //BackgroundCTX.fillRect(newX, newY, ImageWidth, ImageHeight);
        BackgroundCTX.drawImage(UnknownImage, newX, newY, ImageWidth, ImageHeight);
    }
 }

 function DrawTiles(TileCoords){
    BackgroundCTX.fillStyle = UnexploredStyle;
    BackgroundCTX.clearRect(0, 0, CanvasWidth, CanvasHeight);
    BackgroundCTX.fillRect(0, 0, CanvasWidth, CanvasHeight);
    BackgroundCTX.strokeStyle = DebugStyle;
    //DebugDrawTiles();
    
    var startX = 0;
    var startY = 0;
    var WorldTileCount = (WorldWidth / WorldTileLength);
    var CanvasTileLength = CanvasWidth / WorldTileCount;
    
    for(iTile = 0; iTile < TileCoords.length; iTile++){
        if(TileCoords[iTile]){
            BackgroundCTX.fillStyle = ExploredStyle;
        }
        else{
            BackgroundCTX.fillStyle = UnexploredStyle;
        }
            
        // The XY coordinates of the tile in space [0,1]
        startX = (iTile % WorldTileCount) / WorldTileCount;
        startY = ((iTile / WorldTileCount) - startX) / (WorldTileCount);
        
        // The canvas coordinates of the tile
        startX = startX * CanvasWidth;
        startY = startY * CanvasHeight;
    
        BackgroundCTX.clearRect(startX, startY, CanvasTileLength, CanvasTileLength);
        BackgroundCTX.fillRect(startX, startY, CanvasTileLength, CanvasTileLength);
    }
 }

 function DrawQuests(QuestCoords){
    var ImageWidth = 8;
    var ImageHeight = 8;
    
    for(iQuest = 0; iQuest < QuestCoords.length; iQuest += 2){
        var newX = QuestCoords[iQuest] - ImageWidth;
        var newY = QuestCoords[iQuest+1] - ImageWidth;
        BackgroundCTX.drawImage(questImage, newX, newY, ImageWidth, ImageHeight);
    }
 }

 function DrawStargates(StargateCoords){
    var ImageWidth = 8;
    var ImageHeight = 8;
    
    for(iStargate = 0; iStargate < StargateCoords.length; iStargate += 2){
        var newX = StargateCoords[iStargate] - ImageWidth;
        var newY = StargateCoords[iStargate+1] - ImageWidth;
        BackgroundCTX.drawImage(questImage, newX, newY, ImageWidth, ImageHeight);
    }
 }

 function DrawQuest(x, y){
    var ImageWidth = 8;
    var ImageHeight = 8;
    
    var newX = x - ImageWidth;
    var newY = y - ImageWidth;
    BackgroundCTX.drawImage(questImage, newX, newY, ImageWidth, ImageHeight);
 }

 // [UE4]
 function DrawStaticMapFeatures(TileCoords, PlanetCoords, UnknownCoords, QuestCoords, StargateCoords){
    //console.log("Tiles: " + TileCoords.length + " Planets: " + PlanetCoords.length + " Unknown: " + UnknownCoords.length);
    DrawTiles(TileCoords);
    DrawUnknowns(UnknownCoords);
    DrawPlanets(PlanetCoords);
    DrawQuests(QuestCoords);
    DrawStargates(StargateCoords);
 }

 window.addEventListener('load', function() {
    InitGlobals();
    
    if(engine != null){
        engine.on("SetPlayerLoc", SetPlayerLoc);
        engine.on("SetWorldSize", SetWorldSizeF);
        engine.on("DrawStaticMapFeatures", DrawStaticMapFeatures);
    }

  //var img = document.getElementById("scream");
  //BackgroundCTX.drawImage(img, 10, 10);
  // Object definitions for animations
  // Properties of object:
  // duration: How long in seconds will be the animation
  // left: move div element to -250px left or start from -250px left.
  // top: move element from or to 50px top position.
  // ease: easing allows you to change the speed of your animation over time.
  // You can see full list of easing effects on http://greensock.com/jump-start-js#easing
  // By default easing effect is linear
  // offset "-=1" property of last object means that rotation will start 1 second back in time. That means the previous animation to move left by 150px and rotation will be animated together.

  /*
  var movementDuration = [
    {seconds: 1, top: 50, ease:Back.easeIn},
    {seconds: 1, left: 250},
    {seconds: 1, top: 150, ease: Bounce.easeOut},
    {seconds: 1, left: 150},
    {seconds: 1, rotationY: 360, offset: '-=1'}
  ];
  */

  // Create a new coherent animation object and repeat animation five times
  // For full rules of properties take look on http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/TimelineMax/
  //var logoAmin = new CoherentAnimation({repeat: 5});

  // caTo will run the animation from current object or DOM element values to the reach the sended values of animations. The method take object as argument whit properties:
  // selector: DOM element or object
  // anims: object or array of object to run animation
    /*
    logoAmin.caTo({
    selector: '#logo-duration',
    anims: movementDuration
  }).play();
  */
 }, false);
	<html>
	<head>
	<meta charset="utf-8">
	<script src="js/gsap/TweenMax.js"></script>
	<script src="js/gsap/TimelineMax.js"></script>
	<script src="js/coherent_animations.js"></script>
	<script src="js/coherent.js"></script>

	<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
	<div id="player">
	<img src="img/player.png", width=8, height=8 />
	</div>
	<div id="selector">
	<img src="img/selector.png", width=16, height=16 />
	</div>
	<canvas id="MapCanvas" width="256" height="256">

	<div id="scene">
	<img id="logo-duration" src="img/unknown.png" />
	<img id="logo-duration" src="img/quest.png" />
	<img id="logo-duration" src="img/selector.png" />
	<img id="logo-duration" src="img/world.png" />
	</div>

	<script src="main.js"></script>
	</body>
	</html>
	var bInitialized = false;

	function clamp(val, min, max){
	return Math.max(min, Math.min(max, val));
	}

	function LoadImage(path){
	var image = new Image();
	image.src = path;

	// Add an event listener so we can track when all the images have loaded
	image.addEventListener('load', ImageLoaded);
	return image;
	}

	function ImageLoaded(){
	ImagesLoaded++;
	if(ImagesLoaded == ImagesToLoad){
	engine.call("JS_ViewReady", CanvasWidth);
	}
	}

	function DrawLine(startX, startY, endX, endY){
	if(!BackgroundCTX){
	return;
	}

	BackgroundCTX.beginPath();
	BackgroundCTX.moveTo(startX, startY);
	BackgroundCTX.lineTo(endX, endY);
	BackgroundCTX.closePath();
	BackgroundCTX.stroke();
	}

	function WorldCoordToCanvasCoord(worldX, worldY){
	var x = (worldX / WorldWidth) * CanvasWidth;
	var y = (worldY / WorldHeight) * CanvasHeight;
	return [x, y];
	}

	function DebugDrawTiles(){
	for(iWorldX = 0; iWorldX <= WorldWidth; iWorldX += WorldTileLength){
	var start = WorldCoordToCanvasCoord(iWorldX, 0);
	var end = WorldCoordToCanvasCoord(iWorldX, WorldHeight);
	DrawLine(start[0], start[1], end[0], end[1]);
	}

	for(iWorldY = 0; iWorldY <= WorldHeight; iWorldY += WorldTileLength){
	var start = WorldCoordToCanvasCoord(0, iWorldY);
	var end = WorldCoordToCanvasCoord(WorldWidth, iWorldY);
	DrawLine(start[0], start[1], end[0], end[1]);
	}
	}

	function InitGlobals(){
	BackgroundC = document.getElementById("MapCanvas");
	BackgroundCTX = BackgroundC.getContext("2d");
	Player = document.getElementById("player");
	Selector = document.getElementById("selector");
	Player.style.position = "absolute";
	Selector.style.position = "absolute";

	UnexploredStyle = "rgba(0, 0, 255, 0.2)";
	ExploredStyle = "rgba(255, 0, 255, 0.2)";
	DebugStyle = "#00FF00";
	CanvasWidth = BackgroundC.width;
	CanvasHeight = BackgroundC.height;
	planetImage = LoadImage("img/world.png");
	questImage = LoadImage("img/quest.png");
	selectorImage = LoadImage("img/selector.png");
	PlayerImage = LoadImage("img/player.png");
	UnknownImage = LoadImage("img/unknown.png");

	ImagesToLoad = 5;
	ImagesLoaded = 0;

	MapLimitX = CanvasWidth - Player.clientWidth;
	MapLimitY = CanvasHeight - Player.clientHeight;
	}

	// [UE4] Tile size assumed to be a common divisor of the world size.
	function SetWorldSizeF(x, y, tileUnitLength){
	bInitialized = true;
	WorldWidth = x;
	WorldHeight = y;
	WorldTileLength = tileUnitLength;
	}

	// [UE4]
	function SetPlayerLoc(x, y, bDrawMission, missionX, missionY){
	if(!bInitialized){
	return;
	}

	Player.style.top = y - 4;
	Player.style.left = x - 4;

	if(bDrawMission){
	console.log(missionX);
	Selector.style.top = missionY - 8;
	Selector.style.left = missionX - 8;
	}
	else{
	Selector.style.top = -100;
	Selector.style.left = -100;
	}
	}

	function DrawPlanets(PlanetCoords){
	// Draw the planet
	var ImageWidth = 8;
	var ImageHeight = 8;

	for(iPlanet = 0; iPlanet < PlanetCoords.length; iPlanet += 2){
	var newX = PlanetCoords[iPlanet] - ImageWidth;
	var newY = PlanetCoords[iPlanet+1] - ImageWidth;
	BackgroundCTX.drawImage(planetImage, newX, newY, ImageWidth, ImageHeight);
	}
	}

	function DrawUnknowns(UnknownCoords){
	// Draw the planet
	var ImageWidth = 8;
	var ImageHeight = 8;

	for(iPlanet = 0; iPlanet < UnknownCoords.length; iPlanet += 2){
	var newX = UnknownCoords[iPlanet] - ImageWidth;
	var newY = UnknownCoords[iPlanet+1] - ImageWidth;
	//BackgroundCTX.fillRect(newX, newY, ImageWidth, ImageHeight);
	BackgroundCTX.drawImage(UnknownImage, newX, newY, ImageWidth, ImageHeight);
	}
	}

	function DrawTiles(TileCoords){
	BackgroundCTX.fillStyle = UnexploredStyle;
	BackgroundCTX.clearRect(0, 0, CanvasWidth, CanvasHeight);
	BackgroundCTX.fillRect(0, 0, CanvasWidth, CanvasHeight);
	BackgroundCTX.strokeStyle = DebugStyle;
	//DebugDrawTiles();

	var startX = 0;
	var startY = 0;
	var WorldTileCount = (WorldWidth / WorldTileLength);
	var CanvasTileLength = CanvasWidth / WorldTileCount;

	for(iTile = 0; iTile < TileCoords.length; iTile++){
	if(TileCoords[iTile]){
	BackgroundCTX.fillStyle = ExploredStyle;
	}
	else{
	BackgroundCTX.fillStyle = UnexploredStyle;
	}

	// The XY coordinates of the tile in space [0,1]
	startX = (iTile % WorldTileCount) / WorldTileCount;
	startY = ((iTile / WorldTileCount) - startX) / (WorldTileCount);

	// The canvas coordinates of the tile
	startX = startX * CanvasWidth;
	startY = startY * CanvasHeight;

	BackgroundCTX.clearRect(startX, startY, CanvasTileLength, CanvasTileLength);
	BackgroundCTX.fillRect(startX, startY, CanvasTileLength, CanvasTileLength);
	}
	}

	function DrawQuests(QuestCoords){
	var ImageWidth = 8;
	var ImageHeight = 8;

	for(iQuest = 0; iQuest < QuestCoords.length; iQuest += 2){
	var newX = QuestCoords[iQuest] - ImageWidth;
	var newY = QuestCoords[iQuest+1] - ImageWidth;
	BackgroundCTX.drawImage(questImage, newX, newY, ImageWidth, ImageHeight);
	}
	}

	function DrawStargates(StargateCoords){
	var ImageWidth = 8;
	var ImageHeight = 8;

	for(iStargate = 0; iStargate < StargateCoords.length; iStargate += 2){
	var newX = StargateCoords[iStargate] - ImageWidth;
	var newY = StargateCoords[iStargate+1] - ImageWidth;
	BackgroundCTX.drawImage(questImage, newX, newY, ImageWidth, ImageHeight);
	}
	}

	function DrawQuest(x, y){
	var ImageWidth = 8;
	var ImageHeight = 8;

	var newX = x - ImageWidth;
	var newY = y - ImageWidth;
	BackgroundCTX.drawImage(questImage, newX, newY, ImageWidth, ImageHeight);
	}

	// [UE4]
	function DrawStaticMapFeatures(TileCoords, PlanetCoords, UnknownCoords, QuestCoords, StargateCoords){
	//console.log("Tiles: " + TileCoords.length + " Planets: " + PlanetCoords.length + " Unknown: " + UnknownCoords.length);
	DrawTiles(TileCoords);
	DrawUnknowns(UnknownCoords);
	DrawPlanets(PlanetCoords);
	DrawQuests(QuestCoords);
	DrawStargates(StargateCoords);
	}

	window.addEventListener('load', function() {
	InitGlobals();

	if(engine != null){
	engine.on("SetPlayerLoc", SetPlayerLoc);
	engine.on("SetWorldSize", SetWorldSizeF);
	engine.on("DrawStaticMapFeatures", DrawStaticMapFeatures);
	}

	//var img = document.getElementById("scream");
	//BackgroundCTX.drawImage(img, 10, 10);
	// Object definitions for animations
	// Properties of object:
	// duration: How long in seconds will be the animation
	// left: move div element to -250px left or start from -250px left.
	// top: move element from or to 50px top position.
	// ease: easing allows you to change the speed of your animation over time.
	// You can see full list of easing effects on http://greensock.com/jump-start-js#easing
	// By default easing effect is linear
	// offset "-=1" property of last object means that rotation will start 1 second back in time. That means the previous animation to move left by 150px and rotation will be animated together.

	/*
	var movementDuration = [
	{seconds: 1, top: 50, ease:Back.easeIn},
	{seconds: 1, left: 250},
	{seconds: 1, top: 150, ease: Bounce.easeOut},
	{seconds: 1, left: 150},
	{seconds: 1, rotationY: 360, offset: '-=1'}
	];
	*/

	// Create a new coherent animation object and repeat animation five times
	// For full rules of properties take look on http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/TimelineMax/
	//var logoAmin = new CoherentAnimation({repeat: 5});

	// caTo will run the animation from current object or DOM element values to the reach the sended values of animations. The method take object as argument whit properties:
	// selector: DOM element or object
	// anims: object or array of object to run animation
	/*
	logoAmin.caTo({
	selector: '#logo-duration',
	anims: movementDuration
	}).play();
	*/
	}, false);