カテゴリー: 講座

回転デフォーマを基準面に対し左右対称に反転コピーする方法

回転デフォーマを反転処理を行うと、角度は反転しますが、位置はその場から動きません。

kaiten

例えば左腕を作り、右腕は反転コピーすることで作ろうと思っていた場合に不便です。
自ら位置を左右対称に合わせなければなりません。

しかし、基準面に対し左右対称の位置に持っていくことは簡単に出来ます。

回転デフォーマの位置を反転コピーする方法

反転コピー前の状態

[colwrap] [col2]

「( ‘ω’ )و」このような顔文字を使っていきたいと思います。
顔部分は今回の解説には使いませんので、顔の曲面デフォーマにまとめています。

今回使うのは主に腕の回転デフォーマになります。[/col2] [col2]

ScreenShot01512

[/col2] [/colwrap]

手順1:曲面デフォーマを用意する

[colwrap] [col2]

曲面デフォーマを作成します。
このデフォーマは、基準面の直下に作ると良いでしょう。

[aside type=”normal”]デフォーマ名、ベジェ分割数や変換の分割数は何でも良いです。ここでは「反転用の曲面」デフォーマ、数値はそれぞれ最低値にしています。[/aside]

[/col2] [col2]

ScreenShot01513

[/col2] [/colwrap]

手順2:腕回転デフォーマを複製する

[colwrap] [col2]今回は左腕を反転コピーして右腕を作るので、まず腕の複製を行います。

  1. 腕回転デフォーマを選択
  2. 編集>コピー(Ctrl+C)
  3. 編集>貼り付け(Ctrl+V)

腕の回転が複製されればOKです。

※解説用にデフォーマ名の末尾に「-複製」とリネームしました。

[/col2] [col2]

ScreenShot01517

[/col2] [/colwrap]

手順3:反転用の曲面の子に腕回転デフォーマを設定する

[colwrap] [col2]デフォーマの親子関係を変更します。

  1. 腕の回転デフォーマを選択します。
  2. 編集パネル>デフォーマを、基準面から反転用の曲面に変更しましょう。

[/col2] [col2]

ScreenShot01518

[/col2] [/colwrap]


[colwrap] [col2]

デフォーマウィンドウにて親子関係が設定できていればOKです。

[/col2] [col2]

ScreenShot01519

[/col2] [/colwrap]

手順4:反転する

反転用の曲面デフォーマを選択します。
画面右クリックから反転機能を選択し、反転させます。

kaiten2

これにて手順は完了です\\\\٩( ‘ω’ )و ////

最後に

前回の曲面デフォーマでパラメータの反転コピーに対してシンプルな構成になりました。

[kanren postid=”2923″]

こちらと一緒に見てもらうと、更に左右対称モデルの制作が捗ると思います。
どちらも慣れると一分とかからずできるのでぜひ活用してみてください。

また、反転用曲面デフォーマを1つ常備しておくと良いと思います。
デフォーマパネルからドラッグアンドドロップを使ってすぐに親子関係を変更、反転、元の階層に戻すということができるので慣れた方はオススメです。

しかし、回転デフォーマはその場で反転する意味って何かあるんですかね?
回転の角度は数値で直接入力できるので使いドコロがない気がする訳ですが…(; ・`ω・´)

Live2Dでデフォーマの形状を反転コピーする方法

追記:当記事の解説はCubism2.1~3.1時代のやり方です。
Cubism3.2から公式機能として実装されましたのでぜひそちらを使ってください。
(しかもワンクリックでできるめっちゃ便利仕様!)

詳細は公式マニュアルの「動きの反転」機能についてのページをどうぞ。

 


 

Live2D モデルを作る上で便利な小技の紹介です。

真正面のモデルを作る場合、左右対称に動きを付けることが多いと思われます。
目など、左右で分離されたオブジェクトやデフォーマであれば、反転コピーをすることで左右対称に作れます。
▶参考:公式マニュアル > Cubism Modeler‎ > ‎キーフォーム編集‎ > ‎06. 反転機能

[colwrap] [col2]

しかし口など、左右で分離していない部分は左右で動きをそれぞれ付けなくてはなりません。

同じことを繰り返さなければならず、さらに手付けの場合は左右で若干の違いが出てきたりして調整が大変になります。

このように考えたことはありませんか?[/col2] [col2]

ScreenShot01506-2[/col2] [/colwrap]

 

曲面デフォーマは反転コピーできます!\\\\٩( ‘ω’ )و ////


以下のサンプルモデルを使って解説していきます。(´・ω・`)
ScreenShot01485

反転コピーする手順

反転コピー前の状態

現在パラメータに3点挿入しており、画面左向きの動きのみを付けている状態です。
syobo-n1

デフォーマの状態は以下の様な構造になります。
ScreenShot01487

描画オブジェクトにはパラメータを割り当てていません。
しょぼーんの曲面の変形でのみ左向きを作っています。

このモデルの右向きの動きを反転コピーで作ります。

手順1:曲面デフォーマの複製

[colwrap] [col2]

まず反転コピーを行う曲面デフォーマを複製します。

  1. 該当曲面デフォーマを選択
  2. 編集>コピー(Ctrl+C)
  3. 編集>貼り付け(Ctrl+V)

[/col2] [col2]ScreenShot01488[/col2] [/colwrap]


[colwrap] [col2]

複製すると、曲面デフォーマと内包された描画オブジェクトが複製されます。

このままではどちらが複製元か複製先か分からなくなるためデフォーマの名称を分かりやすく変更しました。

[aside type=”normal”]リネームは必須ではありません。
慣れてくるとそのまま反転コピーを行って問題ありません。[/aside]

[/col2] [col2]ScreenShot01489[/col2] [/colwrap]


[colwrap] [col2]複製された描画オブジェクトは使用しないので削除します。

  1. 該当描画オブジェクトを選択
  2. 編集>削除(Delete)

[/col2] [col2]ScreenShot01490[/col2] [/colwrap]


[colwrap] [col2]この様な構成になっていたらOKです。[/col2] [col2]ScreenShot01491[/col2] [/colwrap]


手順2:反転処理

[colwrap] [col2]

  1. しょぼーんの曲面-複製を選択
  2. 右クリックで表示されるメニューから反転を選択
    (オブジェクト>反転でも可)

[/col2] [col2]

ScreenShot01492

[/col2] [/colwrap]


[colwrap] [col2]

反転設定画面が現れたら、

  • ☑水平方向に反転
  • 反転するパラメータ
    • ☑該当パラメータ(ここでは角度X)

にチェックが入っていることを確認してOKを押します。

[/col2] [col2]

ScreenShot01493

[/col2] [/colwrap]


現時点では以下のように動作します。syobo-n2


手順3:デフォーマ構造

しょぼーんの曲面を選択し、編集パネルのデフォーマから親デフォーマを変更します。

基準面 ▶ しょぼーんの曲面-複製
ScreenShot01496


[colwrap] [col2]親デフォーマに複製を指定すると親子関係が更新されます。[/col2] [col2]ScreenShot01495[/col2] [/colwrap]


現時点ではデフォーマが保持している情報は以下のようになっています。

ScreenShot01494

手順4:パラメータの一時リセット

一見これで大丈夫と思う方も居るかもしれません。
が、このままでは上手く左右対称に出来ません。

syobo-n3

以下の手順を仕上げに行う必要があります。


[colwrap] [col2]しょぼーんの曲面を選択します
(※複製の方ではありません)[/col2] [col2]

ScreenShot01497

[/col2] [/colwrap]


[colwrap] [col2]パラメータ編集画面を開きます。[/col2] [col2]ScreenShot01498[/col2] [/colwrap]


[colwrap] [col2]ここで「設定していない方のパラメータ」がどちらか把握している必要があります。

しょぼーんの曲面では、左側(-30)パラメータの形状を作っています。
なので、右側(30)パラメータを操作する必要があります。

右側(30)パラメータを選択し、削除します。

削除が完了したらOKを押して確定します。

[/col2] [col2]ScreenShot01501[/col2] [/colwrap]


[colwrap] [col2]パラメータ設定が消えていることを確認します。[/col2] [col2]ScreenShot01502[/col2] [/colwrap]


[colwrap] [col2]確認出来たら、再度パラメータ(30)を設定します。[/col2] [col2]ScreenShot01503[/col2] [/colwrap]


この段階で動かしてみましょう。

syobo-n4

左右対称に曲面デフォーマが動きました\\\\٩( ‘ω’ )و ////

手順5:デフォーマを統合する

[colwrap] [col2]以上で左右対称に動かすことは出来ましたが、デフォーマ構造は増えてしまいました。[/col2] [col2]ScreenShot01504[/col2] [/colwrap]


このままでは構造が煩雑になる上、フリー版等はデフォーマ数に制限があるためよくありません。
そこでデフォーマを1つにまとめると良いでしょう。

[colwrap] [col2]

  1. 親デフォーマ(しょぼーんの曲面-複製)を選択。
  2. デフォーマ>デフォーマを削除し、パラメータを子要素に反映

[/col2] [col2]ScreenShot01505[/col2] [/colwrap]

[aside type=”warning”]画面上ではCtrl+Eで行えるように見えますが、これは頻繁に使うので私がショートカットを割り当てているためです。デフォルトではショートカットは設定されていません。[/aside]

これにより、デフォーマを統合し、かつ左右対象の変形を維持できます。

syobo-n5

これにて手順は完了です\\\\٩( ‘ω’ )و ////

最後に

私はこれを1年以上前から使っているのですが、非常に便利です。

公式マニュアル > Cubism Modeler‎ > ‎キーフォーム編集‎ > ‎06. 反転機能
に載っている目等の反転複製と合わせると(正面向きのモデルでは)大半が反転コピーで作れてしまうので、実質片側のみ作れば良くなります。

