Discuss Scratch

programmingbasics
Scratcher
3 posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

I ported parts of the Scratch codebase to Haxe and to OpenFL, allowing me to generate an HTML5 version. I've temporarily put up a demonstration of it here:

http://www.programmingbasics.org/icantbelieveitsnotscratch/index.html

I only ported the basic functionality of Scratch. In order to make the port easier, I left out things like
  • saving
  • vector graphics
  • importing pictures
  • sound
  • extensions
  • image editing
It basically serves as a proof of concept that Scratch can be ported to HTML5 using Haxe and OpenFL. It even runs on my old Android tablet, albeit slowly. As I mentioned before, you aren't able to load any projects that contain any vector graphics. Since you may not have a project like that, I've put up a version that automatically loads up such a project here:

http://www.programmingbasics.org/icantbelieveitsnotscratch/index.html#projects/Cat%20and%20Mouse%20complete.sb2

Code is here:

https://github.com/my2iu/scratch-flash/tree/openfl-port

-Ming Iu

Update: I think the demo doesn't work properly on Safari and OS X. Further down in the discussion, bobbbybee created a patched version that does seem to fix those problems:

https://bobbybee.github.io/scratch-flash/release/

Last edited by programmingbasics (Jan. 19, 2016 19:05:27)

Ethan_1
Scratcher
100+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

m(_ _)m m(_ _)m m(_ _)m m(_ _)m m(_ _)m m(_ _)m


This is so great I cannot begin to start how great this is. Amazing work! I started on this porting process but considered it too hard.

I plan on doing some serious investigation of this and see how much it implements (see if there are any bugs, etc). I look forward to a great future of html5 Scratch!

My only suggestion is to set up a seperate repository, so that issues can be made, and pull requests to the repository can be made. You can do that by making a new github repository, then importing (on github) using the url of your project. My 2 cents. Anyway, great work!

Last edited by Ethan_1 (Jan. 16, 2016 06:21:10)

liam48D
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

Cool!

A few things to notice:
  • Zooming in on the blocks blurs them, instead of rendering them at a higher scale.
  • Dropdowns and other menus don't have shadows.
  • You can't press enter in dialogs to complete
  • Menu dropdowns are offset.
  • Dragged sprites don't have shadows.
  • Actually nothing has shadows as far as I've seen, not even dragged blocks.
  • The Make a Block dialog is completely broken.

I like noticing these things. ;P
Dylan5797
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

Most of the gui is unusable on my end.
My browser / operating system: Windows NT 10.0, Chrome 47.0.2526.106, Flash 20.0 (release 0)
liam48D
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

Dylan5797 wrote:

Most of the gui is unusable on my end.
My browser / operating system: Windows NT 10.0, Chrome 47.0.2526.106, Flash 20.0 (release 0)
Works for me.

My browser / operating system: MacOS Macintosh X 10.11.0, Chrome 49.0.2620.0, Flash 20.0 (release 0)
bobbybee
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

I'm just getting a black screen…

EDIT: Investigating the issue; will report back with improvements if I can.

Last edited by bobbybee (Jan. 16, 2016 13:55:17)

chooper100
Scratcher
500+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

Really nice work!

Note:
In the background I am seeing a black screen, which looks unappealing with grey text in front of it for the mouse x and y.

My browser / operating system: Windows 8.1, Chrome 47.0.2526.111, Flash 20.0 (release 0)
bobbybee
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

bobbybee wrote:

I'm just getting a black screen…

EDIT: Investigating the issue; will report back with improvements if I can.

Solved. Sending a pull request.
Jonathan50
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

Amazing. Did you use the transpiler?
Well, very cool.
novice27b
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

bobbybee wrote:

I'm just getting a black screen…

EDIT: Investigating the issue; will report back with improvements if I can.
Same here.
NoMod-Programming
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

black screen: My browser / operating system: IPad iOS 8.4, Safari 8.0, No Flash version detected
BookOwl
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

Amazing!
Ethan_1
Scratcher
100+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

FYI, I found that simply refreshing the page can solve the black screen sometimes. YMMV. I have a github going that has issues and everything: https://github.com/IronManMark20/scratch-openfl , and I plan on making a gh-pages branch so that one can automatically deploy to github.

Also, why is soundjs included if sound primitives don't work? Is that intentional?

Last edited by Ethan_1 (Jan. 16, 2016 22:52:53)

bobbybee
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

I think I've nearly solved the black screen issue… I won't say anything else until I've confirmed my solution is actually correct.
bobbybee
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

Ethan_1
Scratcher
100+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

@bobbybee, looks good on Firefox, chrome, Edge, and even (gasp!) IE. Though, as a general bug report (not your version specifically), on IE it looks blurry.

(Not that I will ever use IE, just saying… for those that do)
SimpleScratch
Scratcher
500+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

hiccup01
Scratcher
100+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

Coming soon from the makers of “I can't believe it's not butter!” A revolutionary new spread… I can't believe it's not Scratch!
ChocolatePi
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

It's a very cool proof of concept but unless you can make it faster I can't use it as a replacement!
blob8108
Scratcher
1000+ posts

I made a basic port of Scratch to HTML5 (via Haxe and OpenFL)

How did you port this? Did you rewrite it in the new language, or are they somehow similar enough that you can directly copy bits?

It doesn't seem to work for me; I only see a black screen

Powered by DjangoBB