funfunfun16
■サブモーフ
部品のモーフをたくさん作って、それを合体させて１つのモーフにする。
これがモーフの醍醐味じゃないでしょうかいな。で、モーフを合体するのはどうやるの？
ってなわけでまずは楕円モーフに四角形モーフをくっつけてみましょう。
■クラスを作る
こんどは「EllipseMorph」を継承しまする。
--------------------------------------------
EllipseMorph subclass: #TestMorph8
instanceVariableNames: ''
classVariableNames: ''
poolDictionaries: ''
category: 'MyMorph'
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )
■インスタンスを出します。
確認の為Workspaceに下記のコードを書いてドゥーイット。
--------------------------------------------
TestMorph8 new openInWorld
--------------------------------------------
Alt + d ( Cmd + d )
「あ、楕円だ。おひさしぶり」ってな感じで
これに四角形モールをくっつけちゃおう。
■メソッドを追加 四角形をくっつけちゃう
インスタンスができる時に「RectangleMorph」のインスタンスを作って合体させちゃいます。
この合体させたモーフののことをサブモーフっていうみたいですな。
サブモーフの大きさ、色、位置をついでに設定してます。
--------------------------------------------
initialize
| subRect |
super initialize.
self addMorph: (subRect _ RectangleMorph new).
self extent: 100@100.
subRect extent: 50@50.
self color: Color black.
subRect color: Color red.
self position: 50@50.
subRect position: self position + (70@30).
--------------------------------------------
サブモーフの位置は「楕円」モーフの左上を（０，０）とした位置設定になってます。
（もうちょっとスマートな設定の仕方がありそうなんだけど、
始めたばかりだし、ちょうベタな設定でやって後でその恩恵を受けることにしましょう）
アクセプト。
Alt + s ( Cmd + s )
そしてWorkSpaceでドゥーイット。
Alt + d ( Cmd + d )
ドラッグ移動してみると、くっついてるくっついてる。
■顔を作っちゃうです
合体のやり方がわかったので、簡単な顔でも作ってみるべさ。
「initialize」にソースコードがたくさん並んじゃってるけど、よく見るとけっこう単純でする。
上から順番に
- 顔の部品のインスタンスを作ってサブモーフにして
- 各サイズを設定
- ボーダーラインの幅を０に
- 各色を設定
- 各位置を設定
って感じ。
--------------------------------------------
initialize
| leftEye rightEye mouth |
super initialize.
self addMorph: (leftEye _ EllipseMorph new).
self addMorph: (rightEye _ EllipseMorph new).
self addMorph: (mouth _ EllipseMorph new).
self extent: 100@100.
leftEye extent: 10@10.
rightEye extent: 10@10.
mouth extent: 20@4.
self borderWidth: 0.
mouth borderWidth: 0.
self color: Color black.
leftEye color: Color blue.
rightEye color: Color blue.
mouth color: Color red.
self position: 50@50.
leftEye position: self position + (25@55).
rightEye position: self position + (70@55).
mouth position: self position + (40@80).
--------------------------------------------
位置関係はこんな感じ。っていうか余計わかりにくいじゃん。
アクセプト。
Alt + s ( Cmd + s )
そしてWorkSpaceでドゥーイット。
Alt + d ( Cmd + d )
バクダン君？おたまじゃくし君？ブラック・ノンスマイル・マーク？
ちなみに黄ハロで顔のサイズを変えないでね。レイアウトが崩れちゃう。（笑）
レイアウトはまた今度挑戦するです。（AlignmentMorph)
■くちパクパクアニメだす。
前のページでアニメーションのやり方がわかったのでくちをパクパクさせちゃいましょう。
クラス定義で「mouth」というインスタンス変数を１つ追加しまする。
--------------------------------------------
EllipseMorph subclass: #TestMorph8
instanceVariableNames: 'mouth'
classVariableNames: ''
poolDictionaries: ''
category: 'MyMorph'
--------------------------------------------
「mouth」をインスタンス変数にしちゃったので
「initialize」メソッドのローカル変数「mouth」は削除しちゃいましょう。
（下記ではコメントアウトしてあります）
これで「step」メソッドからも「mouth」が使えるようになるです。
--------------------------------------------
initialize
| leftEye rightEye "mouth" |
super initialize.
self addMorph: (leftEye _ EllipseMorph new).
self addMorph: (rightEye _ EllipseMorph new).
self addMorph: (mouth _ EllipseMorph new).
self extent: 100@100.
leftEye extent: 10@10.
rightEye extent: 10@10.
mouth extent: 20@4.
self borderWidth: 0.
mouth borderWidth: 0.
self color: Color black.
leftEye color: Color blue.
rightEye color: Color blue.
mouth color: Color red.
self position: 50@50.
leftEye position: self position + (25@55).
rightEye position: self position + (70@55).
mouth position: self position + (40@80).
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )
マウスカーソルが顔の上に入るとくちパクパクさせるようにするでするよ。
マウスエンターでアニメスタートってわけね。
--------------------------------------------
mouseEnter: evt
self startStepping.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )
いつまでもくちパクパクは疲れちゃうかもなので（な、わけないじゃん）
マウスカーソルが顔の上から出るとアニメをストップね。
--------------------------------------------
mouseLeave: evt
self stopStepping.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )
マウスオーバーを許可でする。
--------------------------------------------
handlesMouseOver: evt
^ true.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )
ここでアニメーションの具体的な設定ね。
ステップごとに
- くちの高さを調べて
- くちの高さが１０以下なら、くちの高さに１を加えていく
- くちの高さが１０以上なら、くちの高さを２に戻す
--------------------------------------------
step
| nowHeight |
nowHeight _ mouth height.
nowHeight < 10
ifTrue: [mouth height: nowHeight + 1].
nowHeight >= 10
ifTrue: [mouth height: 2].
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )
--------------------------------------------
stepTime
^ 40.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )
そしてWorkSpaceでドゥーイット。
Alt + d ( Cmd + d )
くちぱくぱくしてまする。目とかも動かしたりしたいよね。でもがまんがまん。
とにかく他にもいろいろやりたいことあるから、
それやってからちゃんとしたのをつくりましょう！！そうしましょう。
もし、マウスカーソルを外に出したときに口の締りが悪いと思ったら
この行を追加してちょんまげね。
--------------------------------------------
mouseLeave: evt
self stopStepping.
mouth height: 2.
--------------------------------------------
アクセプト。
Alt + s ( Cmd + s )
▲PREV ------ ● TOP ● ------ NEXT▼
■ MEMO ■
Monday, 12 January 2004, 8:38:24 pm
openInWorld
あ、そうそう。WorkSpaceでモーフのインスタンスを画面に出す場合
クラス名 new openInWorld
ってするじゃん。「openInWorld」を以下のものにして試してみてちょんまげ。--thoru
openInHand ----これマウスカーソルにくっついてでてくる
openCenterdWorld ---これは画面の中心に出てくる。
openInWindow ----これはウィンドウの中に出てくる＜でも色がへん。
openInWindowLabeled: 'ラベル名' ---これはウィンドウタイトルつき。
（詳しくはMorphクラスのinitializationカテゴリをみてね）
Monday, 12 January 2004, 8:22:49 pm
まあ、「Speech-Gestures」カテゴリの「FaceMorph」とか
「HeadMorph」クラスを参考にもうちょっとこったことをやるってもいいかもかも。--thoru
Links to this Page
- FunFunFunMorphic last edited on 25 March 2004 at 5:25:44 am by tk0005-202x210x196x109.ap-TK.usen.ad.jp
- funfunfun15 last edited on 17 June 2007 at 7:22:13 am by localhost.localdomain
- funfunfun17 last edited on 17 June 2007 at 7:33:19 am by localhost.localdomain
