View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

A tutorial for Morphic by Mike Noonan

An introductory guide to Morphic and its Morphs


My favorite aspect of squeak is Morphic. Morphic allows you to display and manipulate
things visually through morphs. Its a breeze for making cool interfaces as well.

For our project this semester, we had to make a 2d animation studio...southpark stylee
...sort of. When beginning to use morph and create the actor, I didnt know which
morphs to use so this is partially why I am creating this.

Our actor was composed of:

Headmorph / facemorph:

These are for the head and face of an actor. I wont go into much detail here, because
these are so specific, but if you need to mimic a person, look no further.

SketchMorph:

A sketchmorph was used for the arms and legs of our actor.
This was a good choice because the sketchmorph supports images, so we could give our
actor a costume. Another reason sketchmoprh was used because it has rotation features.
While looking through other peoples code after the projects were done, I noticed some
people did a bunch of unnecessary math to figure out how to move the arms and legs.

SketchMorph allows you to define the heading of the morph, or in other words, the
direction its pointing. To make a morph rotate (about its center) in a 360 degree
motion you would do the following in a loop (or step):

sketchmorph heading := sketchmorph heading + 10.

this will add 10 degrees each iteration, and will make it rotate clockwise.
alternatively you could make it turn the opposite direction:

sketchmorph heading := sketchmorph heading - 10.

This is one line of code and it does all the math for you.
I did run into a problem though.
This rotates the morph on its center, i needed it to rotate the arms and legs on the
end of the morph, not the center. How did I do this?

Well I didnt do it, but I did something just as good:
make it look as if it is rotating about the edge.
I did this by loading an image into the sketchmorph that was transparant on one half of
the side. For the arm, I attached (positioned) the morph to the body in the center of
the sketch morph instead of the end. This way it apprears to be attached at the end of
the morph (shoulder) and appears to rotate about that end.

an actor without transparency in the arms:
Uploaded Image: actorShowArms.gif

an actor with transparency:
Uploaded Image: morphActor.gif

ImageMorph:

This was used for the body, it is similar to a sketchmorph, (and transform morph) in
the sense it can display pictures, but it can not rotate. To see code to display
images, scroll down to the using morphs section.


TransformMorph:

I have read this this should generally be used now instead of sketchmorph. It can
display, scale and rotate images. I might have used TransformMorph if i stumbled on it
before sketchmorph, but for my purposes sketch worked just fine.
I believe to rotate an image with a transform you use this method:

setOffset: newOffset angle: newAngle scale: newScale


CurveMorph/ PolygonMorphs:

These are morphs that you can define a series of verticies to create some odd shape of
your desire.

Here is an example of a curve morph I used to make a top hat for the actor:

hat := CurveMorph
vertices: {0@60. 60@60. 60@55. 50@55. 50@0. 10@0. 10@55. 0@55}
color: Color black
borderWidth: 1
borderColor: Color black.

defining verticies of a polygon morph works similarly.


TextMorph:

These can be used for displaying text...hence the name.



These are not all of the morphs, but you should be able to do what you need with these.
I did not cover more basic morphs like rectangle and elipse morph.


Using Morphs:

note: always always always make sure you initialize your super when you are using a

morph. this is as simple as putting this line in the initialize of your morph class:

super initialize.

if you do not to this, you will get all sorts of really weird errors, and you may crash
squeak. i made this mistake a few times, and pulled my hair out wondering why my morph
wouldnt recognize position.

Basic functions:

self extent: 300@300.

self position: 40@100.


To display an image inside sketchmorph, imagemorph, or transform morph:

mymorph newForm: (GIFReadWriter formFromFileNamed: 'imagename.gif').

just make sure your image is in the same directory as your squeak image.


One nice feature of morphic is that it allows a morph to have submorphs, such that one
morph can contain many other morphs. This combined with step makes animation super
easy. So if you have an actor made up of various morphs, you can use (self changed)
and what not to delegate messages to all the body parts to keep them moving together,
OR, you can just add the morphs as submorph and move the main supermorph.

For the actor, I used a basic morph. Inside that morph I added the body, head, arms
and legs. So to move all of those body parts I would just change the position of the
Actor morph, and all the body parts would follow.
How I did this:

First I set the actor to be transparant, otherwise, there would be a big blue square
behind all the body parts.

myMorph beTransparent.

Next we add all our morphs to this main morph:

myMorph
addMorph: (leftArm := Arm new);
addMorph: (rightArm := Arm new);
addMorph: (torso := ImageMorph new);
addMorphBack: (legs := Legs new);
addMorphFront: (head := HeadMorph new).

addMorphBack ensure the morph will be behind all the other morphs,
addMorphFront does the exact opposite.

(note that the arm and legs are morphs themselves)


Now we have a bunch of morphs inside other morphs, but how can we manage these things?
We can iterate through all of a morphs submorphs fairly easy, and you can determine the
type of the morph as well.

self submorphs do: [:each |
(each isKindOf: (PolygonMorph)) ifTrue: [each visible: false]]
].

this iterates through the submorphs and when we find a polygon morph we make it
invisible.
Uploaded Image: morphActor.gif
Uploaded Image: actorShowArms.gif

Links to this Page