Coding Confidence

At MakerBox we strive to teach process over product.   Having a fancy game is worthless unless you actually understand the code that makes it work.  Even more important is thinking critically so when you end up with a bug in your code (which you will) you can use logic and problem solving skills to fix it.

IMG_20170824_171604

In Level Up this term we focused on developing these skills along with self-confidence.  We began the term by looking at a simple video game the students then had to recreate on their own using skills they learnt in Adventures in Game Design.  As a class students identified the basic game mechanics used:

  • Objective: Get to the goal before the enemies touch you
  • Instructions
  • 4 sprites (hero, 2 enemies, 1 goal)
    • Hero – moves with mouse
    • 2 Enemies – move automatically, collision detection script = lose
    • Goal – collision detection script = win

From there students could play the example game as many times as they liked, but they were not allowed to look at the code.  Instead they had to draw upon their own knowledge and deductive reasoning skills to find the answers.

IMG_20170824_164429

For the following two weeks we developed video games that use web cameras to add a level of interactivity.  Players use their bodies as the controller, instead of a mouse or keyboard.   It was here we began to have some confidence issues.  When trying to recall a script they already knew they would immediately ask for the answer or worse, immediately give up, instead of trying to work through it on their own or with a classmate.

The problem wasn’t knowledge, it was confidence.  I never outright gave the answer, but through asking questions such as “What do you want your sprite to do?” and “What type of code block do you think you need to make your sprite do that action?”  students always found the answer on their own.

As the course progressed emphasis was placed on four key areas:

  • Active listening
  • Thinking through problems before asking for help
  • Helping others/collaborating to solve problems
  • Looking at issues as a whole class

By the last session we had students jumping out of their chairs to help their fellow classmates.  Sometimes even with the whole class looking at code it was hard to find the answer, but usually it was something quite small that had just been overlooked, like a missing forever loop or two code blocks in the wrong order.

IMG_20170831_170743

Students consulting on a sprite for their collaborative game

It is uncomfortable sometimes, but accepting mistakes and working through them is such an important part of the coding process.

Students should remember no one is naturally good at coding.  The only way to improve coding skills is through practice and lots and lots of mistakes!  Even professional coders end up with buggy code, but they never give up and that’s what’s truly important.

All the projects from this term are available online.  If students wish to continue working on their games they can either download their projects to their home computer or fork their projects using their personal Scratch account: scratch.mit.edu/users/levelup2017/studios.

 

 

 

Advertisements

Programming with Python

It’s been an intense year for our junior youth at Rata Studios.  Term 1 found them creating graphics and planning levels for a future video game.  Terms 2 and 3 had them building their own video games from scratch with the Python programming language.

All students had some previous coding experience, whether with Scratch, HTML, or some basic Python, but the past two terms stretched them considerably with awesome results.  In Term 1 students were walked through the basics of coding with Python, starting with creating a simple dice roller game and simple drawings with Turtle, before moving on to creating platform games using PyGame.

 

Previous knowledge of coding via Scratch gave students the vocabulary and basic logic skills to understand what was happening with Python, even if the process was a bit different.

The three most important terms we learned in Python were:

Class – an object containing variables and functions useful for the class.  (Player and Enemy are examples of classes)  We use classes to help make our code more organised.

Screen Shot 2017-09-25 at 1.14.37 PM

Function – usually, but not always, goes inside of a class.  Functions can be called later on in the code.  All functions begin with the keyword def, for define.

Screen Shot 2017-09-25 at 1.15.16 PM

Variables – a value we don’t know yet and/or a value that can change

At the end of each session code was uploaded to the GitHub website.  Students learned how to commit their changes as well as file and resolve issues.  When creating issues it is important to be very specific so the reader understands what isn’t working in the code.  The best bug reports require an understanding of what is going wrong in the code and a strong description of how the issue is presenting itself.

“What is GitHub actually used for?”
                               – Finn

GitHub is used by professional programmers exactly the way we used it in class, to store, share, and fix code!  Students interested in working as programmers should continue to use their GitHub accounts as it will be an asset when they apply to future jobs.  Contributing to other user’s GitHub projects is also an excellent way to increase your programming skills.

