Discuss Scratch
- Discussion Forums
- » Advanced Topics
- » Leopard: Edit Scratch projects as JavaScript code
- 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
Let me know if you run into any issues! Cool! I'll try it out!
- 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
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.” 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!
Maybe you could see 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.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
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.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.” …
…
- 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
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.) 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.
Fortunately, it's totally fine to ignore most of those warnings. 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 “==”.
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.
Thanks! I'm excited to see how people put Leopard to use! Overall, really cool!
- PullJosh
- Scratcher
1000+ posts
Leopard: Edit Scratch projects as JavaScript code
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: How would you make an “if on edge, bounce” function because I kind of need it.
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
Thank you so much!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: How would you make an “if on edge, bounce” function because I kind of need it.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.
- 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
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
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:
- 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.
- 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.
- 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.
- 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?
- “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.)
- 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.
- Variable readouts aren't supported. Is this intentional?
- 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
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 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
/* eslint require-yield: "off", eqeqeq: "off" */
- 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
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
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.)
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)
- Discussion Forums
- » Advanced Topics
- » Leopard: Edit Scratch projects as JavaScript code