< User:Rumanti

All OpenSprites developers with Scratch Wiki accounts may edit and/or expand the OpenSprites section below! But please keep other content in peace :P

OpenSprites Resources

Official logo of OpenSprites Resources

The OpenSprites Resources (commonly referred as OpenSprites or sometimes abbreviated as OS) is a site where Scratchers can share open source media (such as images and sounds) as well as scripts for projects. The site is designed to succeed the inactive and "retired" Scratch Resources. The site is developed by various Scratchers in a collaborative manner.[1]

The site can be accessed at opensprites.org.

The official Scratch account for OpenSprites Resources is OpenSprites.

Features

The OpenSprites website contains some features, as listed below:

Anything shared or posted on OpenSprites Resources must follow the OpenSprites Guidelines, which was heavily influenced by Scratch's Community Guidelines. Any content uploaded is licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic license immediately from upload.[2]

References

  1. http://opensprites.org/about/#the-opensprites-team-
  2. http://opensprites.org/tos/

Developing Scratch Extensions

Scratch Extensions adds new functionality for Scratch projects, whether it is new blocks for scripts with difficult workarounds, or solutions to problems that used to be impossible to solve. Ever since ScratchX was released, everyone can learn to develop Scratch extensions. This tutorial is heavily influenced by the Developer Documentation on ScratchX. However, this is not an adaptation.

Before Developing

Before starting to develop, be sure to remember to do these things:

Required Experience

Before making extensions, the developer must have a good knowledge of JavaScript, importantly multidimensional Arrays, Objects, and Functions, (although these isn't the only required knowledge). You can learn JavaScript using the JavaScript track on Codecademy. It is very recommended to finish that track or similar courses first. However, this is not extremely necessary, as many had learned from experience.

The most important thing is that the developer must understand how their extension is going to work and all the code and algorithm to make it happen. For example, if the developer wants the extension to add the ability to upload files, the developer must first know how to upload files using JavaScript.

Efficiency is important, otherwise extensions may lag or take unnecessary time.

Other than Codecademy, Mozilla Developer Network and Khan Academy also offers JavaScript courses. Khan Academy is more friendly for beginners and demonstrates good examples a lot, Codecademy is rather advanced and is targeted for the dedicated, and Mozilla Developer Network is quite technical.

W3Schools IS NOT recommended, as it can be misleading for beginners and demonstrates bad examples.

Planning the extension

Before starting, carefully plan out your extension and maybe brainstorm. Plan out how the extension should work, what features it should have, its name, and other necessary information. Some quick notes on API documentations, or a sketch of the blocks will be surprisingly helpful. Keep your plan handy when coding the extension, so that you can focus on creating the extension, not distracted by a lack of ideas nor confused.

Set up GitHub Pages

The Scratch Team (or more specifically, the ScratchX Team) encourages developers to host their extensions using GitHub Pages, thus using the github.io domain. It is known that some extensions hosted outside github.io work[1][2], however, this is discouraged.

  1. Set up GitHub: If you already have a GitHub account, skip this. Register for an account at GitHub. An offline Git client is not necessary for developing extensions- all the steps necessary could be done online. There will be optional steps that needs an offline Git client that you might want to do, though- we will come to this later.
  2. Set up the repository: If you already have a GitHub page, skip this. Create a new repository called (YOUR GITHUB USERNAME).github.io. Make sure to get your GitHub username right, because it wouldn't work otherwise.
  3. Test your amazing new GitHub page Type in your browser's address bar the domain of your new GitHub page. If it does not work, maybe you're doing one of the previous steps wrong. But if you're successful- continue and set up crossdomain.xml.

Set up crossdomain.xml

A file named crossdomain.xml is needed in your repository in order for ScratchX to load your extensions and sample projects from your GitHub Page.

This security file lets Flash know that it is allowed to load resources from your site. It will grant Flash access to files on your public repositories, but will not grant access to any private repositories. To learn more about crossdomain.xml, see this article on Adobe Developer Connection.

Create a new file named crossdomain.xml inside your github.io repository, and paste this as-is inside the file:

<cross-domain-policy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd"> <site-control permitted-cross-domain-policies="master-only"/> <allow-access-from domain="scratchx.org"/> <allow-access-from domain="llk.github.io"/> </cross-domain-policy>

Save the file. You're now done setting up crossdomain.xml, continue to coding the extension!

Coding the Extension

The extension code's contents is basically only the data about the features, functions on what the blocks do, and ScratchX will do the rest.

Start off by creating a JavaScript (.js) file with this boilerplate code.

(function(ext) {

   // Cleanup function when the extension is unloaded 
   ext._shutdown = function() {};
   // Status reporting code
   // Use this to report missing hardware, plugin or unsupported browser
   ext._getStatus = function() {
       return {status: 2, msg: 'Ready'};
   };
   // Block and block menu descriptions
   var descriptor = {
       blocks: [
       ]
   };
   // Register the extension
   ScratchExtensions.register('Sample extension', descriptor, ext);

})({});


Sharing Extensions

References

This tutorial is heavily influenced by the Developer Documentation on ScratchX, however, this is not an adaptation.

  1. https://scratch.mit.edu/discuss/topic/115666/
  2. https://scratch.mit.edu/discuss/topic/115670/