By the end of Term 2 students began to see patterns in their code.  Term 3 took a significantly more self-guided approach where each student worked at their own pace and were encouraged to think critically about the code needed to further develop their games.  There was much protest the day we stopped providing answers and began providing open ended prompts, no one thought they would be able to create loot entirely on their own.  After a few false starts, students started collaborating with each other, trading knowledge, and working off each other’s strengths.  Once a small handful of students figured loot out, they were able to assist others who were still stuck.

This is what coding is all about.  No one is naturally good at programming and it’s impossible to memorise every keyword, but through practice, collaboration, and asking heaps of questions we learn how to think logically and find the answers to our problems.

When we began this series of courses I honestly wasn’t sure how it was going to go, but now that we are at the end I couldn’t possibly be prouder.  The students produced amazing work over these three terms and showed real commitment and dedication to their individual projects.  It takes a great deal of effort to commit to a project for such a long period of time, but they tackled the challenge head on with excellent results.

All code created this term is available on GitHub under a GNU General Public License.  You can view all our repositories at: github.com/MakerBox-NZ

 

 

Morphing Madness

Awesome animators returned to Rata Studios this term for Clay Animation.  This time we looked at emotions, movement, character creation, and morphing.  Morphing was a clear winner with nearly all animations incorporating some morphing element, from sentient swords to flying poo.

We also watched a wide variety of animated shorts for inspiration.  The one short that captured everyone’s imagination was Fade by Josh Lopata.  Fade is a traditional stop-motion animation with wire puppets covered with latex.   The students were enraptured by the story and had many inquiries and thoughts about the filmmakers stylistic choices.  It was awesome to hear them comment on the animators use of size and space to illicit emotion.  They were really thinking about the film in a critical way.

Our final animations were set to music this time, before students even began planning their animations we listened to four songs.  As a class we discussed how each song made us feel and what type of animation might fit with the music.  From there students sketched their animations onto storyboards and began creating appropriate characters.  Emerson immediately had a vision for the fast-paced Ultra Polka and set to work creating a brightly coloured cat to dance around the screen.  Whereas Adam and Mattias set about making an epic battle movie using Killers as their soundtrack.  All songs used are available from incompetech.com and under Creative Commons license.

During the last session some students happily expressed though they liked LEGO animation, they liked using clay even better because it gave them the freedom to create anything they wanted.

Qa1G9I7RoApRySE4rjTiMQXgI46YpwcohVzDVKtU7wN5ZUoJ-qjvJyfZqLEpeiTG_K_u_V3W8wM-gZdw0vvzEOkYMzwrgDEXtfvCvZ8Sli8V7dBUf3wg9M1jS9M39m7Mx8fGyYvvQ8HbVfu3FBTYWxVMpNakLhXFIcezBtRpzS8MTi_moy8sgf5xJ8

LEGO Madness

Another term of LEGO Animation at Rata Studios has come to an end and boy was it a blast!   This wild term was filled with creative parodies, helpful classmates, and sparkly blood.

Students discovered they can use coloured paper and tape to alter LEGO mini-figures to look like any character they can imagine.  This technique opens up the possibilities for creativity and can be applied to LEGO bricks as well.

IMG_20170620_164554

Because many LEGO sets feature well-known movie characters, we spent two sessions exploring the difference between parody and simply copying another person’s work.   The end result was a number of amusing animations that turned classic stories on their head, often with murderous conclusions!

IMG_20170523_170405

Students imagine:  What if the step-sisters dislike Cinderella because she murdered their brother? 

Death was a running theme in many of the animations this term.  In one of our feedback sessions, “murder’ was cited as the top thing everyone did consistently well.   Other top skills included character creation, running up stairs, and camera movements.   Whereas many students felt they needed to work on making their animations slower by using smaller movements and taking more pictures.

IMG_20170606_173843.jpg

As the course progressed, many students who were previously shy began coming out of their shells. It was wonderful to see them engaging with one another and sharing their ideas.  On multiple occasions, I saw students voluntarily trading characters and animation tips.  Sharing ideas is such an important (yet difficult) part of working in a creative environment, it was great to see it happening.

 

Creating with Krita

IMG_20170308_171356.jpg