むしろ公式マニュアルでこの小技を何故載せないのか…(; ・`ω・´)

ただし、この方法で完璧に左右対称に動かすことは難しいです。
これは、描画オブジェクトのポリゴン割が左右対称ではないためです。

なのでポリゴンをできるだけ左右対称になるようにすると良いです。
ポリゴンも左右対称に割り当てる機能が実装されたら本格的に制作が楽になりますね。(要望申請済み)

また、回転デフォーマでも左右対称に角度を作れますが、角度は数値で直接指定できるのでこの方法を使うメリットはあまりありません。

クリスタ側でLive2D元絵のゴミや塗り残しを見つける方法

Live2D元絵をしっかり作っていないと、何度もペイントソフトとLive2Dを行ったり来たりしなければなりません。
可能であれば最初から完璧なデータを作れれば良いのですが、中々そうはいきません。

今回はその中でも、PSDデータに紛れ込むゴミやほぼ透明な半透明部分、塗り残しをペイントソフト側で防ぐ方法の紹介です。

例題

例えば、CLIP STUDIO PAINT上で以下のような髪の毛のパーツレーヤーがあったとします。

ScreenShot01025

一見、これで大丈夫なようですが、いくつか問題を抱えています。

CLIP STUDIO PAINTでの確認方法

CLIP STUDIO PAINTを使っている場合、境界効果機能というものがあります。

[colwrap] [col2]

全体

ScreenShot01026[/col2] [col2]

詳細

ScreenShot01026-2[/col2] [/colwrap]

境界効果ボタンをクリックし有効にすると以下のように、

  • 「フチの太さ」
  • 「フチの色」

項目が出てきます。


縁の色の横の3角(▶)を押すと、色の設定項目が出てきますので、任意の色を選択します。

ScreenShot01027

元のパーツや背景色から遠い色を選ぶようにしましょう。今回は赤色を選びました。

境界効果の比較

境界効果を適応すると画面上ではこのように表示されます。

ScreenShot01028

赤色の部分が出ましたね。
先に調整済みの画像と比較してみましょう。

ScreenShot01045

フチの赤色が全く違います。

問題の無い場合は上図の様に赤い線はパーツのフチに沿って見えます。
しかしそうでない部分には、余計なデータが存在しています。
また、パーツ内に赤色が見られた場合は塗り残しがあるということです。

[colwrap] [col2]ScreenShot01030[/col2] [col2][/col2] [/colwrap]

このように一見大丈夫に見えるパーツでも、データ上ではたくさんの不備があることがわかります。
これはLive2D側に持って行った際に予期せぬポリゴンの割当が起こったり、修正が必要になり何度もペイントソフトと行ったり来たりをしてしまうことになりかねません。

[aside type=”warning”]不備のチェックを終えたら境界効果機能を切りましょう。
切り忘れたままPSD出力をすると、Live2D側でも赤い線が出たままになります。

[/aside]

修正方法

修正方法は単純です。

  • ゴミや、余計な塗があるところは消しゴムツールで消してあげましょう。
  • 塗り残しのある部分は、きちんと描いていきましょう。

以上になります。
むしろそれ以外に方法がありません。

対策ができるとすれば、描く際に塗り残しやゴミが出ないよう細心の注意を払うくらいでしょうか。

複数レイヤーにまとめて境界効果を適応する方法

さて、このようにパーツをチェックして無駄や不備がないか確認できるのですが、多くのパーツを境界効果を設定し、色を指定し、終わったら解除作業をする…のは意外と手間です。

そこで一括でまとめて境界効果の指定と解除を行える方法があります。
それがレイヤーフォルダー機能に境界効果を設定する方法です。

レイヤーフォルダーを新規に作成する主な手順は以下の二通りあります。結果は同じなので、好きな方で作成します。

フォルダー作成方法1

ScreenShot01033

レイヤーパネルの下に並んでいるアイコンの内、上図のフォルダーアイコンをクリックすることでフォルダーを新規作成します。

フォルダーを作成後、レイヤーをフォルダー内にドラッグアンドドロップすることでフォルダー内に格納できます。

[colwrap] [col2]ScreenShot01034[/col2] [col2][aside type=”normal”]新規フォルダーは空の状態で制作されます。
手動でフォルダー内にレイヤーを入れましょう。[/aside][/col2] [/colwrap]

 

既にフォルダー機能を使っている人は、一番上階層に親フォルダーを設定しましょう。

フォルダー作成方法2

フォルダー内に格納したいレイヤーを先に選択します。

[colwrap] [col2]ScreenShot01036[/col2] [col2][aside type=”normal”]選択は、

  1. 格納したいレイヤーの先頭(または末尾)レイヤーを選択。
  2. Shiftを押しながら末尾(または先頭)をクリック。

を行うとまとめて選択が可能です。

一つずつクリックで選択したい場合は、

  1. Ctrl+レイヤークリック

にて個別に選択を追加もできます。

[/aside][/col2] [/colwrap]

次にレイヤーパネルで右クリックをすると以下のようにメニューが出てくるので、「フォルダーを作成してレイヤーを挿入」を選択。

[colwrap] [col2]ScreenShot01037[/col2] [col2][aside type=”warning”]レイヤーのサムネイル上でクリックすると、以下のように別メニューが表示されます。
この中には該当項目がありませんので注意しましょう。

ScreenShot01039[/aside][/col2] [/colwrap]

これで選択されたレイヤーが全てフォルダー内に格納されます。

ScreenShot01038

さて、フォルダーに格納したら、一番親(上階層)のフォルダーに境界効果を適応してみましょう。

表示結果を以下の例を見ながら確認していきます。

ScreenShot01032

今回フォルダー内には3つの顔文字が入っています。
そこにオレンジの境界効果を適応しています。

フォルダー内に入っていない (´・ω・`) は効果が適応されていません。

