Using the RenderKit Component and JavaScript to create Simple Particle Components

Introduction

The Render Kit Component is used where you want control over the application via JavaScript. You can add script to initialize the Component, add Actions to events and control sprites using this Component  – allowing you to create simple games, animations and add other effects to a page.

JavaScript is now more fully featured for script development and allows access to all core functions within the JS language. We suggest that you complete the Restaurant App tutorial before attempting this.

In this tutorial, we will learn to set up the Render Kit Component and use JavaScript to add very simple particles to the page. This will demonstrate the use of a sprite-sheet, setting up JavaScript within the App and Render Kit event/Action management.

Let’s get started!

App Setup

  1. Log in to Umajin App Creator then add a “New Blank App” for this project – name it anything that identifies it as a tutorial.
    renderkit_js1
  2. Add a new Render Kit component to the Landing Page.
    renderkit_js2
  3. This Component is created to fill the page and has many events available to trigger Actions – we will be using the ‘On Tick’ event for this tutorial.
    renderkit_js3
  4. You will also add a Button Component to the bottom of the Landing Page and change the Text to ‘Stop Particles’.
  5. Next, we open the ‘Resources Folder’ from the File menu. This folder contains all the assets for your App and has many sub-folders; two of which are important to this tutorial.
    • The ‘images’ folder will house the sprite-sheet and its atlas.
    • The ‘scripts’ folder will house the JavaScript file.
  6. The first thing we want to do in the ‘Resources Folder’ is to set up a sprite-sheet for each particle in the app. We used TexturePacker (https://www.codeandweb.com/texturepacker) to create the sprite-sheets for Umajin App Creator. This tool creates a packed image and atlas file for the Particle Sprites. Click here to download the sprite-sheet/atlas for this application and un-zip the file into the /’images’ sub-folder.
  7. Go to the Properties Inspector of the Umajin App Creator and enter the name of the file (without the extension) into the Spritesheet property (in this case, it will be ParticlesSmall).
    renderkit_js4
  8. We’ll go back to the Resources Folder now and open the scripts sub-folder. Add a new “particles.js” file to it then open this file in your favorite text editor.
    Note: If you don’t already have a text editor then Notepad++ – https://notepad-plus-plus.org/ – on Windows or TextWrangler – http://www.barebones.com/products/textwrangler/ – on Mac are free and work well for this purpose. Of course, you can also use a JavaScript development environment and even add this file to a version control system so you can roll back versions, etc.
  9. This will be the file where we add JavaScript code to initiate and then manipulate the particles. Let’s have a look at the code:

    Note: you can copy the code from the above window and paste it into the .js file from above or use this one.

  10. Save the code file and head back to Umajin App Creator
  11. Here we will go to the Landing Page and click Actions in the Properties Inspector. We need to add the ‘Particle Initialize’ action to the ‘After Page Loads’ event. Add the Render Kit and Button Components to from steps 2 and 3 above, to the drop-downs.
    renderkit_js5
  12. Add the ‘Particle Update’ Custom Action to the Render Kit’s ‘On Tick’ event and the ‘Particle Toggle’ action to the Button’s ‘On Press’ event.
    renderkit_js6
  13. Now save and run the application; it will spawn a group of particles which fall toward the bottom of the screen. As a particle disappears from the screen, a ‘new’ one will appear at the emitter point.
    renderkit_js7