Discuss Scratch

PullJosh
Scratcher
1000+ posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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?
Scratch is amazing. This is the place where I learned to code almost 9 years ago. I love the Scratch community, and the fact that it's so easy to get started with Scratch. However, many of the features that make it easy to start using Scratch also make it underpowered for more experienced programmers.

With a different programming language like JavaScript, you get:
  • More features: You can do cool tricks that simply aren't possible with Scratch.
  • Speed: Your projects run faster and lag isn't as problematic.
  • Publishing options: Run your projects on any website, not just Scratch.
If you want to try a different programming language but find it difficult to get started, Leopard can help.

How is this different than Phosphorus?
Phosphorus is awesome, but it's a little different than Leopard. With Leopard you can view and edit the translated JavaScript code yourself.

What if it doesn't work?
Not every project will translate perfectly.
  • Only projects created using Scratch 3.0 can be translated. If you created your project using Scratch 2.0 or older, you'll need to open it up in the Scratch 3.0 editor, make a small change, and then try again.
  • Some Scratch blocks are not yet supported. Check the translations page to see which blocks have JavaScript equivalents using Leopard. More blocks will be supported over time.
  • Extension blocks won't work (except pen, which works great!)
  • Sometimes there are little inconsistencies. We've done our best to make sure Leopard behaves exactly the same as Scratch, but there will always be little cases we haven't considered. It's possible that your scripts will run slightly out of order, be a little too fast, or some other issue. Fortunately, you can edit the JavaScript code to fix those issues, and I'm happy to help.

Upcoming Improvements
Based on the feedback I'm seeing on the forums and in comments, these are the top-priority issues to solve (most important first):
  1. Sprite layering doesn't work! go to front/back & go forward/backward blocks need to be implemented. Sprite layering now works in Leopard!
  2. Projects run too fast! Leopard projects currently run at 60fps, but it should also be possible to slow them down to 30fps. Frame rate is now a configuration option, and the default is 30fps–the same as Scratch.
  3. Variable watchers don't work Variable watchers now work in Leopard!
  4. If touching edge and if on edge, bounce blocks don't work.
  5. Lots of little bugs that all add up to cause issues

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

Last edited by PullJosh (July 10, 2020 20:07:36)

--Explosion--
Scratcher
1000+ posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

Cool! I'll try it out!

Last edited by kaj (Tomorrow 00:00:00)
✰✩✭✴★--Explosion--★✴✭✩✰
Forum helper | boy | platformers | 14yrs | guitar | website


PullJosh
Scratcher
1000+ posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

--Explosion-- wrote:

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

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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
40 posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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.

hOlD uP
Sheep_maker
Scratcher
1000+ posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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

- Sheep_maker This is a kumquat-free signature. :P
This, my signature, appears below all my posts. Discuss it on my profile, not the forums. Here's how to make your own.
Post count: more than 6
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }

Remember when the forum blocks made booleans look like normal round blocks?
(key [space v] pressed?)
Geotale
Scratcher
52 posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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: Convert Scratch projects to JavaScript AUTOMATICALLY!

I think I'v found a way to detect if you're in Leopard or Scratch! Link

✅AD
❎F4F
PullJosh
Scratcher
1000+ posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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: Convert Scratch projects to JavaScript AUTOMATICALLY!

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
40 posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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!

hOlD uP
CatsUnited
Scratcher
1000+ posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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: Convert Scratch projects to JavaScript AUTOMATICALLY!

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: Convert Scratch projects to JavaScript AUTOMATICALLY!

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)


ST, Please Add A Warning When A Size Limit Is Exceeded

My Dumb Creations - THE BEST ANIMATION | The Windows 98 Experience (made on Windows 98) | nobody cares about Me… | the2000 Reveals Their New Profile Picture

Do evil kumquats keep eating your signature? Assert your dominance and eat the evil kumquats. Did you know that kumquats are only about the size of an olive?
Sheep_maker
Scratcher
1000+ posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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)

- Sheep_maker This is a kumquat-free signature. :P
This, my signature, appears below all my posts. Discuss it on my profile, not the forums. Here's how to make your own.
Post count: more than 6
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }

Remember when the forum blocks made booleans look like normal round blocks?
(key [space v] pressed?)
Jeffalo
Scratcher
1000+ posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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

my website: jeffalo.net | ocular: scratch forum search





slowly recreating my signature

thank you to everyone who has used ocular!!

we are about to hit 900 registered ocular users. view some other analytics below!




mrCamelCase
Scratcher
100+ posts

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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

“A lie told often enough becomes the truth.”
-Benjamin Franklin, 1532

^ Food for thought. Yum! ^
PrTest
Scratcher
1 post

Leopard: Convert Scratch projects to JavaScript AUTOMATICALLY!

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: Convert Scratch projects to JavaScript AUTOMATICALLY!

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

Standard | Mobile