境界効果を指定したフォルダーの直下にある (`・ω・´) は問題なく境界効果が現れていますね。

また、フォルダーの中にフォルダーを作っている状態でも (^ω^) に境界効果は現れていますね。

(ΦωΦ) は、フォルダーの中のフォルダーの中のフォルダーに入れていますが大丈夫です。
また (ΦωΦ) を入れいているフォルダーは「透過」設定になっています。
フォルダーのレイヤーモードに関係なく適応されているのが分かりますね。

この親フォルダーに適応した境界効果を切れば、3つの顔文字にも境界効果が切れます。

ScreenShot01040

これで一箇所に境界効果を設定するだけで全体の確認が行えます。

元絵を制作している最中に随時確認するのもよいですし、最後にまとめてチェック作業をする場合にも便利に確認できます。

他のペイントソフトの場合

Photoshop

Photoshopには同様の機能があります。レイヤースタイル内の境界線機能です。

ScreenShot01043

CLIP STUDIO PAINTと同様に、レイヤーやフォルダーに設定することが出来ます。

ScreenShot01044

SAI

残念ながらSAIには似た機能がありません。


 

かつてこの機能を使う前の私は何度もPSDインポートを繰り返していてとても面倒だったので、是非活用してみてください。

Live2D用の正面絵を作る際に役に立つクリスタの機能

Live2Dは魅力的な機能が満載です。しかし、Live2Dの最初の難所は、元絵を準備するところです。
そんなLive2D用の「正面向きの絵」を描く場合に便利な方法をご紹介!

ペイントソフトは「CLIP STUDIO PAINT」です。ProでもEXでも大丈夫なはず。

対称定規

CLIP STUDIO PAINTには対称定規という機能があります。
これは片方を描けば反対側にも反映される機能です。

ScreenShot00437-2

何はともあれ、使ったこと無い方は一度使ってみるとすぐ分かります。

Animation 27

ね、簡単でしょ?

Live2Dにて正面の絵を動かそうと思った場合、左右対称のパーツが非常に多くなりますので、この機能を使って描き、その後片方を削除、Live2Dで再度左右対称処理を行うと製作が捗ります。

描けない場合の多くは、「特殊定規にスナップ」がされていないのが原因です。
表示メニューの中に「特殊定規にスナップ」という項目があるので✔チェックが入っているか確認しましょう。
ScreenShot00446

Live2D用に描く場合のワンポイント

真ん中に定規を引く

CLIP STUDIO PAINTでは定規をキャンバスの真ん中に作る方法がありません。
(私が知らないだけだったらこっそり教えて下さいm(_ _)m)
そこで一手間かかりますが、簡単に真ん中を割り出す方法がこちらです。

  1. 何色でも良いのでキャンバス全体を塗りつぶします。
  2. 次に自由変形ツール(Ctrl+T)を押します。
  3. 元の画像の比率を維持の☑チェックが入っていたら外します
  4. 拡大率の横を50を指定し、半分の大きさにしEnterで確定します。
  5. レイヤー移動ツールを使って左(もしくは右)端に移動させます。
    (この時Shiftを押しながら移動させ、細かい調整は左右の矢印キーを使うと上手く行きます)
  6. キャンバスをできるだけ拡大します(虫眼鏡ツール or Ctrl+SPACE)
  7. 左右対称定規を選択し、境界の所をクリックします。
  8. 消去ツールを使って、一度レイヤー内を全消しします。
Animation 28

これでキャンバスの真ん中に定規を引くことが出来ます!

定規の影響範囲

左右対称定規のデフォルトの設定では設定したレイヤーにのみ作用します。
これではレイヤーをいくつも使うとき毎回同じ場所に定規を引かなくてはならないため非常に煩わしいです。

それを解決する方法が定規の表示についての機能です。

デフォルトでは以下のようになっています。
ScreenShot00439

右上にある定規アイコンをクリックします。
以下のように設定項目が出てきます。
ScreenShot00440

例えば すべてのレイヤーで表示 をクリックして☑チェックを入れてみましょう。
ScreenShot00438

若干レイヤー名の横のアイコンが変化しました。
定規は表示されている状態で効果を発揮しますので、一つのレイヤーに定規を設定し「全てのレイヤーで表示」を選択した場合他のレイヤーも定規の影響を受けます。

Animation 29

オススメの使い方その1

フォルダに定規を設定する方法です。

ScreenShot00441

定規のアイコンはドラッグアンドドロップで移動できます。
簡単なのは先の方法で真ん中に定規を設定し、その後フォルダへ移します。

Animation 30

フォルダへ設定するときは「編集対象の時のみ表示」設定する事をおすすめします。
表示対象とは、フォルダの中のことです。「同一フォルダ」とはその階層の事なので意味としては違ってきます。
これを行うことで、定規の線邪魔だな…と描いている途中で思った場合に、フォルダの外のレイヤーを選択することで定規が非表示になります。
途中で全体を確認したい場合等に地味に使えます。

オススメの使い方その2

定規用のレイヤーを作っておきます。

ScreenShot00445

レイヤー名を分かりやすく「定規」にしました。
対称定規の設定は「全てのレイヤーで表示」です。
サムネイルを分かりやすく黒で塗りつぶし、不透明度0%で完全に透明にします。
定規を含むレイヤーを間違えて動かさないようにレイヤーをロックします。

どこかしらにこのレイヤーを保持しつつ、Live2D用にいつも通り絵を描いていきます。


これで新規に何枚レイヤーを作ったとしても、全てのレイヤーで左右対称を行うことが出来ます。

左右対称定規を使いたくない場合

便利ですが全てが左右対称とは限りません。
一時的に左右対称を行いたくない場合は以下の方法があります。

オススメ2では、レイヤーを非表示にする事で左右対称されません。
これでも良いのですが、もう一つ、特殊定規にスナップを切る方法もあります。

ScreenShot00446

表示メニューの中の「特殊定規にスナップ」の✔チェックを外すか、
右下にある3つのアイコン(CLIPホームページの左横)の真ん中が「特殊定規にスナップ」アイコンで左右対称をさせなく出来ます。

ScreenShot00447

ScreenShot00448 ◀ 特殊定規にスナップアイコン

オススメ1ではこの方法で、オススメ2ではこの方法か先のレイヤー非表示によって使い分けることが可能です。

最後に

この左右対称定規、何故かPhotoshopやSAIでは無いようです。非常に便利な機能なので他のソフトでも使えるようになると良いですね(・∀・)

完全に左右対称の絵と言うのは中々描く機会がありませんが、Live2Dのような特殊な元絵を描く場合にこういった地味な機能が非常に重宝します。
これに気づく前は、毎回パーツを反転コピーして元絵を完成していましたorz
私と同じ轍を踏むことのないよう役に立てば幸いです(‘、3_ヽ)_

3-3.実際に描いてみよう|これから始める!はちゃち的デジタルイラスト講座

講座トップページに戻る ]

さて、いくら机上でツールの説明をしたところで、百聞は一見に如かず、百見は一行に如かず。
実際に描いていきましょう!
2013-04-23 15.43.40

今回描くテーマ

さて、では描いてみましょう! といざ丸投げされると何を描いて良いものかわからなくなるものです。

かわいい女の子? 渋いおっさん? あるいは動物や背景?
あるいは○や□と言った図形を描く?

最初から人や背景は難しいですし、図形はなんだか描いた気になりませんよね。
CIMG0927 ね!?

そこで今回のテーマは 顔文字 です!
自分の好きな、あるいはよく使う一行顔文字を思い浮かべて下さい。
今回はそれを描いてみましょう。

本講座では例として
(´・ω・`)
しょぼーん顔文字を描いていきたいと思います!(`・ω・´)

まずは描いてみる

まずキャンバスの作成を行い、その後Gペンを選択した状態にしておきましょう。
キャンバスの作成とは?
Gペンとは?

さて、Gペンを選択し、キャンバスに描いてみましょう。

Animation 12

続いてはまず最初に覚えておくべき便利機能を紹介していきましょう。はじめはバランスが上手く取れなくても失敗しても構いません。
線が描ける事を実感できたなら完璧です!
l21555

描き直す方法

思ったような線と違う…なんて事はよくあります。
そう言った場合に線を引き直す方法が幾つかあるので代表的な物を紹介していきましょう。

消しゴムで消す ★★

講座の前頁(3-2)で触れた消しゴムを使います。
消しゴムについて

消しゴムを選択した後、Gペンと同様に画面をなぞれば消すことが出来ます。

Animation 13

透明色で描く ★★★

こちらはGペンを使用します。
色は以下のアイコンから設定出来ると以前解説を行いました。
ScreenShot00097-6
この中で下のタイルの様な模様があります。
そこをクリックする。もしくはショートカットキーの C を押してみましょう!
(ショートカットキーの使用がオススメです)
ScreenShot00391
このように青く表示されると透明色が選択された状態です。
この状態で画面に描くと、消しゴムと同等な処理が行われます。

Animation 14

【注意】透明色≠白色

基本的に同じ処理になりますが、少し扱いが変わってくるところがあります。

透明色で消す最大のメリットは、
ブラシをそのまま消しゴムとして使える
点です。

例えば以下のように薄青色の一部を消して見たいと思います。
これは基本的な消しゴムで消した場合です。
Animation 10

では特殊なブラシと透明色で消したらどのような事が出来るでしょう
Animation 11
このように消すことも可能になります。

消しゴムもこのようにカスタマイズ出来るのでは?
と思われる方、その通りです!
しかしその場合、消しゴムとブラシと2つ同じものを作らなくてはなりません。
それは非常に面倒です!
2012-12-28 16.09.56 面倒にゃ…

透明色で消せば、1回ブラシを作れば終わるので非常に有用な方法となっています。
必須ではありませんが、是非使い分けて行きたいところですね。

ちなみに私は水彩筆ツールをよく使うのですが、水彩っぽく消したい所は透明色で、ガッツリ消したい所は消しゴムを用いるようにしています。

取り消し機能 ★★★★

さて、上記では描いたものを消す処理について解説しました。
今回紹介するのは描いた事そのものを取り消す機能です。

ScreenShot00392

このアイコンを1回押すごとに、行った動作を1つ前の上状態に戻すことが出来ます。

Animation 15

これぞデジタルの恩恵ですね!
この機能はペイントソフトに限らず様々なソフトウエアに付いている機能です。
ブラウザだって前のページに戻る機能ありますし、ワードやエクセルでも同じく取り消し機能が同じように動作します。

描き間違えた場合、描いた線が納得行かない場合、取り消し機能を使って何度でもトライアンドエラーが出来ます!
l765

取り消し機能のショートカット ★★★★

この取り消しショートカットは、おそらくお絵かきソフトの中で最もよく使うショートカットです!
非常に便利なのでぜひ覚えておきましょう!!

Ctrl + Z

このショートカットを使うコツは、まずCtrlを押し、続いてZキーを押します。
先ほどの取り消しアイコンを押した際と同じ結果になれば成功です。

また、連続で前に戻りたい場合は、Ctrlを押したまま、Zを連打すれば連打した回数分戻ります。

戻れる回数は環境設定から変更できます。

ファイル▶環境設定▶パフォーマンス▶取り消し回数
ScreenShot00393

Ver1.4.2現在、最大取り消し回数は200回です。
もっと欲しいと私は思っていますが、回数に関してはご自身の環境に合わせて設定しましょう。
取り消し回数を増やしたほうが便利ですが、メモリを使います。
要はパソコンの性能次第なのですが、わからない場合はデフォルトで構いません。

やり直し機能 ★★

取り消しの取り消し、それがやり直し機能です。

Animation 16

ただし、取り消した後で別の動作を行うとやり直し出来ませんので注意が必要です。
取り消し程使用頻度は高くありませんが、間違えてCtrl+Zを押した際などに利用しましょう。

やり直しのショートカットは、
Ctrl+Y
です。これについては余裕があれば覚えておく程度で構いません。


続いて線の描き方について触れていきましょう。

【広告】

[amazonjs asin=”4844365029″ locale=”JP” title=”CLIP STUDIO PAINT PRO 公式リファレンスブック 〈イラストや漫画が描ける定番ペイントツール!〉”]

線の引き方

ペンタブをなぞれば線が描けました!
ですが、線の描き方は1つではありません。
特に代表的なもの紹介していきましょう!

線を描く ★★★★

まず先程(´・ω・`)を描いた際に用いた描き方。
最も普通の線の描き方です。

Animation 17

これについては細かい解説は必要ありませんね。ペンタブでなぞった通りに線が引け、その筆圧で太さが変わります。
l27832

線をまっすぐ描く 

ペンタブでまっすぐな線を描きたい場合、上記のやり方では線が歪んでしまい上手く描けないでしょう。
そこで行うのが今回の方法です。

Animation 18

まず真っ直ぐな線を引く開始地点をペンタブで描きます(マウスでいうところのクリック)
その後、Shiftを押しながらペンタブを終点までペンタブを持って行き再度描きます。
すると直線を引くことが出来ます。最初と最後以外はペンタブをなぞって描く必要はありません。

また続けて直線を引く場合はShiftを押したまま同様に次の終点まで持って行って描きます。

基本的に線の太さはブラシサイズとなります。細い線を描きたい場合は予めブラシサイズを小さくしておきましょう。

線を消して描く ★★★

さて、ここからはどちらかと言えばテクニックの話です。

消して描く、とはまずおおまかな線を引き、そこから消しゴム又は透明色で描くことで線を整えていく描き方です。
u-nn
と、ピンと来ない人は以下のGIFアニメを見てみましょう。

Animation 19

このように線を整えます。
この描き方は使いドコロが浮かばない人も居るかもしれません。

例えば目を描く際どのように描くか考えてみてください。以下のように描くでしょうか?
Animation 24
これでは線が綺麗では無いのでもう一度描き直す必要がありそうですね。

でもこの目をもっと簡単に描ける方法があります。
Animation 23
Gペンの黒で描き、透明色で消しています。
l34211

このような使い方が出来るわけです。これが消して描く方法です!
クーちゃん 他にも使いドコロあるはずにゃ

線を描いて消して描き足して描く ★★

さて、この描き方は普通の描き方と消して描く方法を合わせて行う方法です。

Animation 20

まず線を描き、消しながら整形していくやり方です。

思い描いたような線を一発で描ける人と言うのは稀です。特に初心者にとっては難易度の高い作業です。
上手く描けないから何度も取り消して描き直す作業を行う人も大勢いますが、別に一発で決める必要はありません。
とりあえず描いて、無駄な所を削って、足りなかったら描き足していけば良いのです。
300-250

絵を見る側は、一発で描いた線か、消しゴムで描いた線かなんて殆どの人が気にしていません。
より良い線になるよう修正できるなら存分に行いましょう!

作例

さて、ここまで基本となる描き方を解説してきました。
現在の知識、Gペンと消しゴムだけを使用したとしても、例えば以下のような絵を描くことが出来ます。


