Making and playing Computer Games With Scratch: Embedding Games to Share

This post is jumping ahead slightly, since most of my students are still involved in the design and make stages of the process, however one or two have begun to ask, how they can share their games when finished.

After a search around I came across this solution in the Scratch Forums, and as I talk my way through the process for myself I hope that the content here will be useful for others.  One of my main reasons for looking into this was the evaluation process, within AF1 of phase 3 units of work, and wanting to make available outcomes created by students for peer assessment and review.  The obvious thing to do was to place finished games on the VLE or to encourage students to upload content to a wiki, and use commenting as a way of feeding back.

The VLE with the above solution has been a no go, even with absolute link locations copied and pasted to seperately uploaded html pages, the VLE (Fronter) seems unable to deliver the content. Perhaps this ia an issue with the way files are stored or access rights managed within the platform, either way the html pages will open, but the same error message appears afterward, about being unable to locate the file, regardless of attempts to redirect file locations and so on.  I'm sure someone will be able to help, and I would be grateful for any comments that lead me toward resolving this.  I guess I also need to contact my colleagues at Fronter, to get their take on this, and to discuss this with our Primary VLE colleagues at ITs Learning, when we meet this week.

SO! to the work around!

For the time being I have opted instead to create a web folder on our web server, to add the game files and applets to this space and then to use hyperlinks from within the VLE or from the school website to enable access to and sharing of these outcomes of learning.  So how did this work?

First of all on my local machine/school laptop I created a folder called "scratch_games" and into this have copied completed student game (scratch) files.  These have been renamed to exclude capital letters,  extraneous characters - the students for some reason insist on adding - and spaces.  They have been reduced to a common format eg si_pacman.sb

• where si is the student's name
• pacman is the game
• .sb is the scratch file extension.

Into this folder I have also placed one copy of each of the java applets downloaded from the site above

• ScratchApplet.jar
• soundbank.gm

For each game a separate html file has also been created, also using the naming convention above but saved with a file extension .htm eg si_packman.htm

The html files were created using this file template using code copied from the above site to a notepad document, that was then edited as follows.

Using save as, selecting all files from the file type drop down, these were then saved in the file convention outlined above eg si_gamename.htm

A home page or index file is the next step, created within the Pacman Project folder with individual hyperlinks to each game.  Though I will probably play with this idea a little if the embed code works here so that each game is accessible within a single project page.

The "Pacman" folder containing all scratch files, java applets and html files were then uploaded to the school's web server clicking the following hyperlinks will allow you to see examples of how the games currently appear in individual html files.  Clcikcing the green flag will start the games, and use of the arrow keys will allow the games to be played.

• J's Frog Eater Thingy
• Ds Pacman With Ghost
• J's Home Extended Learning Project

Unfortunately, for the time being at least, I am unable to embed the applet to run directly in my blog, but this is my next challenge.  I am sure there is tweak out there somewhere, something I am missing, and am hopeful that either another "blogger" user can help and leap to my rescue with this particular platform, or that some of my other more experienced visitors can help overcome the wider issue.  I hope this makes sense is useful.  I look forward to any comments, and thoughts from visitors.  Thank you in advance. :o)

An Additional line of thought from a colleague

After Posting at the weekend, I was contacted through comments about an additional means I could try to run the student's scratch games.  The above process still applies and is required for this idea and tool to work.  Having created the folder, added the scratch files themselves and created an html page for each file using the code above, these are then uploaded to the host web space as outlined above. Next an iframe within the new page.  Here is the code that I used in blogger...

The file linked to above should be saved as is, and maintained as a text file, however changing the url and then saving the file makes it a template to be copied and pasted with minor editing needed to point the frame at what you want inside it.  Eg in the case of my iframe above the individual student games and so, all I needed to edit after copying and pasting was the html file name, in blue above.

As of yet I have not tried this out in the VLE, but this is something to move onto next. Have a play and see how you get on.