ronilan/BlockLike

Issues porting simple Scratch game to BlockLike

Closed this issue · 3 comments

enaiel commented

Hi,

First off, great little library, exactly what I was looking for to transition my daughter from Scratch to JavaScript.

I thought I would port the simplest possible game (Pong) from Scratch to BlockLike to show her the path, but I'm facing a few issues:

  1. Sprites are sized differently in BlockLike compared to Scratch.
  2. Backdrop image do not fully fill Stage, unlike in Scratch.
  3. Sprite.isTouchingBackdropColor(Color) throws warning: BlockLike.js Notice: isTouchingBackdropColor() ingnored. Backdrop image can not be located at a remote origin.
  4. Sprite.isTouching(Sprite) seems to fire before they actually touch.
  5. Sprite.playSound(Sound) throws exception: NotSupportedError: Failed to load because no supported source was found.

What am I doing wrong? Appreciate your help!

Thanks!

ronilan commented

What am I doing wrong?

Nothing! You pretty much did everything right.

All the problems you experienced fall under the category of managing assets for a web project. Specifically these are all issues with using assets made on Scratch in the p5js environment.

Issues 1, 2, 4 above are the result of "unclean" SVGs provided by Scratch. For example, if you open the the background image in a photo editor you'd see that it actually 507x388 with a transparent border and not 480x360 as expected. If you open the yellow ball image in a text editor you'd see the SVG has a shifted viewBox. Issue 5 is the result of Scratch generating an invalid wav file. It won't play anywhere. Issue 3 is the result of the true location of assets in the p5js environment which are actually placed in another subdomain (assets.editor.p5js.org).

So what can we do?

On the individual project level - we can "fix the assets". This requires "adult supervision".

I've made a clone of your project and tweaked it a little: https://editor.p5js.org/blocklike/sketches/Xru1XtVAV

To make it work I opened the SVGs in a photo editor (the fantastic @photopea) and made sure they are the right size before exporting them to SVGs again, this time getting them "clean"; I edited the wav on the original Scratch project and reexported (its not the same sound, but it works); I specifically sized the costumes; and I used isTouching on a new sprite instead of isTouchingBackdropColor (see comment in code).

On a higher level - we can start with projects that are less asset heavy (think cat and sheep only) and more "concept" focused (think variables, lists/arrays) and we can do it offline (!) with just an html file opened in a browser...

Hope that helps.

enaiel commented

Thanks for the quick reply!

All the problems you experienced fall under the category of managing assets for a web project. Specifically these are all issues with using assets made on Scratch in the p5js environment.

That's too bad, because one of things that drew my daughter to Scratch was the large collection of assets and what is probably the easiest to use SVG editor ever created. Using the same familiar assets and tooling from Scratch would do a lot to increase her comfort level when learning BlockLike and JavaScript.

On the individual project level - we can "fix the assets". This requires "adult supervision".

My daughter loves to customize and create new backdrops and sprites. I do not want to be the bottleneck in her creative process. I will have to look to see if there is a way to automate the changes you did to the assets to make them work outside of Scratch.

On a higher level - we can start with projects that are less asset heavy (think cat and sheep only) and more "concept" focused

I fear that the simplistic nature of those projects compared to the complex projects she has already done in Scratch will be off-putting, and she will keep going back to Scratch. I still think being able to easily port her existing Scratch projects to BlockLike would be the absolute best way for her to transition from Scratch to JavaScript.

ronilan commented

I was contemplating an "importer". I even wrote a prototype. The resulting javascript was a mess specifically in the asset loading part. I'm not sure there is a magic bullet here.