hidari
(キャプチャーソフトが途中で落ちました(´;ω;`)ブワッ)

まだ色もない白黒の状態ですが、既に絵を描くことは出来るわけですね!
ただし、いきなりこのように描こう!と言っても中々難しいかも知れません。

もう少しペイントソフトに慣れる必要がありそうです。そこで次回は私の進めるよりよりお絵かき体勢について触れていきます。
私は右利きなのですが、絵を描く時右利きの人は右手でペンを持ちますよね? では左手は?
次回はおすすめの左手の使い方です!


講座トップページに戻る ]


【広告】

[amazonjs asin=”4779121183″ locale=”JP” title=”絵はすぐに上手くならない(仮): デッサン・トレーニングの思考法”]

[amazonjs asin=”484591557X” locale=”JP” title=”アニメーターが教える線画デザインの教科書”]

[amazonjs asin=”4844364693″ locale=”JP” title=”CLIP STUDIO PAINT PRO プロの絵師に学ぶイラスト上達テクニック”]

3-2.ペンと消しゴムツール|これから始める!はちゃち的デジタルイラスト講座

講座トップページに戻る ]

さて、ペンタブの設定も終わり、ペイントソフトは起動し、キャンバスも用意が完了しました!
では早速描いていきましょう!

ペンツール ★★★★

まずは画面左にある Gペン を使ってみましょう。
ScreenShot00322
ScreenShot00321

この状態でペンタブをなぞると線を描くことが出来ます。
GペンはCLIP STUDIO PAINTの中で基本的な描画機能の1つです。
P_20150613_124212 <基本中の基本ツールにゃ

キャンバス上にブラシが来ている事を確認して描いてみましょう。

Animation 4

 

テキトーに描き、以上のように線が描ければOKです。

線が描けない、又は、
ScreenShot00320-2
このように筆圧が効かない人は対策方法をまとめてみましたので参照してみてください。

Gペンの色が白色になっていませんか?
白地に白色を描いても白く表示されるだけなので描けていない用に見えます。
確認してみましょう。
ScreenShot00097-6
Gペンでは、色は青い四角で囲まれている方が描かれます。
上図では黒が選択されている状態です。

筆圧が効かない場合は以下の場合が考えられます。

  • ペンの設定で筆圧を使っていない。
    • 【解決法】
      ツールプロパティ▶①詳細パレット▶②ブラシサイズ▶③ブラシサイズ影響元設定▶筆圧に☑チェックが入っているか確認しましょう。
      ScreenShot00316
  • ペイントソフトの一時的な不具合で筆圧が機能していない。
    • 【解決法】
      ペイントソフトを再起動してみましょう。それでも解決しない場合、パソコンを再起動してみましょう。
  • ペンタブドライバの不具合で筆圧が機能していない。

ペンタブの設定の初期化、又は再インストールを試してみましょう。

  • 設定の初期化方法
    • スタートメニュー▶ワコムタブレット▶ワコムタブレット制定ファイルユーティリティ
      ScreenShot00318
    • ログインユーザーの設定ファイル、又は全てのユーザー設定ファイルから削除を実行します。実行すると初期化されます。
      ScreenShot00319

それ以外に上手く描けない場合は以下の手順を順次試してみましょう。
途中で解決した場合はそれ以降を試す必要はないでしょう。

  1. ペンタブのケーブルを抜き差ししてみる。
  2. パソコンを再起動する。
  3. ペンタブのドライバを最新のものに更新する、又は再インストールしてみる。▶ ワコムドライバをダウンロード
  4. ペイントソフトを再インストールしてみる。
  5. google検索で同様の不具合がないか調べる
  6. CELSYS公式サポート掲示板で問い合わせる。▶CLIP STUDIO PAINT サポート
l1501

消しゴムツール ★★★★

消しゴム同様に描いたものを消せるツールが消しゴムツールです。

ScreenShot00323
ScreenShot00321-3

Animation 5

ブラシサイズを変更する ★★★★

太い線、細い線を描くときに合わせてペンも消しゴムもサイズを自由に変更することが出来ます。
l21555

ブラシサイズ変更の基本操作

さて、まず最も基本的なブラシサイズの変更方法を解説していきます。
が!当講座ではこの次のショートカットを用いた方法を推奨していくスタイルですのでこの欄は、
l1693
くらいに考えておいてください。

ペンでも消しゴムでも同じなのですが、ブラシサイズは以下のアイコンから変更できます。
ScreenShot00325

ツールプロパティ内の、ブラシサイズ欄では現在のブラシサイズと直接編集出来るバーがあります。
ScreenShot00324
バーを直接左右に動かすとブラシサイズも変わります。左に動かせばブラシサイズが小さく、右に動かせば大きくなります。
また、ブラシサイズ右にある矢印(▲や▼)をクリックや、数値を直接書き換える事でも同様にサイズを変更する事が出来ます。
 ※⇩下矢印に関してはブラシの細かい設定項目が出てきます。ブラシサイズとは直接関係ありませんので割愛します。

また、以下のブラシサイズウィンドウをクリックすることでも設定が可能です。
ScreenShot00326

ブラシサイズ変更ショートカット ★★★

さて、ここで紹介する方法はキーボードを使ったショートカットについてです。
CLIP STUDIO PAINTの最初から登録されている標準ショートカットに便利なものがありますので紹介していきます。
2013-08-15 19.06.35 <頭で理解できなくてもやってみるべし!にゃ

ショートカットとは近道という意味です。
ペイントソフトでは様々な機能があり、それを行うメニュー欄やアイコンが無数にあります。
それをキーボードを使うことで手間を短縮する事が出来ます。

ショートカットは必ずしも必須ではありません。しかし使えると非常に便利です。
ですが非常に多く存在するショートカットを全て覚えるとなると大変です。
本講座では初心者でも覚えておくべき優先順位の高いショートカットを中心に載せていきます。

Ctrl + Alt + ドラッグ

これがブラシサイズを変更する便利なショートカットです。
まず Ctrl + Alt を押し、その後ドラッグします。ドラッグは先ほどペンで描くようにキャンバス上を描けばペンタブで行うことが出来ます。

Animation 1

 

ブラシサイズを適切に選ぶのは慣れが必要です。このショートカットではキャンバス上でブラシサイズの円を見ながら調整できるので非常に便利です。

この便利機能をぜひ活用していきましょう!

SAIでも同様に Ctrl + Alt + ドラッグにてブラシサイズを変更できます。
ただし少し挙動が違います。

CLIP STUDIO PAINTでは「現在のサイズ」からドラッグした分拡大縮小ですが、
SAIは最小から始まりドラッグした分拡大縮小します。

Animation 2(◀クリックで再生)

Photoshopでは割り当てられたショートカットが大きく違います。
ブラシツール等を選択時に右クリック + ドラッグにて変更できるようです。

Animation 3(◀クリックで再生)

ペンと消しゴムのショートカットキー

ショートカットとは実に便利なものだと、ブラシサイズ変更で実感してもらえたら大変嬉しいです。
CIMG0200

さて、ショートカットは他にも様々あります。
先ほど取り上げたペンツールと消しゴムツールのショートカットについて簡単に触れていきましょう。

ペンツールのショートカットは P です。
ペンを選択していない状態でPを軽く押してみましょう。
するとペンが選択されます。

「鉛筆ツールが現れた!? どうなっているんだ!?」

l8810

と言う方がいても大丈夫。仕様です。

ペンツールを選択した状態でもう一度Pを押してみましょう。
すると鉛筆ツールという選択に切り替わります。
これはペンと鉛筆でPキーを共有しているので押すたびに入れ替わります。
慌てる必要はありません。

では続いて消しゴムツールをショートカットから呼び出してみましょう。
ショートカットは E です。
これで簡単に消しゴムを選択できます。
Eキーは消しゴム以外に割り当てられていませんので、何度押しても消しゴムのままです。

ショートカットキーは使いやすいように自分で変えることが出来ます。
以下のショートカット設定から行えますが、慣れないうちはデフォルト設定で良いでしょう。
ScreenShot00328
「ここにショートカットキーあると使いにくいお…」
l1501
と思うようになってから設定を考えても遅くはないです。

一時的に消しゴムを使う方法 ★★★

さて、デジタルイラストを描くに当たり、ペンと消しゴム、そしてブラシサイズを変更する所まで解説しました。
ブラシサイズは簡単に変更出来るようになりました。

IMGP2317 しかし!

ペンと消しゴムを何度も選択し直すという作業は非常に大変です。
一度や二度なら良いのですが、実際に描いていくと非常に膨大な回数を描いては消してを繰り返します。
その都度絵を描くのを一旦止め、切り替える行動を行っていては集中力に自信のある人でも続きません。

そんなこと言われてもどうすりゃいいのさ…

そこで便利な機能、ツールの一時切り替え機能(別名ツールシフト機能)というのがあります。

l21555

使い方は簡単です。
一時的に切り替えたいツール(ここでは消しゴム)ショートカットを長押しするだけです。

消しゴムのショートカットキーは E です。通常、このEを押せば消しゴムに切り替わります。
しかしEキーを押しっぱなしにすると、押している間だけ消しゴムを使えます。

ペンと消しゴムを切り替える動作が、
「Pを押して、Eを押して、Pをもう一度押して」
から
「Eを長押して離す」
だけで済みます。
クーちゃん ドヤァ

これは非常に楽になりますので積極的に使っていきたい機能ですね。

何秒以上キーボードを長押ししたら一時使用になるかの設定は環境設定から変えることが出来ます。
ScreenShot00332
私の環境では200ミリ秒(0.2秒)です。
一時使用とツールの切り替えが誤爆する場合は、この秒数設定を自分にあった数値に変えてみましょう。


それでは次回は実際に絵を描いていきます。
CIMG0696 !!


講座トップページに戻る ]


[広告]

[amazonjs asin=”4844365029″ locale=”JP” title=”CLIP STUDIO PAINT PRO 公式リファレンスブック 〈イラストや漫画が描ける定番ペイントツール!〉”]

[amazonjs asin=”4844364693″ locale=”JP” title=”CLIP STUDIO PAINT PRO プロの絵師に学ぶイラスト上達テクニック”]

[amazonjs asin=”4768306306″ locale=”JP” title=”東方色技帖 CLIP STUDIO PAINTで描く東方イラストテクニック”]

3-1.キャンバス作成|これから始める!はちゃち的デジタルイラスト講座

講座トップページに戻る ]

キャンバスの作成

まずはキャンバスの作成が必要です。

「キャンバスとはなんぞや?」
l8510CIMG0948?

と思う人はアナログで絵を描くときのことを思い出して下さい。
少なくとも紙とペンは必要ですよね。

キャンバスの作成は、「絵を描く紙を用意する」機能です。

キャンバス作成の画面を開く ★★★★

ともかく絵を描く場所がなければ始まりません。

以下の3つの方法で作成画面を開くことが出来ます。
どれも結果は同じですので、分かりやすい方法や慣れている方法を自由に行って下さい。

ScreenShot00245-2
(ΦωΦ).。◯(明日から本気出す...) 一番シンプルで分かりやすいにゃ
ScreenShot00246 ScreenShot00246-2
IMGP2285 他のボタンを間違って押さないように注意にゃ
Ctrl + N
2013-04-28 17.55.21 パソコンにある程度慣れている人向けにゃ

キャンバス作成画面 ★★★★

以下の様な画面が開いたと思います。

このまま[OK]を押してもキャンバスは作成されます。
しかしせっかくなので幾つか設定項目を確認していきましょう。

ScreenShot00247

作品の用途 ★★★

まずはじめに、作品の用途で「イラスト」が選択されている事を確認しましょう。
「イラスト」アイコンは以下の黄色いやつです。
ScreenShot00225-2
選択されていない場合はクリックで選択します。

それぞれアイコンの意味は以下の通りですが…
ScreenShot00248
現時点ではイラストを選択していれば問題ありません。

l21555

さて、まず気にするべき設定項目について触れていきましょう。

今回は「単位」「幅・高さ」「基本表現色」を確認していきます。

ScreenShot00247-2

単位 ★★★

まず右中央にある単位という項目を確認しましょう。

ScreenShot00249

はじめの内は「px」単位で行うことをおすすめします。
「mm」や「cm」の方が馴染み深いでしょうが、こちらは主に印刷前提のイラストを描く際に使っていきます。
pxはピクセルの略となっています。

800pxと800mmでは全く違う大きさになります。単位がきちんと設定されているか要注意です。
※800mm = 2268px  (解像度72の場合)

モニターやテレビは見えないほど小さな点々で構成されています。
点1つ1つがそれぞれの色を発することでイラストや動画を写しています。

現在主流なのが1920×1080ピクセルのモニターやテレビです。
俗にいう「フルハイビジョン」というやつですね。
これは1920×1080個の点々(ピクセル)があるということです。

モニターやテレビのサイズはまちまちでも、同じフルハイビジョンであれば点々(ピクセル)の数は同じです。

絵描く側も絵を見る側もモニターを介しての場合、ピクセルを基準に絵を描いたほうが何かと便利です。

また、自分の使っている画面のピクセル数がわからないという方は以下の方法で確認出来ます。
コントロールパネル▶デスクトップのカスタマイズ▶ディスプレイ▶画面の解像度▶解像度
ScreenShot00243

私の環境では1920×1200ピクセルのモニターを主に使用しています。
IMGP0704

キャンバス幅・高さ ★★★★

左中央にある「幅」「高さ」項目を見て行きましょう。

ScreenShot00249

現在「800」「600」という数値が入っています。もしもこの数値が違っていても問題はありません。

800+単位という処理になりますので、今回の上記の場合「800px」ということになります。
単位の設定を誤って800cmとなった場合、22677pxの巨大キャンバスが作成されてしまいます。注意しましょう。

今回の講座ではひとまず幅800、高さ600で行っていきます。
数値を変える場合は直接キーボードで書き換えても良いですし、 ▶アイコンをクリックすると以下のようにバーが出るのでこれをスライドさせて変更しても構いません。
ScreenShot00250

幅と高さの入れ替え

現在横長になっていますが「縦長の絵を描きたい!」という場合は数値を逆に書き直せばいいのですが、妙に手間だったりします。
そこで便利なのが以下の矢印ボタン。
ScreenShot00251
これで幅と高さを入れ替えることが出来ます。

プリセット

ScreenShot00252
よく使われる形式がプリセット内に入っています。
どのくらいのサイズで作ればいいか迷った時はこの中から選んでみてもいいでしょう。

基本表現色 ★★

とりあえず「カラー」になっていれば問題無いでしょう。

ScreenShot00253

色を付けたいのにモノクロになってしまう…
nandato
という場合はこの項目がカラーになっていないかもしれません。
※後から変更出来ます。

キャンバス作成を確定する ★★★★

今回は標準的なサイズの中で小さめの800×600ピクセルでキャンバスを作成します。
項目を確認後、右上のOKを押しましょう。
ScreenShot00254

以下のように作成されればキャンバスの作成は完了です。

ScreenShot00255

それでは次回は早速ペンツールを使って描いていきましょう!


20140521_212959_Android <次回もよろしくにゃ


講座トップページに戻る ]


[広告]

[amazonjs asin=”4844365029″ locale=”JP” title=”CLIP STUDIO PAINT PRO 公式リファレンスブック 〈イラストや漫画が描ける定番ペイントツール!〉”]

[amazonjs asin=”4800710863″ locale=”JP” title=”プロが教える! CLIP STUDIO PAINT 最強デジコミ制作講座”]

[amazonjs asin=”B00856V104″ locale=”JP” title=”CLIP STUDIO PAINT PRO”]

2-2.画面レイアウト|これから始める!はちゃち的デジタルイラスト講座

講座トップページに戻る ]


さて、いよいよペイントソフトを起動して行きましょう!

CIMG0948 <ktkr!!

初期レイアウト

さて、ここで一度CLIP STUDIO PAINTの公式サイトの説明を見てみましょう。

ScreenShot00092

l1501 お、おう…

もちろんCLIP STUDIO PAINT では自分の好きな画面構成に変えることが出来ます。
しかし初めてのソフトウェアで何がどんな機能でどのくらい重要か、なんて分からないものです。
(お絵かきソフトに限った事ではないですけれどね)

CLIP STUDIO PAINT はただでさえ便利な機能がたくさんあります。
が、たくさんある故にどこから手を付けていいか分かりにくいものです。
それを全て把握する必要は今のところありません。


まずはどのレイアウトがどのくらいの重要があるかをざっくり見ていきましょう。

ScreenShot00096

上図が、はちゃちの環境下で起動した際の初期レイアウトです。
一部左上のペンの種類が増えてたりしますが、今は関係ないので気にしないで下さい。

それでは重要度を、 と別けてみました。赤の方が高優先度です。

ScreenShot00096-2

色の付いていない部分に関しては、最初は気にする必要はありません。

コマンドバー ★★★★

ScreenShot00098

CLIP STUDIO PAINTの基本的な機能から便利機能を収納したメニューバーです。
慣れてくるとほとんど使わなくなったりもしますが、序盤では非常に頼りになる存在です。

ScreenShot00098-2

特に左側のこの5つはデジタルイラストを描くにあたっての基礎中の基礎として必要になります。
左から、

ScreenShot00098-3
新規作成
ScreenShot00098-4
ファイルを開く
ScreenShot00098-5
保存
ScreenShot00098-6
1つ前に戻る
ScreenShot00098-7
1つ先へ戻す

となっており、ある程度PCを触った事のある人であればなんとなくわかるのではないでしょうか。
PCに詳しくない人もだいたい読んで字のごとくなので気負う必要はありません。

ツール ★★★★

さて、ペイントソフトにおいて重要であり、初心者が全体を把握するのが難しいのが、以下のツールパレットです。
ScreenShot00097

左に立て長くあるアイコンたちは、これひとつひとつがそれぞれ別ツールとなっています。
さらにツールの中にいくつものサブツールが入っており、さらにそれぞれにプロパティがあるという…慣れないうちは面倒に見える構造をしています。

l8510

しかしこんな顔になっている人でも大丈夫。
今回覚えるべきはとりあえず3カ所です。

ScreenShot00097-2 ▶ ScreenShot00097-3

はい、これでシンプルになりました。
l1498

軽く説明すると以下の様な機能となっています。

ScreenShot00097-4 ペン ScreenShot00097-5 消しゴム ScreenShot00097-6 ペンの色

まずはこの3つを抑えておけば絵は描けます。
他にも様々な機能がありますが追々でいいでしょう。

また、うす青く表示されているのは、現在選択中という意味です。

ScreenShot00097-4 ◀ 選択中
ScreenShot00097-5 ◀ 選択していない

ScreenShot00097-6 ◀ 黒色を選択中。白色は選択していない。

このような状態であることも合わせて覚えておきましょう。

サブツール ★★

ScreenShot00099

ある程度自分でペンの設定を作り始めれば重要になってきますが、今はさほど重要ではありません。

幾つものペンの設定が標準で入っていたり、他のユーザーの設定したペンをダウンロード追加出来たり、自作したペンを登録したり出来ます。
そのことだけ覚えておけば良いでしょう。

また、ツールと同様にうす青く光っているところが選択中となります。

 ◀ 選択中
 ◀ 選択していない

ツールプロパティ ★★★

サブツールの下にあるのがツールプロパティです。
ScreenShot00101

この項目は、選択しているツールにより中身が変わってきます。
選択によって必ずしも上図と同様に表示されないので注意して下さい。

さて、この項目も色々と奥が深く、深入りすると泥沼にハマりかねません。
今回は以下のブラシサイズに注目しましょう。

ScreenShot00100-2

ペンのブラシサイズを変える項目です。
今はここを抑えておけば大丈夫です。

【Topix】ツール・サブツール・ツールプロパティの説明がしっくり来なかった人に例えを交えてより簡単に言うなれば、住所の・ようなものです。

  • ツール ▶ サブツール ▶ ツールプロパティ
  • 都道府県 ▶ 市町村 ▶ 番地

とイメージしてみてください。
都道府県(ツール)の中に幾つもの市町村(サブツール)があり、それぞれ番地(ツールプロパティ)がある。
この3つの機能はこのような上下関係で密接に関わっています。

他のツールと違い、この3つはひとまとまりとして意識すると覚えやすいかもしれません。

【Topix】気付いている方も多いでしょうが、ツールプロパティの下に、ブラシサイズという項目があります。
ScreenShot00102
重要度が低く色付けすらしていないのには理由があります。
しかしそれをここで解説し始めては長くなりますし、また後の機会に触れたいと思います。
今は「ツールプロパティからもブラシサイズが変えられる」ということを頭の片隅に置いておけば問題ありません。

カラーパレット ★★★

ScreenShot00103
カラーパレットとはまさに色を選ぶ項目です。
虹色の円に、四角い中身がありますが、今は色を選べるくらいの状態で構いません。

また、左下にツールと同じ様なアイコンがあります。
ScreenShot00103-2

こちらはツールにある機能と全く同じです。
何故同じものが2つあるかは定かではありませんが、使いやすい方を使えば良いでしょう。

レイヤー ★★

ScreenShot00106

上図の項目である「レイヤー」はデジタルイラストにおいて非常に重要な機能です。
デジタルの最大の恩恵の1つであることは間違いありません。

が、デジタルで絵を描くことに慣れていない段階で、かつ、よくレイヤーを理解せずに使っても混乱の元です。
本講座では実際に色塗り解説をする際まで封印しておきますので、今はそういう機能もあるのか程度でも構いません。

ナビゲーター 

ScreenShot00107
お絵描き中に画面の拡大縮小、反転や回転を行い、かつ現在の状態を見ることが出来る項目です。

非常に有用ではありますが、操作に慣れてくるとほとんど使わなくなります。
ほとんど使わずに操作する方法があり、むしろそちらの方法を覚えるほうが優先順位としては高いです。

ナビゲーターの簡単な見方として、以下のように赤枠で囲われている箇所が現在画面上で表示されている箇所になります。
ScreenShot00107-3
表示を拡大すればこの枠が小さくなりますし、縮小し全体を見ている状態ですと赤枠がはみ出して見えないこともあります。


 

倍率の確認、および拡大縮小はこちらからでも出来ます。
ScreenShot00107-4
100.0%で表記されているスライダーを動かす、または横の-と+の虫眼鏡で行うことも出来ます。
拡大縮小機能も別の方法を取ったほうが便利ですので、次回にでも解説を行っていきます。

また、下にある幾つものアイコンの中でも以下のアイコンを覚えておくと便利です。

ScreenShot00107-2 回転をリセット

「誤って操作して画面が微妙に回転してしまったお!」
l29637
など、初心者が起こすと慌てるような際に使えます。


 

また、絵を描く上で左右を反転して確認する行為は非常に重要になってきます。
それを行うのは以下のアイコンで出来ますので合わせて覚えておくと良いでしょう。

レイアウトの初期化 ★★

画面を扱っていると、操作を誤ったり気付かないうちに意図せずレイアウトが変わってしまうことがあります。
↓極端な参考例
ScreenShot00110
l9754

でも大丈夫!
以下の手順で操作すると初期状態に戻せます。
ウインドウ ▶ ワークスペース ▶ 基本レイアウトに戻す
ScreenShot00111

はい、元通りです。
ScreenShot00112

逆に言えば、レイアウトの配置を試しに変え、納得出来ない場合は簡単に戻すことが出来ます。
恐れず色々とやってみましょう。

はちゃち的レイアウト 

最後に、参考までに私の好んで使っているレイアウトをご紹介しましょう。
ScreenShot00113
l34211

黒く、必要な物を左にまとめたレイアウトになっています。
この辺りは完全に好みや慣れの問題ですが、参考になる箇所があればどんどんパクっていって下さい。

また、全体を黒くする方法ですが、
ファイル ▶ 環境設定 ▶ インターフェース ▶ カラー
から簡単に変更できます。

ScreenShot00117  ScreenShot00118

講座トップページに戻る ]


 

[広告]

[amazonjs asin=”B00856V104″ locale=”JP” title=”CLIP STUDIO PAINT PRO”]

[amazonjs asin=”B0095CZ73O” locale=”JP” title=”CLIP STUDIO PAINT PRO ASCII ガイドブックモデル”]

[amazonjs asin=”B00ATUHB8K” locale=”JP” title=”セルシス CLIP STUDIO PAINT EX”]

[amazonjs asin=”4048865285″ locale=”JP” title=”あなたもイラスト&マンガが描ける CLIP STUDIO PAINT PRO公式ガイド”]

[amazonjs asin=”4844365029″ locale=”JP” title=”CLIP STUDIO PAINT PRO 公式リファレンスブック 〈イラストや漫画が描ける定番ペイントツール!〉”]

 

2-1.ペンタブの設定|これから始める!はちゃち的デジタルイラスト講座

講座トップページに戻る ]


 

まず皆さんの目の前にはPCペンタブCLIP STUDIO PAINT(あるいはその体験版)があると思います。
1.講座について」でも触れましたが、当講座ではそんな感じの構成で行っていきますのでどうぞよろしくお願いします。
2013-01-07 12.16.21 <準備OKにゃ?

ペンタブレットのプロパティ

さて、では道具が揃っているという前提で講座の方を進めていきます。
まずペイントソフトを起動…する前に!

ワコムのペンタブの設定を見ていきます。

「ペンタブの設定とか何が何やら分からないお…」
l8510

という方も、まず確認しておくべき必須項目が一箇所ありますので確認していきましょう。

プロパティの開き方 ★★★★

いくつも手段はあるのですが、今回は以下の2つのやり方を載せておきます。

すべてのプログラムの中に「ワコムタブレット」があります。
ScreenShot00066

中にプロパティがありますのでクリックし開きます。
ScreenShot00067

コントロールパネルを開くと右上に「コントロールパネルの検索」があります。
ScreenShot00061

「ワコム」と検索します。
ScreenShot00062

プロパティが出てきますのでこれをクリックし開きます。
ScreenShot00063

表示エリア設定 ★★★★

さて、慣れない間は何が何の項目やらわからないかもしれません。
しかし今回確認すべき点は1箇所のみです。
拒絶反応を起こさず見て行きましょう。
l25485

【注意】
当講座の画像上では複数のタブレットやペンが登録されていたり、設定がデフォルトと異なる箇所もあります。
今回の解説とはとりあえず関係無いので、違う箇所は「フ━━━( ´_ゝ`)━━━ン」くらいに流しておいて下さい。

Intuosシリーズのプロパティ画面は以下のようになっています。(当環境ではintuos pen&touch)
ScreenShot00069

タブの中から[マッピング]をクリックします。
ScreenShot00072

以下の様な表示になりますので、今回の肝である「表示エリア」項目が出てきます。
ScreenShot00073

Proシリーズのプロパティは以下のようになっています(当環境ではIntuos4 )
ScreenShot00068

入力デバイスの中から使用するペンを選択します。
(追加購入指定なければ一種類だけの表示だと思います)
ScreenShot00068-2

[マッピング]をクリックします。
ScreenShot00070

以下の様な表示になりますので、今回の肝である「表示エリア」項目が出てきます。
ScreenShot00071

この先はIntuosもIntuosProも内容は同じですのでIntuosの画面にて解説していきます。

最も大事な設定は、
[縦横比を保持]項目に☑チェックが入っているかどうか
です。

チェックが入っていない場合は、とりあえず入れておきましょう。
ScreenShot00074  ScreenShot00076

参考図が以下のように、
画面の縦横比とペンタブ使用エリアの縦横比が同じになります。
ScreenShot00075

この設定は非常に重要で、
縦横比が違えばペンタブで描く線と画面に描かれる線は違ってきます。

「正方形を描いているのに長方形にしかならないお…」
l1501

と言った自体が発生します。

私はモニターを3つ使用していますので特に変化が分かりやすいですね。
しかしモニターが1つの場合、微妙に縦横比が違っている事に気づかない方が結構居ます。
そして思ったように線画描けず挫折への一助になりかねません。
むしろ縦横比が狂った状態で慣れてしまうのも後々の為によくありません。

2013-08-02 19.02.47 <気をつけるにゃ


例題) 以下の解像度1920×1080、フルハイビジョンモニターにおいて縦横比を保持している状態と、保持していない状態の画像である。どちらが縦横比を保持している状態か右か左で述べよ。

