Discuss Scratch

PullJosh
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

Please use this thread to discuss Leopard, share your projects, and ask for help.


That's right! Translating Scratch to JavaScript is now possible! The tool is called Leopard, and it's available here:

Leopard Website – Go here to convert your projects!

Who needs this?
If you know Scratch and want to learn JavaScript, Leopard is made for you. It's the perfect transition tool. Leopard also allows you to convert your existing Scratch projects into JavaScript code and edit them that way.

What if it doesn't work?
Not every project will translate perfectly. That's why we have a team of Leopard Mentors who are here to offer support. If you are having trouble with a project, you can ask here on the forums or create a dedicated “cleanup crew” post to get more 1-on-1 help.

Thank you so much to the contributors who made Leopard possible!

Last edited by PullJosh (July 1, 2024 15:00:55)

--Explosion--
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

Cool! I'll try it out!
PullJosh
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

--Explosion-- wrote:

Cool! I'll try it out!
Let me know if you run into any issues!
Geotale
Scratcher
100+ posts

Leopard: Edit Scratch projects as JavaScript code

Quick bug: Testing this project in forkphorus, it seems to work fine, though with Leopard it freezes the webpage. I don't know what could cause this, but it does render everything before freezing completely fine. Looking through it in the code sandbox it seems to be a problem with the custom block not having a yeild, and for some reason certain booleans are expected to use “===” instead of “==”. Overall, really cool!
Randoming
Scratcher
57 posts

Leopard: Edit Scratch projects as JavaScript code

Wow, awesome! I don't know any JavaScript so I'm using this to help me learn a bit. Quick question though, how would you make an “if on edge, bounce” function because I kind of need it.
Sheep_maker
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

Geotale wrote:

Quick bug: Testing this project in forkphorus, it seems to work fine, though with Leopard it freezes the webpage. I don't know what could cause this, but it does render everything before freezing completely fine. Looking through it in the code sandbox it seems to be a problem with the custom block not having a yeild, and for some reason certain booleans are expected to use “===” instead of “==”. Overall, really cool!
I think the linter just prefers ===, but JavaScript won't really care. == is more akin to Scratch's _ = _ block because the number 1 is equal to the string “1.”

Randoming wrote:

Wow, awesome! I don't know any JavaScript so I'm using this to help me learn a bit. Quick question though, how would you make an “if on edge, bounce” function because I kind of need it.
Maybe you could see how Scratch implements it? It seems a bit complicated though, but I think it's because it's trying to determine the closest edge to the sprite
Geotale
Scratcher
100+ posts

Leopard: Edit Scratch projects as JavaScript code

Sheep_maker wrote:

Geotale wrote:

I think the linter just prefers ===, but JavaScript won't really care. == is more akin to Scratch's _ = _ block because the number 1 is equal to the string “1.”

Yes, I know. === matches the type as well, though thank you for specifying that it's not really an error. The yeild thing still seems to be a problem though. Also, in Scratch it seems occasionally that the boolean “true” doesn't equal the string “true”, though the number equals the string. Quite strange.
greedjesse
Scratcher
100+ posts

Leopard: Edit Scratch projects as JavaScript code

I think I'v found a way to detect if you're in Leopard or Scratch! Link
PullJosh
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

Geotale wrote:

Quick bug: Testing this project in forkphorus, it seems to work fine, though with Leopard it freezes the webpage. I don't know what could cause this, but it does render everything before freezing completely fine.
Seems like maybe you intended to link to the project? That would be very helpful. (And to everyone else who is reading this post as well: links to broken projects are super helpful! Please post them in this forum thread.)

Geotale wrote:

Looking through it in the code sandbox it seems to be a problem with the custom block not having a yeild, and for some reason certain booleans are expected to use “===” instead of “==”.
Fortunately, it's totally fine to ignore most of those warnings.

CodeSandbox uses a tool called ESLint to analyze your JavaScript and give you helpful tips to improve your code. Certain rules, like requiring a yield, or using === instead of ==, are usually a good idea, but it makes sense for us to break them so that projects remain compatible with Scratch. I've tried to find a way to turn ESLint off for converted projects but haven't found one.

