This site requires JavaScript, please enable it in your browser!
Greenfoot back
Twitter Twitter.hover
davmac
davmac wrote ...

2017/5/26

Automatic Javascript conversion of Scenarios

davmac davmac

2017/5/26

#
For a while the Greenfoot development team have been working on a solution to the problem of Java applets becoming increasingly difficult to run in modern browsers. I'm pleased to announce that we have a solution, which should currently be considered "apha quality", for automatically converting Greenfoot scenarios to Javascript - so that they can run in any web browser (possibly including some smartphones), regardless of whether the Java plugin has been installed. I'm now opening this up to all members of the Greenfoot site so they can begin experimenting with the implementation and report any problems (but please read this entire message before posting a response - thanks!). To view the Javascript version of a scenario, simply append "?js=true" to the scenario URL. For example, to view Nosson's Brick Breaker scenario, go to the following URL: http://www.greenfoot.org/scenarios/18105?js=true The following limitations apply to scenario conversion:
  • Only Greenfoot 3.1.0+ scenarios are supported. Scenarios using the old API, including the java.awt.Color class, will not work. However, some older scenarios might work.
  • The complete Java API is not available (although most commonly used API is working). In particular, AWT and Swing are missing, and will never be provided. The getAwtImage() method from GreenfootImage will not work.
  • The Javascript generated is only expected to work in modern browsers. Use Firefox, Chrome, Safari, or Internet Explorer 1011 (or Edge). (edit) Internet Explorer is more likely to exhibit issues than the other browsers due to its lack of compliance with standards. There will probably never be official support for older versions of Internet Explorer.
  • Support for different sound formats is browser dependent. Some phones in particular might be able to play mp3 files but not wav files. (edit: Internet Explorer is also unable to play wav files).
Feel free to test your favourite scenarios and report problems or ask questions (preferably in this discussion), bearing the above points in mind. Please only report problems that you can diagnose completely, i.e. where you can explain exactly what the scenario does that isn't working, and try not to report duplicate issues. It is helpful if scenario source code is available. (edit:) Please always specify what browser (including version number) that you are using. The following known bugs are present (this list will be added to as more issues are found):
  • Sounds do not stop playing when the scenario resets
  • Reset does not work correctly for all scenarios
  • Mouse drags do not work when the mouse cursor leaves the world (should be fixed now).
  • UserInfo isn't working at all, yet.
  • On phones/tablets scenarios might not respond to input (should be fixed).
  • On Internet Explorer, which does not support playing .wav files, scenarios trying to play .wav files will crash or not load (fixed, though wav files won't play they won't cause a crash).
  • On Internet Explorer, keyboard input isn't recognized (at least for arrow keys) (fixed).
  • On Internet Explorer, dragging the mouse outside the world will cause text selection (fixed).
  • If a scenario fails to load, no suitable error message is displayed.
  • Loading resources (text files, etc) using ClassLoader doesn't work (fixed).
Yehuda Yehuda

2017/5/28

#
The image of an Actor in one of my scenarios doesn't show. In Stopwatch the image displaying the elapsed time is not there, it's supposed to be under the reset button to the right of the stop button. (The scenario can be seen in it's working state when not using this Javascript version.) It seems that using text with GreenfootImages doesn't work, when I went to this scenario I saw that there's no text either.
davmac davmac

2017/5/29

#
Yehuda wrote...
The image of an Actor in one of my scenarios doesn't show. In Stopwatch the image displaying the elapsed time is not there, it's supposed to be under the reset button to the right of the stop button. (The scenario can be seen in it's working state when not using this Javascript version.) It seems that using text with GreenfootImages doesn't work, when I went to this scenario I saw that there's no text either.
It appears for me (though the font size looks a little too large). What browser are you trying?
Super_Hippo Super_Hippo

2017/5/29

#
I don't see the displayed time either when using the JS version. Tested with Microsoft Edge, Internet Explorer 11 and Google Chrome 58. Chrome is the only one where hovering with the mouse is detected (Start, Stop, Reset turns red), but the time isn't visible in any of the browsers. I have to say that I think it's a great idea to make this possible since it can really scare new people away when it is so difficult to open the scenarios. It also seem to fix this bug - which happens when using the non-JS version - where when actors reach the edge of the world, they print themselves at the browser background at this edge... I just tested the Brick Breaker scenario which was the example in the post. Following things happened: Edge: Actors displaying life, level etc. not visible. Movement with arrow keys not possible. Space to shoot the ball works, but the arrow keys scroll the browser window instead of controlling the actor in the world. Maybe this is related to "On phones/tablets scenarios might not respond to input." even though I am using a notebook. Internet Explorer: Just showing "Loading". I gave up after an half hour. Chrome: Actors displaying life, level etc. not visible. Controlling is possible here without problems.
Yehuda Yehuda

2017/5/30

#
@davmac I think everything is the same by me as is by Hippo. (But not necessarily the versions of the browsers. I have Google Chrome Version 55.0.2883.87 m, Internet Explorer Version 11, and Microsoft Edge 20.)
Alola_Sandslash Alola_Sandslash

2017/5/30

#
When I try doing this on Internet Explorer it just keeps saying loading
davmac davmac

2017/5/30

#
Thanks, I can confirm the issue with Chrome and will test Edge/IE soon.
Alola_Sandslash wrote...
When I try doing this on Internet Explorer it just keeps saying loading
What version of Internet Explorer?
davmac davmac

2017/5/30

#
Issues with text not displaying correctly in Chrome and Internet Explorer have now been addressed (scenario conversion takes a little while to process so please allow some time before trying again). Scenarios using .wav format sounds do not currently work in Internet Explorer, which doesn't (for some reason that is beyond me) support this extremely simple file format; maybe we can come up with a workaround in the future. It's also been noted that Internet Explorer/Edge do not correctly capture arrow key input. The list of bugs has been updated.
davmac davmac

2017/6/5

#
A large number of the initial issues have now been fixed. If you have any scenarios which don't work (and which aren't affected by the known limitations posted above) now would be a good time to shout! Thanks.
greatjack greatjack

2017/6/23

#
Wow, incredible. Which transpiler are you using to generate the javascript?
davmac davmac

2017/6/24

#
greatjack wrote...
Wow, incredible. Which transpiler are you using to generate the javascript?
It is based on TeaVM, which also provides a substantial portion of the Java API . The Greenfoot API is rewritten over the TeaVM APIs for HTML DOM manipulation etc.
You need to login to post a reply.