Lesson 07 - Templates and Building
We have practiced the basic parts of programming - the commands, the syntax, abstraction and logic. Now it is time to put all these together to make an app.
We will use the term app loosely to mean a game, puzzle, tool, art piece, etc. We can also make a site but sites are more along the lines of what we make with traditional HTML with pages of text and pictures. An app is often one screen perhaps with panels and the user does something - like makes, communicates or plays.
Slides from WHY ZIM video presentation.
Let's take a look at REFERENCE and PRACTICE sections for templates and building!
ZIM Frame ► ZIM Templates
ZIM has a Frame class that makes a canvas tag, a stage, handles scaling and loading of assets. We also store a bunch of ZIM colors - but anytime we use a ZIM color, you are welcome to use any HTML color like "red" or "#C00";
The ready event is called when the canvas and stage are made. We usually want to get easy access to the stage and its width and height so we store them in shorter variables. We also usually set an outer color for the Browser window and a color for the frame. After our code, we need to update the stage so we see any changes.
Scaling Modes ► ZIM Templates
In our lessons, we have been typing code into a textarea and pressing the TEST button. This shows our code in a ZIM Frame in an HTML tag. We call this the TAG mode. Here are the scaling modes for ZIM Frame:
- FIT - provide app dimensions and fit these inside the window - EXAMPLE
- This is the easiest as you know the dimensions
- For mobile - it can waste space at the edges
- FULL - make an app that is the size of the window - EXAMPLE
- This is harder to make as you have to manually scale things
- It is good for mobile to fill all space
- We use scaleTo() and Layout() to help us
- OUTSIDE - provide dimensions and fit these outside the window - EXAMPLE
- Like fit - but content can go outside the window
- Easy full screen when it does not matter
- TAG - fit the app to an HTML tag with this ID - EXAMPLE
- Can specify dimensions or take tag dimensions
- Can style the canvas just like an image
Loading Assets ► ASSET Template
We have full control of when to load assets such as images, sound and fonts and events for when they are loaded. In many past ZIM examples, assets were loaded with frame.loadAssets(). Now, we can load assets right in the Frame() call. In the ready event function, we can add the image to the stage, play the sound or use the font.
Chrome and Safari give a security ERROR when interacting with local files containing images and sound. The solution is one of the following. Note that this is an error only when testing locally. When your app is on a server or as an app on mobile, there will be no problem.
Remove Security Error
- Use Firefox
- Put the file on a server
- On PC, adjust Chrome as follows:
- find your Chrome icon or shortcut
- right click and choose properties
- under Target, adjust your target to include:
- after the quotes - for example:
- "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
- open your terminal anywhere
- make sure Google Chrome is currently not running
- copy paste this line and hit enter
- open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
Template ► Code Zero - Template
ZIM works within a script tag inside our HTML page. In the past, we guided people to our ZIM ZIP file of HTML templates. Now, we tend to use the easy-to-copy template on the CODE page. We call CreateJS and ZIM libraries then start a script for our code. ZIM makes the canvas in the body. Here is the TOP and BOTTOM of the template:
So, you can see, that there is not much in the template. Here is a shortened version showing a round draggable circle on the stage:
Let's practice using templates.
This practice will be different than our earlier practices in that your are testing things in your own HTML page. Go to the ZIM Code page and from the second grey box section, COPY the ZIM template. Make an HTML page (text page with .html extension) in an editor like ATOM. REMOVE the Circle code from the template then follow the instructions below.
Building ► ZIM Badges - APP
We have the parts of coding and the template to build in - now, how do we build? First of all... it helps to know what we are building ;-) See the Dan Zen Creativity Tour for a guide.
Steps to Build
- Come up with an idea - see Creativity Framework
- Sketch the idea or draw wireframes
- User test the wireframes - do they make sense
- Choose a template and start coding
Build the main part of your app first. You want to know that this will work before you put effort in to the rest of the app. Do not build your intro screen first and have to wait for animation and click through every time you want to get to the main part of your app. That will slow you down. Things like your intro, help and about screens, conclusions - add these last.
You want to make things easy to test. So leave distracting sounds and animations until the end. At least turn off your animations (see ZIM ANIMATE constant). Often, you can build with Rectangle and Circle shapes as placeholders and substitute final graphics when you know your app will work.
Do one step at a time. Get things on the stage with hard-coded values. If you see that you are repeating code, then you can apply the Abstraction lesson. But generally, get something to work, then make it efficient. Then get something else on the stage, then make it efficient, etc. Try not to wait until the end to make things efficient, but do not try to start efficient.
We build in steps and often these go in cycles:
Common Build Order
- Add an asset
- Shape, Image, Component, Sprite, etc.
- click, mousedown, pressmove, pressup, etc.
- animate, remove, add, move, score, etc.
Examples ► ZIM Examples
Most of the ZIM Examples are commented for learning and show a variety of complexities. Note that they have been made through time so see the ZIM Tips for current code techniques.
A great place to practice is the ZIM Badges tutorial called APP that takes you through the many steps of making an app. We do not need the ZIM namespace as we use in the tutorial.
GitHub is an application for keeping track of changes. It can be used to show the actual build steps taken. Here is an advanced application called PsychicPixels in GitHub. Note the first bunch of steps at the bottom of the list. You can read a description of the changes and see the code for each step.
The code for a finished app always looks like a lot and complex. Yet the code is created a step at a time. It does take some practice to keep track of where you are going and what you have done. It almost seems like one problem after another! Yet, that is building. Make sure that you revel when things go right!
There are also build patterns - where the types of apps or parts of apps have similarities across projects. These tend to be advanced so have a look at them when you are ready. There is the Module pattern and the MVC or Model View Controller pattern - and there are certainly more.
Techniques ► ZIM Bits
There are many build techniques that we use over and over in Interactive Media. In other words - these are patterns for the parts of what we build. These are demonstrated in the ZIM Bits site. As we build, we insert code based on these techniques.
- Containers of monsters
- We loop and get children
- We apply events and use e.target
- Drag and drop can slightly miss
- So animate the item to final place
- Or if too far away, go back
- Change this to change that
- Sliders, Dials, Mouse positions
- control size, rotation, etc.
- Head towards values
- Looks natural
- The same thing as easing
- A page of thumbnails
- Done with a loop or double loop
- Scrollers, Parallax, MotionControllers, Emitters
- See Controls Lesson
- Buttons, Panes, Sliders, etc.
- See Display Objects Lesson
- Progress Bars
- Loading animations
- Based on percent loaded
- See Frame events
Let's practice some Build Techniques!
Here are examples of some build techniques. More can be found in at ZIM Bits. We are back to practicing with the TEST button on this page but you are welcome to start building apps in your own template files.
Learning to build takes time. After a while, you start to know how to solve certain problems. Keep coming back to this lesson as you progress and you will find you understand the tips here more as you go.
Programming is the world's best puzzle. Enjoy your time programming and feeling the satisfaction of building! Rest assured, ZIM helps you do things easily. Do not go off to some other framework because you find this hard. It will be just as hard and most likely harder in other frameworks. Help is always available at ZIM SLACK.