Last term students got drawing with Krita, professional, open-source digital painting software.  Over eight sessions they learned best practices for creating digital art and designed their own 2D graphics for a future video game.

A big part of knowing how to design a video game comes from understanding their history and looking at games already on the market.   Many discussions were had while viewing art and levels from popular games such as Super Mario Brothers, Portal, and BattleBlock Theatre.

IMG_20170405_161500.jpg

After looking at what has come before them, students came up with concepts for their own original games.  Once they had an idea of the storyline and objective they sketched out what the first level could look like.  This included deciding all the assets that would be needed for gameplay, such as obstacles, non-playable characters (NPCs), and loot.  They then had to decide which objects needed to be individual assets and which could be a part of the background.

All the students agree one of the most difficult parts of learning Krita was remembering to use layers.  They saw the value in it, as one student remarked:

It is definitely worth using layers if you want to delete a certain part of your characters without deleting the whole thing.

George

However, everyone said it was difficult to remember this when they were in the  midst of their creative flow.  With all things, practice makes perfect though, and half the class did say they used layers for their final assets.

Students left the class with a Dropbox folder full of assets that can be used as graphics in future Scratch or Python games.

[This class] gave you freedom.  Sometimes at home you don’t have time to draw, this gave me time to draw, to think about what they were.  I was working on another project while doing this and I designed some sprites and backgrounds for that project.

George

 

I like how it gave you freedom so it just made your brain think about ideas and just came up with whole new concepts.

Zach

 

 

 

Pixilated Animators

We had a small but dedicated group of eager animators in Mixed Media Animation at Rata Studios this term.  Over eight sessions they learned to make the impossible possible using various mediums and stop-motion animation.

During each session we looked at the work of animators that helped define the genre, from Will Vinton, Norman McLaren, and Terry Gilliam.  We also explored modern artists who have made their mark online, such as PES, BLU, and the comedic duo, Rhett & Link.  Anyone familiar with these animators can see how they influenced the work of the kids.

In the final weeks two students finished working on their final animations and were looking for work to do while their classmates finished their final animations.  I showed them how to import videos into iMovie and add title cards.  This is the first time a final animation video was edited by students!  They did an excellent job of it.

We ended the class by making a pixilation.  Pixilation is a style of animation in which real people are animated, not inanimate objects or drawings.  It takes a lot of patience, but the effects you can achieve are pretty cool.   Watch our pixilation to discover students who can teleport, disappear, and even fly!

Building the Web

Over the course of eight weeks students discovered how to make the web their own.  Some web builders had prior knowledge of HTML (hypertext markup language) and CSS (cascading stylesheets), the languages of the web, but most were complete novices.

This class was different from most as we worked on one project the entire term.  In the second session we began planning out what our website would look like and what it would be about.  Every website was completely different!


For the first few sessions our sites didn’t look all that interesting, they had pictures and text, but when we were just using HTML all the content ran down the side of the page in a straight line.  Then we learned how to add CSS to style our HTML and things really began to take off.  With CSS we were able to tell content exactly where we wanted it to appear and we were able to even add colour and different fonts.

Because we were working on one large project and every website was unique, there was a lot of self-guided learning taking place for more advanced tasks.   Two students wanted to implement quizzes into their sites, but they both went about doing so in different ways.  The one used an external quiz site to create, then embed, his quizzes while the other coded his quizzes using Javascript.  Another student wanted to give users the ability to change the background colour of his website and used Javascript and buttons to accomplish this.

Apart from learning how to code for the web, we also learned how to use the web responsibly.  During a lesson on how to tell if information found online is true, the students were most interested in knowing how they could be good sources of factual information.  Through all of our sessions we endeavored to use only Creative Commons licensed content.

Creative Commons licensed works allow anyone to use the work without asking permission.  When you see the Creative Commons logo, you know permission has already been given.  We discussed the difference between photos that are Creative Commons licensed and photos that show up when you do a Google image search, which despite common perceptions are usually not free for anyone to use.

It was an amazing term and I am very excited to see what this creative bunch comes up with next.  Their websites can be remixed over to their individual Mozilla Thimble accounts or downloaded as .zip files.

Final Websites

Six Word Holiday Remix