How can I swap out Sprite Sheets?

Using JavaScript with Hype
1

I would like to figure out an approach to have low resolution small file size temporary proxy sprite sheets as placeholders within the hype document for a quick initial website load, then On Scene Load higher quality larger file size sprite sheets off the web server replacing the sprite sheet images later as necessary. What would the best way to accomplish this?

2

An approach I would look at is to:

Use code to detect href or location to determine project its indeed loading from the server.
And adapt @h_classen bit of code to only replace the spritsheet's path.

Adapted version

	<script>
	function HypeResourceLoadCallback(hypeDocument, element, event) {
	
var resourceName = event.url.substring(event.url.lastIndexOf('/')+1);
	var swapPath = 'https://your.com/funny/new/path/';
	if (resourceName == "SpriteSheet.png"){
	 
	var newResourcePath = swapPath + resourceName;
	console.log(newResourcePath)
	return newResourcePath
}

	return
	}

if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeResourceLoad", "callback": HypeResourceLoadCallback});
	</script>
2 Likes
3

Great, thank you, I will proceed in that direction.

1 Like
4

You probably can put the location detection in the same code

i.e

var swapPath = 'https://your.com/funny/new/path//';
	if (resourceName == "SpriteSheet.png" && location.hostname == "your.com"){
2 Likes