How Hopscotch works

@Rishan69420 I have tagged you to this topic. This will give you a clear idea of how Hopscotch works and its blocks. Refer to the OP for further details.

4 Likes

Hopscotch, up to this day, uses Pixi JS version 4.8.6, and considering it was compiled in 2019, it’s been a very long time that it used this version. The latest version I can find at the moment is 6.1.0. I mainly look up videos to spot the differences between the two versions.

Edit: the latest version I can find a video on is PixiJS v5

2 Likes

This version is upcoming, and is on its 3rd RC version.

1 Like

don’t think it’s true anymore

remove the fact that tht removed milliseconds lol


extremely detailed and very interesting topic

5 Likes

Instant Blocks means it runs the next block (wether directly below it or inside the container) on the same frame. Ending / continuing a loop of any kind (and going to the next block) technically takes 1 frame regardless (to prevent potential problems, especially with Repeat Forever).

5 Likes

holy cow that was oldddd, dont count on that post lol

no no i was saying my old posts may not be correct lol

4 Likes

Well, sorry for bumping, lol…

Oh…

4 Likes

Now I’m curious, what Typescript version is THT currently using?

3 Likes

I don’t know, the answer to your question, but I have another question. if hopscotch uses a webplayer-min.js, file, I assume to process the JSON that projects are stored in, then does that mean that you can run hopscotch projects outside of the hopscotch website OR convert a hopscotch project and it’s associated webplayer into a different format?

2 Likes

Not sure. You can’t really run hopscotch projects outside of c.gethopscotch.com, explore.gethopscotch.com, ae-hopscotch.github.io/hs-tools/play-project, or outside the app.

1 Like

yes you can

4 Likes

I think I just lost a few brains cells…

I also lost some while attempting to make a basic JSON interpreter in scratch…

1 Like

Yes. The in-app player is a webview showing an html page which basically just contains some style, the svgs of all the characters, a place for the actual player canvases to go, and the player and pixi scripts.

When the webplayer starts (I believe with main.play()) it looks for a hopscotch-player element. It adds teh canvases it uses to display the project there then it looks for the project’s json in its dataset (root.dataset.projectJson) and uses that.

You can also pass the (i think) parsed json to main.play and it will play that.

The minimal player I have been using lately is basically this with a few extra features to support a player mod i’ve been working with:

<!DOCTYPE html>
<html>
	<head>
		<title>Hopscotch player</title>
		<meta charset="utf-8">
	</head>
	<body>
		<div id='svg_string' style='display:none;'>
<!--Include the svgs here-->
			</div>
			<hopscotch-player data-project-json='' stage-size='container' style='display: block; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;'></hopscotch-player>
			<script>
				/*
				* Load json
				*/ 
				fetch("/project").then(e=>e.text().then(text=>{
					document.querySelector('hopscotch-player').dataset.projectJson = text
					const startProjectIfPossible = () => {
						if (!window.main)
							return setTimeout(startProjectIfPossible, 100)
						main.enterFullscreen()
						main.play()
					}
					setTimeout(startProjectIfPossible, 100)
				}))
			</script>
			<script src="pixi.min.js"></script>
			<script src="/player.js"></script>
	</body>
</html>
2 Likes