午前の部 11:00〜11:50

「前説・TortoiseSVNたん」 - C.Ponapalt様

  • 「うかべん」名称変更？！
    • うかべん改めQUSS（伺的勉強会）→かっこいいがわけがわからないのでボツ！
    • もちろん準天頂衛星（QZSS）「みちびき」のパクリオマージュ。


  • 「TortoiseSVNたん」御披露目式
    • シェルは「美麗な秘書さんシェル」と「仕事でも使えるボス来たシェル」
    • SVNリポジトリ一括更新機能なども！
    • うかべんのページで公開中！辞書の中も見てみよう！



 

「シェルの作り方ライブ」 -- 黒羽龍矢様

  • シェサーフェス作成ワンポイント
    • 部品毎に作る。腕なども動きをつけておくとよい。
  • 画像の縮小
    • 縮小したらレイヤー分けしてるパーツがずれる
      • 対策：パーツ同士の重なりを多めにしておく、別レイヤーで補修
    • 口や鼻のパーツが太くなる
      • アンチエイリアスでぼけた部分が太く見せてしまう
      • 対策：元絵の時点で、口の線のまわりの背景色を口のレイヤーにもつけておく
    • 同じものを縮小したのに、アンチエイリアスのかかり具合がズレる
      • 対策：縮小してからレイヤー結合する
  • 投下食を入れる
    • 立たせたとき、透明にする部分に塗る色のこと
    • 絵で使われていない色（緑・赤など）を使う
    • 背景色の塗り方実演
      1. レイヤーを統合（顔のパーツは別レイヤーにわけておく）
      2. 自動選択ツールで透明部分を洗濯
      3. 選択範囲を1ピクセル縮小
      4. 選択範囲を反転させ、立ち絵の背景を白で塗る（白フチができる）
      5. Photoshopの「Web用に保存」でPNG形式で保存
      6. 顔パーツを差し替えて、別サーフェスを作り次々保存していく
  • まばたきなどの差分の作り方
    • 画像の一番左上からほしいところまでコピーし、いらない所を透過色でぬりつぶす（簡単！）
    • ほしいところだけを切り抜くと、座標指定が必要になるので少々面倒になる。
    • 透過色で塗りつぶしたところは容量を食わないので気にしなくてもOK
  • surface.txt の作成
    • 絵をどのようにアニメーションさせるか指示を出すプログラム（テキスト）
    • 当たり判定もここで入力。
    • よくデベロッパが挫折する試練。
    • surface.txtの例
      • サーフェス番号、当たり判定座標、当たり判定名
      • アニメーションの頻度、アニメ画像番号、アニメーションを表示させるまで「待つ時間」
      • 表示させる方法（overlayなど）、表示させる場所
      • アニメーションリセット（アニメ画像番号に-1）


 

  • 基本的知識
    • 当たり判定は番号が小さい方が優先される（判定が重なった場合）
    • アニメーションは番号が小さい方が手前のレイヤーに表示される
    • どの画像を表示させるかは、画像とtxtで設定した番号が重複していた場合、txtの設定の方が優先される
      • 9999番の画像を用意しつつ、surface.txtで surface9999 を定義した場合、surface.txt で定義されたものが表示されてしまう。
      • サーフェス定義の番号とアニメーション部品番号は重ならないようにする
  • 応用知識
    • 触り判定の名称はサーフェスごとに定義できる（落ち込み表情の頭判定のみ別の名前にして、反応を変えることもできる）
      • 大文字小文字も区別されるので注意
    • アニメーションの後に元の状態に戻さない（-1をしない）というテクニック
    • アニメーションのタイミングに0を使うと「あらかじめそれが表示された」サーフェスが表示される（SSP内部処理）。element合成と同じ結果だが、elementよりも応用が利く。
  • アニメーションの例
    • うかべんページにテンプレあり
    • 瞬きアニメーション
    • 耳・しっぽ動きアニメーション（これが説明したかった）
      • 上の応用テクニックがいっぱい使われている！
      • サーフェスが切り替わった瞬間に待ち時間なしで「アニメーショングループ2」を発動
      • アニメーショングループ2は、1度だけ「ぴくっ」とする
      • その後はたまにピクピクする
      • しっぽはたまにフワーっと動く
    • 残像などを残さず綺麗にアニメーションできる！



  • 立ち絵の後ろでアニメーション
    • 「アニメーションが遅い方が手前にアニメーションする」
      1. まっ透明の画像をbaseに設定
      2. runonce、0timeでアニメーショングループ1を発動
      3. アニメーショングループ1；しっぽが動く
      4. runonce、0timeでアニメーショングループ2を発動
      5. アニメーショングループ1；しっぽを表示
    • こうすることで、しっぽが後ろのレイヤーで表示されているように出来る
    • 天使の羽などをこの手法で表示すれば、羽だけを別部品にして背景に自由に動かすことができる
  • まとめ
    • 今回、シェル画像の作り方、surface.txtの作り方、アニメーションの仕方（特に耳しっぽの動き方）を講義した
    • つまりどういうことかわかるね？
      • いっぱい出来るといいなぁ〜
    • 黒羽さんのサイトにも資料をアップロード予定！