ScreenShot00078-2 ScreenShot00077-2
l13432

答えはです。(←白文字で書いています)

例題のような16:9比率のモニターは現在もっとも普及している比率の1つです。

「ちゃんとモニターとペンタブ描画領域の比率を確認して買ったお!」
l765

という方以外は、チェックが入っているかはじめに確認しましょう。

以上で必須項目である「表示エリア」設定の説明は終わりです。
お疲れ様でした。

2014-04-10 01.18.08 <スヤァ

文字認識モード

ここから先は「はちゃち的オススメ」設定であり、おまけのようなものですね。
[★の意味合いについては 講座について を御覧ください]

今回オススメするのは「文字認識モード」について、です。
この機能はIntuosProシリーズCintiqシリーズ(持ってないからおそらく)の機能です。
Intuosシリーズには無い機能ですので、通常のIntuosやBambooをお使いの方は飛ばしてもらって大丈夫です。


 

IntuosProシリーズには2つのモードが存在しています。

「標準モード」「文字認識モード」です。
これらの違いをざっくり言ってしまうと、筆圧が1024段階2048段階かです。
ピンと来ないという人がいたら、とりあえず性能半分モード全開モードと認識しておきましょう。

そしてこの2つの機能、デフォルトでは標準モードが使われています。

iconaa_0x0_7d1261356fd21e989b8a9b0d57278e7c うわっ…私の筆圧、低すぎ…?