Geotale wrote:

Overall, really cool!
Thanks! I'm excited to see how people put Leopard to use!
PullJosh
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

Randoming wrote:

How would you make an “if on edge, bounce” function because I kind of need it.
Good question! That block isn't currently supported, but it should be possible to add it in the future. In the meantime, this custom block might get the job done:

define slightly worse if on edge, bounce
if <([abs v] of (x position)) > (240)> then // Change 240 to be smaller until it works for your size sprite
point in direction ((0) - (direction))
end
if <([abs v] of (y position)) > (180)> then // Change 180 to be smaller until it works for your size sprite
point in direction ((180) - (direction))
end

It isn't perfect, but it's better than nothing. Here it is in a working project.
Randoming
Scratcher
57 posts

Leopard: Edit Scratch projects as JavaScript code

PullJosh wrote:

Randoming wrote:

How would you make an “if on edge, bounce” function because I kind of need it.
Good question! That block isn't currently supported, but it should be possible to add it in the future. In the meantime, this custom block might get the job done:

define slightly worse if on edge, bounce
if <([abs v] of (x position)) > (240)> then // Change 240 to be smaller until it works for your size sprite
point in direction ((0) - (direction))
end
if <([abs v] of (y position)) > (180)> then // Change 180 to be smaller until it works for your size sprite
point in direction ((180) - (direction))
end

It isn't perfect, but it's better than nothing. Here it is in a working project.
Thank you so much!
CatsUnited
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

This seems like a cool project - I decided to test all of my projects to see how well they work with the current version of Leopard you've got going:
The first two were made in Scratch 2, so they don't work with Leopard

Springer - this does run, although only a few of the objects seemed to successfully load in when the project started, including almost no sounds.

Tom Nook Simulator 2019 The one that graphically ran the best, though I wasn't able to complete the game. The background is missing in this one, but otherwise all the objects are there, just layered incorrectly due to a lack of sprite layer block translation (also is that running at 60 FPS?). I personally hope that the sprite layer blocks get added in soon, however about you'd go with that.

Kerbi Adventar - Extremely broken and unplayable. The first run I tested on Chrome, it played through the intro cutscene, though almost nothing was rendered correctly. After the cutscene, none of the level geometry loaded so Kerbi fell through the floor and died. Every subsequent run never made it past the first “loading” screen. On Firefox, I managed to more consistently get past that first loading screen. Due to the size of this project and that it's code is the definition of spaghetti code, I'm not surprised it's in this broken state currently

Last edited by CatsUnited (July 6, 2020 01:25:47)

PullJosh
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

KarateToast wrote:

https://scratch.mit.edu/projects/279544414/

https://scratch.mit.edu/projects/395901360/

https://scratch.mit.edu/projects/187800973/

https://scratch.mit.edu/projects/185854592/

https://scratch.mit.edu/projects/393099913/
All didn't seem to work.

I think I've identified the source of most of these issues. All of them seem to be Leopard's fault (not yours). I think every problem is fixable.

Here are the diagnoses, in order:
  1. You're using the “letter of” operator block to get a character within a number (like 111110000111000). Scratch treats the number like a string, but Leopard just gets confused. I can fix this by changing the translator to always include .toString() in the exported JavaScript. That makes the code a little uglier for the average project, but at least it works.
  2. In Leopard, the touching block returns false when ghost effect is 100, but Scratch seems to ignore ghost effect for “touching”. This can also be fixed.
  3. The most annoying part about this is that Leopard doesn't stop the arrow keys from scrolling the page. I'm not sure exactly what's up with the physics.
  4. Super unexpected issue on this one. The “ground tick” broadcast isn't working properly because it translated wrong. In the translated JavaScript code, the broadcast being sent out is called “ground tick”, but the one being received is called “Ground Tick”. The capitalization is different! I'll have to look into why this is happening. Not one I expected to encounter, but hopefully an easy fix?
  5. “Touching edge” is not yet implemented and it's causing an error.

