We're seeking contributors to help finish our HTML5 Scratch player (now open sourced!)

supercreeper2005

GadgetAndyMan wrote:
WASDgamer wrote:
I am using IOS now, I am so greatful of the developers of the HTML5 version, I i will be able to use scratch anywhere :d
Have you tried the Puffin Browser, I use Scratch with it when I am on my iPad

Yes. But you know it is slow.

Hello! I'm a scratcher who likes RPGs. Please view my rpg and try out this FNAF based game! Please favorite and Love my games and visit my profile! Also try out our featured project.

Want your Project featured? Click here!
If you are proud of your project, compete here.

Thanks to @austin360 for helping with the RPGs graphics

when I receive [a scratch account v]
imagine :: custom
program :: custom
 share:: custom

when I receive <<[a favorite v]:: events > or <<[a follow v]:: events > or <<[a comment v]:: events > or <[a love v]:: events  >> >>
say [Thanks!] for (2) secs
say [You wil get a love too!] for (2) secs
say [I will suggest this to followers!] for (2) secs
say [I'm actually serious! Check out the projects above!] for (2) secs

supercreeper2005

I'm very excited! Now I can do scratch on 4g phone everywhere! But I am sorry to say I can't help because I can only do this much in html:
Add text
Add images
Add links
Add image links
Add radio boxes
Change the color

And I'm only 9

Last edited by supercreeper2005 (Aug. 9, 2014 23:35:52)

Hello! I'm a scratcher who likes RPGs. Please view my rpg and try out this FNAF based game! Please favorite and Love my games and visit my profile! Also try out our featured project.

Want your Project featured? Click here!
If you are proud of your project, compete here.

Thanks to @austin360 for helping with the RPGs graphics

when I receive [a scratch account v]
imagine :: custom
program :: custom
 share:: custom

when I receive <<[a favorite v]:: events > or <<[a follow v]:: events > or <<[a comment v]:: events > or <[a love v]:: events  >> >>
say [Thanks!] for (2) secs
say [You wil get a love too!] for (2) secs
say [I will suggest this to followers!] for (2) secs
say [I'm actually serious! Check out the projects above!] for (2) secs

jTron

Zacshap21 wrote:
…
If my game has a
<key [up arrow] pressed?>
in it, how will my iOS device click up arrow?
…

If you take a look at the sh5 player, there's grey arrows on each side of the player. Those function as the arrows on devices that don't have them.

clipd • osx clipboard manager and history

;

Zacshap21

jTron wrote:
Zacshap21 wrote:
…
If my game has a
<key [up arrow] pressed?>
in it, how will my iOS device click up arrow?
…
If you take a look at the sh5 player, there's grey arrows on each side of the player. Those function as the arrows on devices that don't have them.

What's sh5? And what about other keys such as wasd? I know iOS, Android, etc have an on-screen keyboard, but won't that take away from the experience? They keyboard on iPhone and iPod already use up half the screen. I'm not trying to pick a fight, and I'm sorry if it seems this way. I'm just looking forward to seeing how the new HTML5.will work.

Play Pong! against a computer player! Earn Fire and Gold Power-Ups to throw off your opponent and get the highest score possible! Click the above to play!

jTron

Zacshap21 wrote:
jTron wrote:
~le'snip~
If you take a look at the sh5 player, there's grey arrows on each side of the player. Those function as the arrows on devices that don't have them.
What's sh5? And what about other keys such as wasd? I know iOS, Android, etc have an on-screen keyboard, but won't that take away from the experience? They keyboard on iPhone and iPod already use up half the screen. I'm not trying to pick a fight, and I'm sorry if it seems this way. I'm just looking forward to seeing how the new HTML5.will work.

sh5= Scratch HTML5. I'm not sure how the player would handle normal keys though, on a mobile device. As far as I'm aware there is no way to pull up the keyboard - and I completely agree that as the keyboards do use quite a considerable amount of screen real-estate, this would be an issue (as anyone who's tried to play any flash game on a phone knows.) I'm not sure what the best way to handle this is, really.

clipd • osx clipboard manager and history

;

Zatherz

Instructions how to set up Scratch HTML5 player on Linux distributions
Step 1. Install prerequisites:
DPKG-based distros (Debian, Ubuntu, Mint etc.):
sudo apt-get install apache2 php5 libapache2-mod-php5
RPM-based distros (RHEL, CentOS, Fedora etc.):
sudo yum install apache2 php5 libapache2-mod-php5
For other distributions, search for packages with similiar names in your repositories or compile them.
Step 2. Download my installer script:
Download from mega.co.nz
Step 3. Navigate to the download directory:
cd ~/Downloads
Step 4. Run the script with root (superuser) permissions:
sudo ./sh5-install.sh
Step 5. Open your favourite web browser and navigate to localhost/scratch-html5
Step 6. Done!

Zatherz

Something broke my instructions, so here are they, but corrected:
Setting up Scratch HTML5 player on Linux distributions
Step 1. Install prerequisites:
DPKG-based distros (Debian, Ubuntu, Mint etc.):
sudo apt-get install apache2 php5 libapache2-mod-php5
RPM-based distros (RHEL, CentOS, Fedora etc.):
sudo yum install apache2 php5 libapache2-mod-php5
For other distributions, search for packages with similiar names in your repositories or compile them.
Step 2. Download my installer script:
https://mega.co.nz/#!0VUlgTCS!7q8vAK5Bd5aTuKSWP6DQ9eZYTPyqjUHhJEheIHeaGNI
Step 3. Navigate to the download directory:
cd ~/Downloads
Step 4. Run the script with root (superuser) permissions:
sudo ./sh5-install.sh
Step 5. Open your favourite web browser and navigate to localhost/scratch-html5
Step 6. Done!

scimonster

Zacshap21 wrote:
Is it still to early to ask when? It seems a lot of people have posted in this forum topic so maybe that means a lot of people are helping out. Do you have an estimate at least? Does this mean I'll be able to edit my projects on an iOS device? How will I test them? If my game has a
<key [up arrow] pressed?>
in it, how will my iOS device click up arrow? I'm sure there is a simple solution to this though.

Good luck!

No, lots of posts doesn't mean lots of help.

ATM, an editor is not being provided, only a player.

As mentioned by @jTron, there are arrow buttons. For other keys though, you're out of luck. But at least you can use that much, right?

Retired Community Moderator
BTW, i run Google Chrome 41.0.2272.101 on a Linux system - Ubuntu 14.04. NEW: iPad 4th gen. w/retina.

418 I'm a teapot (original - to be read by bored computer geeks)
THE GAME (you just lost)
; THE SEMICOLON LIVES ON IN OUR SIGS

MegaApuTurkUltra

This is really cool! I would like to help! (I'm experienced with html5 and js)

How exactly does it work? Does it actually convert the project json to javascript (like Processingjs) or does it just interpret the json (like the current flash player (lags a lot))?
If it actually created javascript out of the project json it would open new doors for the complexity of projects that could be run on scratch. Projects would be able to have much more code without lagging (especially useful for batch pen operations - even “run without screen refresh” can't prevent all the lag).

Also, I'm assuming you use the <canvas> element for rendering, so why not add an experimental 3D extension using webGL?

$(".box-head")[0].textContent = "committing AT crimes since $whenever"

scimonster

MegaApuTurkUltra wrote:
This is really cool! I would like to help! (I'm experienced with html5 and js)

How exactly does it work? Does it actually convert the project json to javascript (like Processingjs) or does it just interpret the json (like the current flash player (lags a lot))?
If it actually created javascript out of the project json it would open new doors for the complexity of projects that could be run on scratch. Projects would be able to have much more code without lagging (especially useful for batch pen operations - even “run without screen refresh” can't prevent all the lag).

Also, I'm assuming you use the <canvas> element for rendering, so why not add an experimental 3D extension using webGL?

It interprets the JSON source (along with the resources).

I think nXIII had some project going that actually compiles to JavaScript. Maybe ask him about that.

The <canvas> is actually not used. Each item (sprites, speech bubbles, variables, etc.) is given an element with special styling.

Retired Community Moderator
BTW, i run Google Chrome 41.0.2272.101 on a Linux system - Ubuntu 14.04. NEW: iPad 4th gen. w/retina.

418 I'm a teapot (original - to be read by bored computer geeks)
THE GAME (you just lost)
; THE SEMICOLON LIVES ON IN OUR SIGS

GrannyCookies

y

PullJosh wrote:
Awesome! My knowledge of html and JS are limited, so I won't be able to help with this (I wish I could).

I'm glad it's open source, though! Maybe I'll find a way to remove the green flag and stop sign. Those things are great for scratch, but I'd like to be able to create more professional looking games. Looks like that'll be coming soon (hopefully)!

Thanks for all your work, ST!

Yes, yes, and yes.

Firedrake969

post removed

Last edited by Firedrake969 (Oct. 18, 2014 01:08:46)

'17 rickoid

bf97b44a7fbd33db070f6ade2b7dc549

Dmith

In Windows you can use DenWer or XAMMP!

my referal for DigitalOcean

KostaGrigoriev

Zatherz wrote:
Something broke my instructions, so here are they, but corrected:
Setting up Scratch HTML5 player on Linux distributions
Step 1. Install prerequisites:
DPKG-based distros (Debian, Ubuntu, Mint etc.):
sudo apt-get install apache2 php5 libapache2-mod-php5
RPM-based distros (RHEL, CentOS, Fedora etc.):
sudo yum install apache2 php5 libapache2-mod-php5
For other distributions, search for packages with similiar names in your repositories or compile them.
Step 2. Download my installer script:
https://mega.co.nz/#!0VUlgTCS!7q8vAK5Bd5aTuKSWP6DQ9eZYTPyqjUHhJEheIHeaGNI
Step 3. Navigate to the download directory:
cd ~/Downloads
Step 4. Run the script with root (superuser) permissions:
sudo ./sh5-install.sh
Step 5. Open your favourite web browser and navigate to localhost/scratch-html5
Step 6. Done!

Step 2-1: Run whis command:
sudo apt-get install git
Step 3-1: Run whis command:
sudo chmod +x ./sh5-install.sh
(My operating system: Ubuntu 14.04 Linux )

whizzer

*iOS, Android and Windows
Everyone shall be remembered.

braxbroscratcher

You can set the HTML editor up like the forum scratchblocks plugin… I can't code this, though. Just an idea.

My signature is kumquat proof.
But not tangerine pro-
nomnomnomnomnom

Current Project:
n/a
Quotes: “In our last hour, we burn the most brightly, trying to deny that we are burning out.” -Me
“Well, no. 1024 Killerbytes make a Murderbyte.” -MegaByteCorporations
“I hate out of context quotes.” -Me
“I hate it when Cubeupload breaks.” -Also me

SuperRed38

Could use HTML 5 for blocks…

Zatherz

OK, fixed instructions again (with Arch Linux dependency installation command too as I use it now, doubt anyone other here does too but anyways…)
Setting up Scratch HTML5 player on Linux distributions

Please note that this script is abandoned and to run it on some distros you may need to modify it manually.
Step 1. Install prerequisites:
DPKG-based distros (Debian, Ubuntu, Mint etc.):
sudo apt-get install apache2 php5 libapache2-mod-php5 git
RPM-based distros (RHEL, CentOS, Fedora etc.):
sudo yum install apache2 php5 libapache2-mod-php5 git
Arch Linux (or forks like Manjaro):
sudo pacman -S apache php php-apache git
For other distributions, search for packages with similiar names in your repositories or compile them.
Step 2. Download my installer script:
Click here
Step 3. Navigate to the download directory:
cd /PATH/TO/THE/DIRECTORY/WITH/THE/SCRIPT
For example:
cd ~/Downloads
Step 4. Run the script with root (superuser) permissions:
sudo sh ./sh5-install.sh
Step 5. Open your favourite web browser and navigate to localhost/scratch-html5
Step 6. Done!

Last edited by Zatherz (Oct. 17, 2014 19:04:59)

PentagonStudios

Is this still going?

MegaApuTurkUltra

PentagonStudios wrote:
Is this still going?

Probably. Dev seems to have slowed down (gonna fork and make a pull request when I have time)
The problem is I can't seem to get the example to work. I cloned the repo and opened the index.html file, but the project is stuck on “loading project” and never starts. There's nothing in the console (maybe some exception is masked with a try/catch - I should try again with chrome's “break on exceptions” on…). I'm on Windows, Apache XAMPP stack. The folder in my htdocs containing the files is actually a symlink to the cloned repo in another location (although I don't think that changes anything).

What could be the problem?

$(".box-head")[0].textContent = "committing AT crimes since $whenever"

Discuss Scratch