と感じた人の為に設定方法を載せておきます。
※ちなみにIntuosシリーズは筆圧1024段階固定です。


まずプロパティのタブレットから使用するProシリーズをダブルクリックします。
ScreenShot00079

すると以下の様な画面が出ます。
ScreenShot00080

タブレットモード欄を開くと文字認識モードがあります。
ScreenShot00081

選択し[OK]を押しましょう。
ScreenShot00082

これにて設定は終了です!
l21555

これだけでペンタブの性能を最大限まで発揮させることが出来ます。
ね、簡単でしょ?(゚∀゚)
まぁ性能を活かせるかはまた別の話ですが…
l431

余談ですが、性能が二倍ということはPCの負荷も増える事になりますので、PCの性能が不安な人はあえて標準モードを使用するという選択肢もありだと思います。
2013-05-09 15.08.24


講座トップページに戻る ]


 

[広告]

初めてのペンタブは以下のIntuosがオススメです。
値段が安くコンパクトで性能は十分!
[amazonjs asin=”B00RZ6JEAO” locale=”JP” title=”ワコム Intuos Pen ペン入力専用モデル Sサイズ 【新型番】2015年1月モデル CTL-480/S1″]

性能や品質にこだわる方は以下のIntuosProがオススメです。
参考までに、Proシリーズの前機種であるIntuos4を使用していますが、私の環境では4年以上故障なく使い続けています。
[amazonjs asin=”B00L3D8XSO” locale=”JP” title=”ワコム Intuos Pro プロフェッショナルペンタブレット Mサイズ PTH-651/K1″]