Thank you for submitting these! I'll do my best to fix each problem in time. I've filed the following Github issues to track each problem separately:
1. https://github.com/PullJosh/sb-edit/issues/49
2. https://github.com/PullJosh/leopard/issues/65
3. https://github.com/PullJosh/leopard/issues/20
4. https://github.com/PullJosh/sb-edit/issues/50

And thank you to everyone who is submitting problematic projects. It will take a while to solve each problem, but this really helps Leopard improve!

Last edited by PullJosh (July 6, 2020 01:48:10)

Flowermanvista
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

Looks neat so far, but I've found a few issues, or at least things that seem like issues to me: (Please note that I have little “real” programming experience. Other than Scratch, I know a tiny bit of Python and that's it.)
  1. Projects seem to run too fast. While Scratch projects usually run at 30 FPS, I've found that Leopard runs them at a framerate equal to the monitor's refresh rate - in most cases, this will result in projects running between 2x and 2.5x their correct speed. Is this intentional? You may want to consider adding an optional “compatibility mode” of sorts that locks the framerate at 30.
  2. Variable readouts aren't supported. Is this intentional?
  3. While trying to make a project to demonstrate the first issue, I had to work around the second issue by making my own readout for the framerate, but it doesn't work in Leopard (note that it abuses Scratch's implicit type conversion). Here is the project in question: https://scratch.mit.edu/projects/409788163

Last edited by Flowermanvista (July 6, 2020 03:00:15)

Sheep_maker
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

PullJosh wrote:

CodeSandbox uses a tool called ESLint to analyze your JavaScript and give you helpful tips to improve your code. Certain rules, like requiring a yield, or using === instead of ==, are usually a good idea, but it makes sense for us to break them so that projects remain compatible with Scratch. I've tried to find a way to turn ESLint off for converted projects but haven't found one.
Perhaps it could be disabled by adding
/* eslint require-yield: "off", eqeqeq: "off" */
to the top of the file, or including an .eslintrc file turning those rules off (idk if the latter works)
Jeffalo
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

honestly one of the coolest thing's i've seen or played with in a while.

some of my projects don't work
https://scratch.mit.edu/projects/322002554/ - it gets stuck on the menu

and
https://scratch.mit.edu/projects/297395617/ gets stuck on the logo animation at the start

https://scratch.mit.edu/projects/292449845/ is missing the numbers for each level

and something i've noticed is that fonts in vectors don't really work, perhaps leopard could convert them to free fonts that can be used?

anyways i had so much fun messing with this yesterday and i've got so many ideas for cool things to make (next i plan on making a portal for my games)

awesome work and it's amazing
mrCamelCase
Scratcher
100+ posts

Leopard: Edit Scratch projects as JavaScript code

Hey everyone, mrCamelCase here!

Converted this project to Leopard, had a couple problems…

When you try to press play, the menu freezes. Not sure why exactly this is, I'm no expert in JS.

Also, the music restarts after a few seconds. This is almost certainly because of the removal of the 30 FPS restriction on all scripts (the music script in the stage works by starting the sound, and then checking to see if the music needs to be muted and waiting 0 seconds (or one frame) around 900 times. Of course, in JavaScript the wait 0 seconds block would run instantly, and presumably same for the set volume block, so the music restarts after a few seconds). Put simply, the second error is a problem with the way I built my project, not necessarily with Leopard.

I only tested it with the one project, but I think that overall you've done a great job. I can't wait to see this keep improving, as being able to easily and reliably convert Scratch projects to JS would be really nice! Best of luck to you in your quest to improve Leopard!

Yours truly,
-mCC
PrTest
Scratcher
1 post

Leopard: Edit Scratch projects as JavaScript code

3 questions: why not Purrr? how long did it take to make? and if u were to make a full game but in JS (like no conversion just straight from JS) the code wouldn’t be the same would it?
PullJosh
Scratcher
1000+ posts

Leopard: Edit Scratch projects as JavaScript code

Small bug fix incoming! Adroitwhiz fixed the issue where sprites with ghost effect set to 100 could not “touch” according to the sensing block.

This sort of fixes KarateToast's second project. (It still has some other, separate problems as well.)

Last edited by PullJosh (July 6, 2020 17:33:12)

Powered by DjangoBB