DAY22–26 intern in Deutschland : Make thing move!

Yanisa H. #AiFitLog
4 min readJul 14, 2017

--

This week spent most of time with planning lesson and designed what it should be look like. It’s hard for us to do this because we might through like kids that have no experience in programming.

We decided to make interactive lesson with existing block programming editor for CALLIOPE named http://pxt.calliope.cc/

We separated each component in each lesson. Gradually challenge the kids with combination components.

Here is a first look of our program.

First look compare with PXT Editor

As you can see we designed program similar to the original one because it would be good for kids to get used to with GUI position.

“Cali” our cute muse

As I am artist of team I responsible for complete every single asset in program such as Block components, Button, Text box, and icons.

Some of assets which I provided

I have an idea that if we have mascot to guide the kids, it will be more enjoyable! So I drew her, “Cali”. Inspired by logo and meaning of Calliope

“In Greek mythology, Calliope (/kəˈlaɪ.əpiː/ kə-LY-ə-pee; Ancient Greek: Καλλιόπη, Kalliopē “beautiful-voiced”) is the muse who presides over eloquence and epic poetry; so called from the ecstatic harmony of her voice. She is spoken of by Hesiod and Ovid as the “Chief of all Muses.” — Wikipedia

Calliope logo

I have 2 versions of her, First one is pixel art style and the second one is Chibi character style. After voting in our team, we choose the second one because it’s regular and more attractive.

Cali version 1 and 2

Then I put her at the bottom-left near the text box which plan to use as dialog box for her. If she is still image, maybe it’s not interesting enough. I decided to make her move!

Unity with Animation tools

This is not my first time using this tools but I need to explain that Unity have 2 way to create animation

Frame-based animation

This one you must have sprite sheet contains every frame of character movement, it should be like this.

Example of my frame-based sprite sheet

this way is not use not so much experience in Unity but in Photoshop or create asset part! you must drew character gradually move a little bit until finish that gesture.

Suggested tutorial for Frame-based animation

But this time I want to practice some new thing. So, I try the second way.

Bone-based animation

This way is new for me. I learnt some fundamental from this set of video

Prepared-sprite should separated every piece that can move. and use Sprite Editor Unity also provide this tool.

Preparing sprite using Sprite Editor

After these few step you can open Animation tab to arrange each frame what it should be looks like. And you can create new clip by clicking at the top-left drop-down. I created 4 gestures: idle, pointing, talking and waving.

Animation tool tab

In Animator part, we manage state of animation such as , if a state done what should be happen next? or should it need some parameter to trigger which should happen? and you also can manage it in code.

Animator tool tab

Many people came to FabLab to use facility like 3D printer and Laser cut. Everyone interested our game(the old one). I through we have more than 3 rounds of presentation per day but it is very enjoyable that people interested our project.

Mini presentation for FabLab visitor

--

--

Yanisa H. #AiFitLog

Developer 👩‍💻 / Diet & Skincare enthusiast #AiFitLog