Pro用のペン先が膨らんでいるのが嫌だという(私のような)方には細いクラシックペンという製品もあります。個人差や好みの問題ですが、はちゃち的にはオススメのペンです!
[amazonjs asin=”B009EOLF8Y” locale=”JP” title=”Wacom Intuos Cintiqオプションペン クラシックペン KP-300E-01X”]


講座トップページに戻る ]

1.講座について|これから始める!はちゃち的デジタルイラスト講座

講座トップページに戻る ]

この講座について

はじめに

今回から講座でも作ってみようかと見切り発車していくコーナー
「これから始める!はちゃち的デジタルイラスト講座」を見て頂きありがとうございます!
はちゃち と申します。どうぞよろしく。( *・ω・)*_ _))ペコ

IMGP0757

pixivでの講座やメイキング、お絵描き配信でのお絵描き講座が中々好評でしたので、ブログにてまとめてみようと思ったのが発端です。
何かとサボりぐせがあるはちゃちですがまったりお付き合いいただけると嬉しいです。

しんかい鎮守府3_028

講座のターゲット

このような講座を見ている方はおそらく初心者か入門者、もしくは講座を見るのが好きな方ではないかと思いますので、本講座ではとにかく初歩的な所に重点を置いて作っていく予定です。
メイキングが見たい方はpixivの方に稀にあげていますのでそちらの方を見てみて下さい。


早速ですが、お絵描きに限らず
初心者挫折する三連コンボ
をご存知でしょうか?

「どこから手を付けて良いか分からない」
「何が分からないか分からない」
「何が分からないか分からないと、どうググればいいか分からない」

これが悪夢の三連コンボです。(はちゃち調べ)

そんなこと言われてもどうすりゃいいのさ…

市販の入門書や多くのWeb講座は最初の一歩が簡単に書かれすぎて居るような気がします。
「ま、これくらい分かるよね」と書かれているところがむしろ「いやそこが詳しく知りたいんだけど!?」と思う事が私もデジタル絵を描き始めた当初思ってました。
そのくせ後のほうでは省いた基礎を習得したことを前提に解説したりしてて頭の中では「???」状態。

もしくは情報が多すぎる場合もあります。
「さらなる高みを」や「中級者上級者を目指す」コンセプトならわかりますが、「入門書に情報詰め込んでたから後は読者が取捨選択してね^^」とのスタンスは挫折に大きく貢献していると思います。
無論知識として知っていることは悪いことではありません。

しかし入門者や初心者にとって重要なのは、

  • その情報の重要度は如何程のものなのか?
  • 必須なのか推奨なのか効率化なのか?
  • 結局どのような時に使えばいいのか?

何が必要で何が今は不必要なのかの判断は、ある程度知識や経験をつけてきてからの話しであり、最初から情報の取捨選択が的確に出来る人はむしろ既に初心者ではありません。
そこで当講座では必要最低限の情報に絞り、遠回りしてでもわかりやすさを重視することを目指します。

しかし時には必須でないことでも最初から覚えたほうが良い物もありますし、一緒くたに必要不必要を二分することは難しいのが現状です。
そこで、当講座では以下のように重要度を見出しに付けます

★★★★ 必須

★★★ 重要な項目

★★ 推奨・効率的な方法

★ はちゃち的オススメ

もちろん目標によって重要度は人それぞれ変わってきます。
なのであくまで目安として判断材料の一助に活用してみてください。

製作環境および注意事項

現在の私のお絵かき環境を元に講座を作っていきます。
ですので以下のような構成になっています。

  • Windows PC
  • WACOM 製ペンタブレット
  • CLIP STUDIO PAINT

Windows 7 を使用していますが、講座執筆中に変わることもあるかもしれません。Windows
(執筆現在Windows10の情報がちらほら…)
OSの基本操作はお絵描きに関係すること以外は省きます。

Macintoshは扱ったことが無いためわかりません。
ですがMACも多少キーボード操作が違うだけで基幹機能は同様でしょう。多分。


ペンタブはWACOM製を使用しています。wacom
これからデジタルイラストを描こうと思っている方もWACOM製をおすすめします。
現在WACOM製のペンタブがデジタルイラスト製作のデフォルトスタンダードになっていますし、私自身が愛用しているというのも大きいですね。


ペイントソフトについて。
講座内ではCLIP STUDIO PAINTを用いて解説を行っていきます。
私がメインツールとして使っているというのもあり、非常にお手頃な価格であり、バージョンアップや公式掲示板が活発であることなどから入門者・初心者が使うには最も最適だと個人的に思っているためです。
私自身はEX版を(同人誌作成のため)持っていますが、講座の内容的にはPro版で問題ないでしょう。
こちらはProがダウンロード版で5000円程となっていますし、月々500円の分割もあるようですのでお財布にもやさしいですしね。
また、まだPro版持っていない方は、まずは体験版を使ってみるというのがいいと思います。
l21555CLIP STUDIO PAINT PRO LOGO

そして「これからCLIP STUDIO PAINT買うぜ!」ペンタブを買うぜ!」という方が居ましたら、
以下のアフィリエイト(広告)リンクからアマゾンで買ってもらえると、
私の万年赤字・自転車操業している同人活動の印刷代にもれなく化けます!
クーちゃん
 <チラッチラッ


ペイントソフト

[amazonjs asin=”B00856V104″ locale=”JP” title=”CLIP STUDIO PAINT PRO”]

[amazonjs asin=”B00ATUHB8K” locale=”JP” title=”セルシス CLIP STUDIO PAINT EX”]


ペンタブ

[amazonjs asin=”B00RZ6JEAO” locale=”JP” title=”ワコム Intuos Pen ペン入力専用モデル Sサイズ 【新型番】2015年1月モデル CTL-480/S1″]

[amazonjs asin=”B00L3D8XSO” locale=”JP” title=”ワコム Intuos Pro プロフェッショナルペンタブレット Mサイズ PTH-651/K1″]


ペンタブ+ペイントソフト

[amazonjs asin=”B00RZ6JEAE” locale=”JP” title=”ワコム Intuos Comic マンガ・イラスト制作用モデル Sサイズ 【新型番】2015年1月モデル CTH-480/S3″]

[amazonjs asin=”B00RZ6JF6W” locale=”JP” title=”ワコム Intuos Comic マンガ・イラスト制作用モデル Mサイズ 【新型番】2015年1月モデル CTH-680/S3″]


と、このようにステマする気のない私は堂々と広告リンクを張ったりしますが、
騙したり意図せずクリックさせようとするような事はしませんので、
カンパ代わりにでも活用していただけると嬉しいです。
CIMG0200 <お願いしますにゃ

以上、当講座における注意事項でした。
CIMG0960 <よろしくにゃ


講座トップページに戻る ]

Adobe MuseでLive2Dを表示しつついい感じのホームページが作りたい[2]

[前編はこちら]

しんかい鎮守府3_028

備忘録的な手順(後編)

前回までにSimpe.htmlの中身をMuse上で再現出来ました。
そこで今回はSimpe.jsを確認しましょう。

Simple.js の中身を確認

全283行…

sappariwakaran

そんな訳で今は下手に変更しない方が良いだろうとの結論ありきの議論の結果、とりあえず置いておくことに。

Muse上にJavaScriptファイルを読み込ませる

SimpleサンプルのSimple.htmlを確認すると、以下のように二種類のスクリプトが使われている。

        <!-- Live2D Library -->
        <script src="../../lib/live2d.min.js"></script>
        
        <!-- User's Script -->
        <script src="src/Simple.js"></script>

そこで、ひとまずはMuse上で[Simple.js]と[live2d.min.js]を読めるようにする方法を考える。
が、MuseはWebプログラム分からなくてもサイトが作れるのが売りのソフト。
逆に言えばプログラムに関する機能が無い!

CIMG0696<マジカ

なんとか方法はないものか…とググるもののMuseの情報はあまりに多くなく見つけることができなかった。
仕方なくMuse内の機能を色々試していた所、[アップロードするファイルを追加]という機能を発見!
ScreenShot00039

これを使えばLive2D用のJavaScriptファイルをMuse側で認識できるようになるのではないか。
ということで早速ファイルを追加してみました。

ScreenShot00040

追加するとアセット内にJavaScriptファイルが追加されます。
この[アップロードするファイルを追加]機能はサーバー上にアップロードする際はどのようになっているのかを確認します。
Muse右上▶パブリッシュ▶HTML形式で書き出し を行います。
ScreenShot00046

ScreenShot00045

書き出しが完了したら、ドキュメントのMuseExportフォルダにWebサイト一式のデータが出力されました。

ScreenShot00044

中を確認するとLive2D用のJavaScriptファイルはscriptsフォルダの中に…ありません!!

nandato

[アップロードするファイルを追加]したファイルはファイルの種類に関係なくassetsフォルダに格納されるようです。

ScreenShot00043

ともかくアップロード一式に入っているのでMuse側からも認識出来る状態っぽいです。


 

l8510
l1498

 /assets/Simple.js
という階層になるということは、前回にMuseに埋め込んだタグも修正が必要ということになりますね。

