Discuss Scratch

JGames101
Scratcher
100+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

The Scratch Embedder is not visible in the Scratch UI (it does exist if you enter /embed at the end of a project url), so I created an embeddable site for Scratch 3 projects. I made something similar a year ago, but it doesn't work anymore and relied on embedding a specific portion of https://llk.github.io/scratch-gui, which now has fullscreen, small stage, and so much more that would mess it up. This new version is a fork of scratch-gui, with all UI elements other than the fullscreen player removed. The player, in fullscreen, adapts to the screensize, so it will work in an iframe of any size. Currently, it functions just like a fullscreen scratch 3 project, but more features will be added in the future.

How-To
In your page, simply add an iframe or object with a source of https://jamesbmadden.github.io/scratch-silicon/#project id
For example, you could add
<iframe src="https://jamesbmadden.github.io/scratch-silicon/#276660763" width="480px" height="480px" allowFullscreen></iframe>

The width and the height can be anything you want, as the page is fully responsive.

Why Use This Over The Official Embeddable Pages?
  • Scratch's Embed pages can't be used on a mobile device, but Silicon can. That means it works in WebView!
  • Scratch Silicon Supports Fullscreen (Supported, but In Progress)

Current Issues
  • Fullscreen Does Not Change the Size of the Stage.

Missing Features
Because Scratch Silicon is a fork of scratch-gui, which does not contain certain features, the following features are unvailable in Scratch Silicon:
  • Cloud Variables
    Cloud variables should not be a huge issue since they are already unavailable to any new scratcher anyway.

Version History
  • v0.2.1: Viewport meta tag added to work better in WebViews on mobile and Sprites can no longer be dragged
  • v0.2.0: Test Fullscreen Added
  • v0.1.0: Initial Test Release

Last edited by JGames101 (Feb. 3, 2019 01:51:07)

LuckyLucky7
Scratcher
1000+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

Why is every sprite draggable no matter what project I view?

I have about 2750 posts, 65 shared projects, 150 total created/followed topics, and 120 followers.
JGames101
Scratcher
100+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

LuckyLucky7 wrote:

Why is every sprite draggable no matter what project I view?
That's a bug I noticed a little while ago. I'll add it to the issues list and work on a fix. It's because it's a fork of the editor, and in the editor, every sprite is draggable, and I'm not properly setting fullscreen the way that the buttons would.
JGames101
Scratcher
100+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

LuckyLucky7 wrote:

Why is every sprite draggable no matter what project I view?
I fixed the issue
dillonbarnes
Scratcher
26 posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

You can also use this website to embed scratch projects
https://phosphorus.github.io/

Last edited by dillonbarnes (Jan. 7, 2019 10:36:34)


Creator of The Mobile-Friendly Studio and the Coolest Scratch project studio.

when green flag clicked
say [We are one!]

dillonbarnes
Sheep_maker
Scratcher
1000+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

dillonbarnes wrote:

You can also use this website to embed scratch projects
https://phosphorus.github.io/
Won't work with 3.0 projects because it's a 2.0 thing

- Sheep_maker This is a kumquat-free signature. :P
My signature appears below all my posts; discuss it on my profile, not the forums.
To make your own, click “Change your signature” at the bottom of the main forums page.

<key (join [enter] []) pressed?> // This works now
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }
Wettining
Scratcher
500+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

Sheep_maker wrote:

dillonbarnes wrote:

You can also use this website to embed scratch projects
https://phosphorus.github.io/
Won't work with 3.0 projects because it's a 2.0 thing
Would Phosphorus++ work?
JGames101
Scratcher
100+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

Wettining wrote:

Sheep_maker wrote:

dillonbarnes wrote:

You can also use this website to embed scratch projects
https://phosphorus.github.io/
Won't work with 3.0 projects because it's a 2.0 thing
Would Phosphorus++ work?
No, Phosphorus++ still seems to be unable to load Scratch 3 projects.
ethajenn
New to Scratch
4 posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

You could almost make a hosting site where you enter project ID, make the specs such as whether the sprites are draggable and such, and make a very basic HTML embed generator. If you put it on a google site or something, the cost would be nothing, just some HTML time.
frodewin
Scratcher
500+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

JGames101 wrote:

Wettining wrote:

Sheep_maker wrote:

dillonbarnes wrote:

You can also use this website to embed scratch projects
https://phosphorus.github.io/
Won't work with 3.0 projects because it's a 2.0 thing
Would Phosphorus++ work?
No, Phosphorus++ still seems to be unable to load Scratch 3 projects.


Phosphorus and Sulfurous only work with Scratch 2.0 projects, but projects that have not been changed since the 3.0 transition are still in 2.0 format. So old projects can be embedded with them.

Moreover, I just found out, that it is still possible to make and upload 2.0 projects with the Scratch 2.0 offline editor. A project which I just uploaded loaded and played well in Sulfurous.



You can also find my best projects here or stop at my profile and say hi!

physix
Scratcher
8 posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

It doesn't work anymore ?
Varan40
Scratcher
1 post

Scratch Silicon: Embed Scratch 3 Projects In Your Site

JGames101
Scratcher
100+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

Varan40 wrote:

Yes, today it was stop… 404
404 There isn't a GitHub Pages site here
This link is working sometimes: https://jamesbmadden.github.io/scratch-silicon/#283224933 but game from this project dos't work: https://play.google.com/store/apps/details?id=com.wKliker_8473773
Replace thejamesbm in your URL with jamesbmadden, and it will work fine. The app uses the old URL.

Last edited by JGames101 (Feb. 3, 2019 18:25:22)

pms2010
Scratcher
1 post

Scratch Silicon: Embed Scratch 3 Projects In Your Site

@JGames101… Thanks for the embed info. I'm a teacher and have spent all day looking for some documentation on how to embed in 3.0. I couldn't find anything. I don't need the speed, just the /embed

tks

Last edited by pms2010 (Feb. 5, 2019 21:17:04)

komakao
New to Scratch
4 posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

The file is located on Scratch official website and embed it as projectID.
Can I upload a Scratch 3.0 file and embed the file?

Last edited by komakao (Feb. 7, 2019 01:33:35)

JGames101
Scratcher
100+ posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

komakao wrote:

The file is located on Scratch official website and embed it as projectID.
Can I upload a Scratch 3.0 file and embed the file?
Not in the current version, but that feature could definitely be implemented. The issue is still allowing you to embed an uploaded file on a page, and how the data would be stored (data URL? Seems like the only real option). I'll work on it.

Last edited by JGames101 (Feb. 9, 2019 00:24:15)

komakao
New to Scratch
4 posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

https://llk.github.io/scratch-gui/develop/compatibility-testing.html#201793794
I found this page can embed a project on scratch official site by projectID.
I guess there may be some way to embed a local file by using the lib.min.js but I've got no one to solve it.
https://llk.github.io/scratch-gui/develop/lib.min.js
redware
Scratcher
6 posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

JGames101 - that is great. On my mobile though it is difficult to press the green button - is there an autostart option ?

http://www.redware.com/scratch-test-01.html

Last edited by redware (Feb. 9, 2019 16:36:53)

MinecraftWin98
Scratcher
9 posts

Scratch Silicon: Embed Scratch 3 Projects In Your Site

Yep, having options for autostart and removing the top bar with the flag and stop icons would be pretty sweet. Nice work!
makakulka
Scratcher
1 post

Scratch Silicon: Embed Scratch 3 Projects In Your Site

Powered by DjangoBB

Standard | Mobile