MOHOチュートリアルの2章では「描画」について学びます。
チュートリアル2章 より
2章は描画に関するお勉強です。
といっても、図形の描画やカーブの作成といった基本中の基本は１章で習った前提になっているようで、２章ではMOHOならではの特徴的な描画機能を紹介している感じです。
2-1 結合（ウェルド）
チュートリアル2-1では、カーブの結合を学びます。
英語メニューでは「weld」と表記されていて、日本語版メニューやチュートリアルではそのまま「ウェルド」とカタカナ表記されているので、初見では「？」な状態でした。
翻訳ツールで「溶接」と訳されてしまいましたが、「結合」なら他のグラフィック系ソフトでも使われている機能ですね。
MOHOでは、
- 閉じたカーブを作成できる
- 複数の形状を特定のポイントで結合すると、アニメーションで一緒に動かせる
といった理由で、ポイントの結合が大事な機能になっています。
[ポイントを追加]ツールで自動結合
[描画]ツールの中にある[ポイントを追加]ツールを使うと、クリックした箇所に点（ポイント）が追加されます。
この作業を繰り返すことで複雑な形状を描画できます。チュートリアル1-3では「雲」や「木」を作成しました。
ツールオプションの中にある[自動ウェルド]をONにしておくと、ポイントの終点と終点を近づけると自動的に結合します。
自動結合できる場合は、カーブの終点を別のポイント上にドラッグしたときにポイントが「緑色」表示されます。この時にマウスを離すと自動結合されます。
[ポイントを変形]ツールで自動結合
カーブを描いた後でポイントを結合したい場合は、[ポイントを変形]ツールを使って自動結合できます。
- [描画]ツールの中から[ポイントを変形]ツールを選択。
- ツールオフーションの[自動ウェルド]にチェックを入れる。
- カーブの終点を任意のポイント上までドラッグ。
- ポイントが緑色に表示されたらマウスを離す。
手動結合
[自動ウェルド]がOFFの状態でも、次の方法で手動結合できます。
- [ポイントを変形]を選択。
- 一方の終点ポイントを、もう一方のポイントの上にドラッグ。
- Enter を押す。
閉じたカーブ同士を結合する場合…
閉じたカーブを結合するとなると、どちらにも終点がありませんね。
この場合は
[エッジを削除]ツールを使ってカーブの一部を削除して終点を作ります。
2-2 穴の開いた形状の描画
チュートリアル2-2では、オブジェクトの内側に穴を空ける方法を学びます。
使用するツール： 
チュートリアルの完成サンプルでは、シュシュみたいな物体に仕上がっていますが、、、
とにかく、
オブジェクトの一部に穴を空けたいことがあると思います。
この方法がチュートリアルで解説されていましたが、何度やっても上手くいかない…
本家フォーラムのQ&Aをみつけて、最後のひと手間が抜けていたらしいと判明。
作業の前に、MOHOで図形に穴を空ける条件が次の通り。
- 閉じたカーブを使うこと。
- 元の図形の内側に、穴の形状を描くこと。
- 内側の図形を自動的に「穴」として認識してくれる
- 四角や楕円などのシェイプ、または、閉じたカーブで、元になる図形を描画しておく。
- 元の図形の内側に、穴の形状を描画する。
- [描画]の[ポイントを選択]ツールで、元の図形と内側の図形を選択し、対象となるポイントを全て選択しておく。
- [塗りつぶし]の[シェイプを作成]ツールを選択。
- Enterを押す。
- もしくはツールオプション[シェイプを作成]をクリック。
- [塗りつぶし]ツールの[シェイプを削除]ツールを選択。
- 穴になる形状図形をクリックして削除する。
チュートリアルでは、手順❺までで穴が開くような書き方ですが、どうしても穴があきませんでした。
何かが間違ってるのかハッキリしませんが、とりあえず❻～❼をすることで、穴を空けることができました。
ただ、塗りつぶしの色が内側（穴）の図形に設定した色に塗り替わってしまいました。
ひとつの図形に対して、複数の穴を同時に空けることもできました。
2-3 エッジの非表示
チュートリアル2-3では、複雑なカーブの一部からエッジを非表示にする方法を学びます。
使用するツール： 
[エッジを非表示]ツールを使うと、カーブは閉じたまま、一部のエッジを非表示にすることができます。
エッジが「非表示」になっているだけなので、塗りつぶしの色はキープされています。
- [塗りつぶし]の[エッジを非表示]ツールを選択。
- 非表示にしたいエッジをクリックする。
2-4 ラインの幅を変える
チュートリアル2-4では、ストロークの一部で線幅を変更する方法を学びます。
使用するツール: 
[ラインの幅]ツールを使うと、上図のように、ポイントのストローク幅を変えて「入り抜き」のようなラインにすることができます。
- [塗りつぶし]の[ラインの幅]ツールを選択。
- カーソルをポイントに近づけた時に赤く表示されるので、ドラッグして幅を調整する。
この機能を使って「木の幹」を作ってみました。
閉じてないカーブを描画する場合、[ポイントの追加]でストロークを描いただけだと未完のカーブでスタイル設定ができません。
最終的に、[ポイントの選択]でカーブ全体を選択し、[シェイプを作成]ツールを選択してEnterすると、確定します。
2-5 オブジェクトの順序
MOHOのベクターレイヤーでは、後から描いたオブジェクトが上に重なって行きます。
同じレイヤー上のオブジェクトは、次の方法で順序を入れ替えられます。
使用するツール： 
- [塗りつぶし]の[シェイプを選択]ツールを選択。
- キーボードの上下矢印キーを押して、上、または下に移動する。
- Shiftを押しながら矢印キーを押すと、最背面/最前面に移動。
2-6 ブラシ
チュートリアル2-6では、ストロークに様々な種類のブラシスタイルを設定する方法を学習します。
使用するツール:
- [塗りつぶし]の[シェイプを選択]ツールを選択。
- 任意のストロークをクリックして選択。
- [スタイル]パネルの[ブラシなし]をクリック。
- 開いたブラシダイアログで、使いたいブラシを選択して[OK]。
フリーハンドで描画する前に[スクロールを結合]をOFFに！
チュートリアルの手順の途中で、[シェイプの選択]ツールを使って、複数のカーブの中から1つを選択するシーンがあります。
ツールオプションの[スクロールを結合]にチェックを入れた状態で描画していると、複数のオブジェクトに見えても１つと判断されて全てが選択されるので、注意が必要です。
2-7 レイヤーマスキング
チュートリアル2-7では、３通り「レイヤーマスキング」のサンプルを見て、レイヤーマスキングの使いどころを学びます。
実際の作成作業はありませんでした。
指定した範囲に表示しないようにする例
サンプルでは、動くスポットライトが穴の上だけは表示されないようにレイヤーマスキングしています。
指定した範囲にだけ表示するようにする例
サンプルでは、まぶたが目の中だけに表示されるようにレイヤーマスキングしています。
マスクオブジェクトを非表示にして使用する例
サンプルでは、テキストを変形表示するための見えない長方形をレイヤーマスキングしています。
2-8 スタイル
チュートリアル2-8では、スタイル機能を学びます。
MOHOのスタイルというのは、塗りつぶしや線の色、線の幅、塗りつぶし効果などを含むオブジェクトのプロパティのセットで、これを「スタイル」として登録しておけます。
定義したスタイルは他のオブジェクトにも適用できるため、繰り返し使うスタイルを登録しておくと便利です。
スタイルを使うメリットは、後でスタイルの内容を編集したときに、同じスタイルを適用した別のオブジェクトも変更されることです。
スタイルの登録方法
- [スタイル]パネルの[高度]にチェックを入れる。
- スタイルオプションのパネルが展開表示されます。
- 塗りつぶしやストロークの色など、必要なスタイルを選択する。
- [スタイル]→[新規作成]をクリック。
- [スタイルの名前]に任意の名前を入力する。
スタイルパネルの[高度]にチェックを入れると、パネルが展開します。
例えば、「My New Style」と命名してみます。
オブジェクトにスタイルを設定する
登録したスタイルは、複数のオブジェクトに設定可能です。
- [シェイプを選択]ツールで、スタイルを設定するオブジェクトを選択。
- [スタイル]パネルの[スタイル1]または[スタイル2]のポップアップメニューから、スタイル名を選択する。
前項で設定した「My New Style」を選択すると、定義したスタイルになります。
スタイルの編集
登録したスタイルの内容を変更できます。
- [スタイル]パネルの[スタイル]をクリックし、ポップアップメニューでスタイル名を選択。
- 塗りつぶしの色やラインの色や幅などを選択して定義内容を変更する。
編集と同時に、スタイルを適用しているオブジェクト全ても変更されます。
2-9 単純な3D構造
チュートリアル2-9では、単純な3Dオブジェクトの構築方法を紹介しています。
MOHOは2Dプログラムです。高度な3Dオブジェクトは専用のモデリングソフトが必要ですが、MOHOの中で2Dベクターオブジェクトを使って単純な3Dオブジェクトを作成することができるということで、その方法を紹介しています。
チュートリアル通りに進むと、下図のアニメーションが作成できました。
正直、書かれた通りの位置に、書かれた通りの値を入れただけ、なので、白紙の状態で3Dが作れるか？というと、、、
2-10 3D図形のデザイン
チュートリアル2-10では、ベクターレイヤー上の2Dオブジェクトを3Dにする方法を学びます。
こちらは、描画したオブジェクトをレイヤー単位で3Dにするものなので、2-9で作った3Dよりも簡単でした。
ベクターレイヤーの3D設定
同じベクターレイヤーに置かれたオブジェクトが同時に3Dになるのを確認しやすくするためなのか、チュートリアルでは2つのオブジェクトを作成しておくところから始まります。
- [レイヤー]パネルで、3Dにするベクターレイヤーの名前をダブルクリックして、設定ダイアログを開く。
- [レイヤー設定]ダイアログ→[3D変換]タブを選択。
- [変換]のポップアップメニューから、好みのタイプを選択する。
- [適用]をクリックすると、編集画面上のオブジェクトが変化します。
- ダイアログを開いたまま、[レイヤーをXY回転]ツールを使ってオブジェクトを回転し、変化具合を確認できます。
- [適用]をクリックしている間はダイアログが閉じません。
- お好みの形に形成出来たら[OK]をクリックします。
[3D変換]のタイプ詳細は、チュートリアルを参照。
下図は、3D変換を「除く」にしたものです。
3Dにしたものを変形させてアニメーションにしてみました。
まとめ
チュートリアル2章では、MOHO独特の描画について学ぶことができました。
イラストを描く機能だけを言えば、専用ソフトのほうが使いやすいのは言うまでもないですが、MOHOの作業には必要になって来る内容だと考えれば、基本は押さえておかなきゃですね。
でも、じっくりチュートリアルと向き合うことで、面白くなってきました。