<!-- Live2D Library -->
<script src="../../lib/live2d.min.js"></script>

<!-- User's Script -->
<script src="src/Simple.js"></script>

上記を以下のように修正します。

<!-- Live2D Library -->
<script src="assets/live2d.min.js"></script>

<!-- User's Script -->
<script src="assets/Simple.js"></script>

ScreenShot00047
これでMuse内のHTML挿入機能からJavaScriptが読み込めるようです。

Live2Dファイルの読み込み

Live2Dファイルである .moc と テクスチャ.png をMuseに読み込ませます。
方法は先ほどのJavaScriptファイルと一緒で、[アップロードするファイルを追加]から行います。

ScreenShot00048-2

ここで一つ問題が…
Live2Dモデルをmocファイルに出力するとテクスチャはフォルダの中にまとめられています。
しかしMuseアセットではどうもフォルダを作ることが出来ない(もしくは私が知らない)為に、assetsフォルダの中にそのまま配置されます。

ScreenShot00049

ファイルパスの修正

Simple.jsファイル 46行目
にLive2Dモデル設定項目があります。

    /*
    * Live2D モデル設定。
    */
    this.modelDef = {
        
        "type":"Live2D Model Setting",
        "name":"haru",
        "model":"assets/haru/haru.moc",
        "textures":[
            "assets/haru/haru.1024/texture_00.png",
            "assets/haru/haru.1024/texture_01.png",
            "assets/haru/haru.1024/texture_02.png"
        ]
    };

ここのファイルパスをMuse用に修正する必要があります。
まずは先ほどのテクスチャ用フォルダが作れない問題ですが、ここのファイルパスで直接テクスチャを指定することで問題は解消されました。

        "textures":[
            "assets/texture_00.png",
            "assets/texture_01.png",
            "assets/texture_02.png"
        ]

同様にLive2Dモデルファイルのパスも修正しましょう。

        "model":"assets/haru.moc",

ファイルパスの修正が必要な箇所は今のところここだけのようです。

l8828

[アップロードするファイルを追加]の注意点

仕様なのかバグなのか無知なだけかはわかりませんが、アセット内は小文字英数字しか使えないらしく、HTML形式で書き出しを行うとSimple.jsなどのファイル名がsimple.jsと自動で修正されていました。
元のファイルはそのままなので、書き出しを行う歳に修正されているようです。

ScreenShot00050 ScreenShot00051

問題あるか私はわかりませんでしたが何かしらの不具合が出るのも嫌なので、私は元ファイルを小文字英数字に変更し追加しなおしました。
関連してMuse内のHTML挿入機能にて書いたファイル名も忘れないうちに修正しておきました。

<!-- Live2D Library -->
<script src="assets/live2d.min.js"></script>

<!-- User's Script -->
<script src="assets/simple.js"></script>

プレビュー

Muse右上のプレビューを押してみます。

ScreenShot00053 l5641

ということで無事に表示出来ました。

今回作ったデータは以下のURLにアップロードしておきます。
もし不具合やら不備やらありましたら教えてください。

http://test.hatyati.jp/muse-live2d/

20140219_160904_Android-e1410817356756-975x1024 <よろしくにゃ

最後に

なにわともあれ、Adobe Museを使用してLive2Dを表示しつつWebサイトを構築することが出来そうです。
まだまだ初歩的なレベルですが、同じような事を考えている人の一助になればいいなと思います。

では最後に一言。

Live2DもMuseも何でこんなに情報が少ないんだ!!

l34142

 

次回は自分の作ったLive2Dモデルに差し替えを行いたいと思います。

Adobe MuseでLive2Dを表示しつついい感じのホームページが作りたい[1]

という願望…
しんかい鎮守府3_028

前知識

タイトルの様な願望あっても、残念ながら私の知識は10年位前の中学生の時に近くの図書館でHTML4辞典を借りてきて、必死にメモ帳にタグ打ちした程度で止まっている。
「JavaScript? あ、うん、わかるわかる。えーっと…うん…Javaなスクリプトだよね_(:3 」∠)_」 程度のものでまるで知らない(´・ω・`)

そんな私でもWebサイトが作れるツールがあるらしい!
それがAdobe Muse!
l21555

先に言っておくと、別にホームページビルダーでもBiNDでもフリーソフトでも良かったのだろうが、同人誌作ったりする関係上Adobe Creative Cloudに入り月々5千円きちんと上納している。
せっかく上納金収めているのだから使わない方が損だよね! でもDreamweaver扱えるほどWebプログラミング分からないし…
そんな訳でAdobe Museを使ってみることにしたわけですよ奥さん!
CIMG0927 <ドヤァ

と言ってもMuse自体も今回初めて触るので、ぶっちゃけよくわからないのだ
iconaa_0x0_7d1261356fd21e989b8a9b0d57278e7c<やだ、私の知識少なすぎ…?

目標

とりあえずまずはLive2DがMuseで表示できるのかが何よりも問題だろう。
意気込んで始めたはいいけれど、まったく対応していなければ意味が無い(´・ω・`)

Live2DをWebサイトで公開しようと思った場合、現在3つほどの手段がある。

  • GIFアニメに書き出して貼り付ける
  • Flashで作成してサイトに埋め込む
  • WebGLを用いて表示する

GIFアニメは既に行ったことがある。以下参考画像。

Flashも考えたが、Flashは今後無くなりそうな勢いなので今から勉強する気が起きなかった。
そこで今回はWebGLにて表示を目指すことに。また無謀なことを

試行錯誤の結果

とりあえずLive2D公式が公開しているWebGLSDK内のサンプルをAdobe Museにて表示させる事に成功しました!

ScreenShot00013

yaruo_kita

備忘録的な手順(前編)

さて結果を先に見せたところで手順を復習がてら載せていきます。

下準備

まずはLive2DのWebGL関連のSDKをダウンロードします。
こちらは個人なら無料で使用できますが、[Live2D Cubism SDK 試用申込み] を行わなければなりません。

ScreenShot00018

 

ScreenShot00019 ▶ ScreenShot00020


申請するとメールにてURLが送られてきます。
専用ページの左メニューにあるSDK 2.0内のWebGLをクリックします。

ScreenShot00022
 ダウンロードページに行きます。
2015/05/11現在 Ver2.0.02_2が最新っぽいのでこれをダウンロードしました。

ScreenShot00024

ZIPファイルをダウンロード後、解凍すると以下の様なファイルが出てきます。

ScreenShot00025

シンプルなサンプル

Sampleフォルダを見てみると現在3つのサンプルが内包されているようです。
今回はSimpleサンプルをMuseで表示させるのを目標にすることにしました。

ひとまずsimple.htmlの中身を見てみると以下のようになっている。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <title>Live2D Simple</title>
        </meta>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0">
        </meta>
    

    </head>

    <body onload="Simple()">
        <canvas id="glcanvas" width = "512px" height="512px" style="border:dashed 1px #CCC"></canvas>

        <div id="myconsole" style="color:#BBB">---- Log ----</div>
        
        <!-- Live2D Library -->
        <script src="../../lib/live2d.min.js"></script>
        
        <!-- User's Script -->
        <script src="src/Simple.js"></script>
    </body>
</html>
l24359

大丈夫、このくらいなら10年前の知識とさほど変わってないはずだ。

とりあえず関係ありそうな項目は14~24行の中身のようです。

Muse起動

Museを起動します。
まだMuseについてもあまりよくわかっていませんが、とりあえずわからない箇所はデフォルトのまま進めることにして、以下の新規作成[OK] ▶ ホーム[A-マスター]ページを開きます。

ScreenShot00027ScreenShot00028

以下のようにまっさらなページが表示されます。

ScreenShot00029 u-nn iconaa_0x0_ff1dfc29b66dbc0eba6e4b942c027c76 piko

あーだこーだ試行錯誤は省くとして、オブジェクト▶[HTMLの挿入]にて行けるっぽい
ScreenShot00030

HTMLの挿入に以下をこぴぺしようと思いつきます。

    <body onload="Simple()">
        <canvas id="glcanvas" width = "512px" height="512px" style="border:dashed 1px #CCC"></canvas>
 
        <div id="myconsole" style="color:#BBB">---- Log ----</div>
        
        <!-- Live2D Library -->
        <script src="../../lib/live2d.min.js"></script>
        
        <!-- User's Script -->
        <script src="src/Simple.js"></script>
    </body>

しかしこの時、はちゃちに電流走る。

あくまでHTML挿入機能。
BodyタグなんてMuseが自動生成するに違いない。
<body></body>タグが2セットできるのではないか!?
詳しくないけどなんか<html>と<head>と<body>は1セットずつの方がいいような気がする…
gorone<「ブログ読者の中にWebプログラミングに詳しい方はいらっしゃいませんか~」

ので、ここでは15~23行のみを挿入する事に。
ScreenShot00031

ScreenShot00032

ここでプレビューを押してみると怪しげな枠線が表示された!!

rizumu-syobo-nキタコレ♪

しかし問題はBodyタグ内の要素…

onload="Simple()"

これだ(´・ω・`)

Simple()は呼び出す先の関数だろう。
ではonloadは呼び出す機能なのだろう。

とググりながら理解しつつ、
Adobe MuseではどうやらBodyタグ内で要素を付けられないということも理解
nandato
※方法ご存知の方いたら教えてください(´;ω;`)

なので代替方法を模索した結果(ググッた結果)、window.onload という類似機能があるとのこと。
こちらは<head>内に記載するような感じの事を解説サイトに書いてあるので、
「ページ▶ページプロパティ▶メタデータ▶<head>に挿入するHTML:」
にスクリプトを挿入した。
ScreenShot00033ScreenShot00035

 

<script type="text/javascript">
    window.onload = function(){ Simple() }
</script>

これでsimple.htmlファイルの内容をMuseで再現できるようです。

次回に続く

思ったよりも長くなってしまったので一度この辺りで区切り、続きは後から執筆したいと思います。

次回は[Simple.js]のJavaScriptファイルを若干いじりつつ、Live2Dモデルを表示するために行ったMuse側の操作について書きたいです(願望)

CIMG0105 <次回もよろしくにゃ