動くプロトタイプをさくっと作りたい

これは 【その1】ドリコム Advent Calendar 2015 - Adventar 10日目の記事です。

9日目は hang-changさんの

今さら聞けない、はじめてのOGP設定 - Funny panic!

 です。

 【その2】ドリコム Advent Calendar 2015 - Adventar その2もあります。

 

自己紹介

  • あだ名はトミーです
  • UIデザイナーです
  • cocos2d-x開発でのゲームのUIデザイン業務を行っています
  • unity-chanが好きです
  • cocos-chanも誰か描いて欲しいです。

概要

ゲーム開発においてプロト段階での試行錯誤はどうしても必要です。

すべての機能の要件が出揃ってから開発が進むことはそうそうありません。

 

とはいえ、待ちの姿勢だと物事が進まないので、
デザイナーとしては、なるべく先手を打って動いていきたいところです。 

 

また、Photoshop等で見た目を作る際、

静止画の状態で色々な機能を盛り盛りしていった結果、表示要素が多くなってカオスになって後戻りが辛くなる

といったケースも多いので、そのような点も先手を打って解決していきたいのです。

 

本記事では、現在自分がプロト開発でUIデザインをするうえで、使用しているツールと、その活用方法について記載しています。

  1. inVision,Prott
  2. SpriteStudio ver5.5
  3. CocosStudio ver2.3.2

おおまかな説明なので、各ツールの細かい使用方法についてはあまり言及しません。

 

inVision,Prott

簡単に言うと、画面遷移の作成を楽にするツールです。

・紙に書いた絵を写真に撮って取り込む
photoshop等で作った画面をアップロード して、

 

画面遷移や遷移時の動き等の検証をweb上やスマホ端末で簡単に確認できるようになります。

ツールにより機能は若干異なりますが、

  • 画面遷移を多人数に共有できる
  • URLをシェアでき、スマホ端末で確認できる
  • ページ遷移のアニメーションをつけられる
  • 各画面に他者からコメントをつけてもらえる

などの機能があります。 

  • URLをスマホに送り、実機での検証ができる
  • 導線の流れを直感的につけることができる

この2点が、最大の利点です。

自分の場合おもに、

  1. デザイナー以外の人物に、遷移やデザインの方向性を確認するとき
  2. 導線が破綻してないか・使いづらさがないかどうかの検証
  3. 画面構成のパターンの(ある程度の)把握

という目的で使っています。

 

特に、ゲームのUIデザインに関して言うと、

  • 1画面内に入る要素が比較的多くなる
  • 戻る、閉じる等の煩雑さ

が、辛くなりがちです。

 

デザインのラフを作った段階で、データを取り込んで、

確認が必要な人に直接見せて、必要ならばその場でさくっと直したりする。

という柔軟なやり方ができる点がとても便利です。

 

また、この作業を行うことによって、ある程度ゲーム全体の画面の傾向が見えてくるので、UIを作る上でどの画面に何のパーツが必要なのかがわかり、

デザインの共通化がしやすくなるかとおもいます。

 

SpriteStudioとCocosStudioについて

SpriteStudioの公式サイトの動画はかわいい

 

画面遷移時の細かいUIのアニメーションや
メニューを開いた時・ボタンを押下した時等のアニメーションに関して、

デザイナー以外に意図やイメージを共有することは難しい部分があります。

 

実機でかっこいいインタラクションのサンプルを作るツールもありますが、(下記のPixateなど)

www.pixate.com

実際、作るのにそれなりの時間を要する点と、

実装時に使えるツールでつけてしまったほうが作業効率が良いので、

SpriteStudioとCocosStudioを使用しています。

(ただ、実際にスマホで触って操作できたり出来ない点はありますが。。)

 

実際の使い分けでいうと、

・SpriteStudio

→あまりデザイン固まっていない段階でも、パーツを一旦取り込んでとりあえず動かしたい時に使います。

普段は、キャラクターのアニメーションや全画面の演出(ガチャとか)で使用しているのですが、軽いサンプルを作る分には楽なので重宝しています。

flash等の経験があれば、慣れたらサクサク作業できる点と、

動画に出力してチャットツールに貼れば実機でもすぐ観れる点が良いです。

(.aviじゃなくて.mp4とかで出力して欲しいけど、、重いので)

 

・CocosStudio

→ある程度デザインが固まっているもので、主に画面を表示した時のUIのアニメーションをつけたい時に使います。

.csdのデータをエンジニアさんに渡せば、それをベースにエンジニアさんと円滑に会話できるので楽という点はあります。

(ただ、アニメーション周りに強いツールとは言い難いです)

 

 PhotoshopCC~CocosStudioのサンプル

CocosStudioに関してあんまり文献がないので、備忘録的な意味も兼ねて使ってみたサンプルを載せてみました。

 

サンプル

画面が表示された時にこんな感じで動くよ、的なサンプルを作りました

f:id:tommy_chanchan:20151206041451p:plain

  • photoshopCCの画像アセット機能を使っているので、フォルダ名(レイヤー名でも可)に画像ファイル名をつけてます。Photoshop ヘルプ | レイヤーからの画像アセットの生成
  • 下記のように画像単位でフォルダに囲んで、フォルダ側にマスクをかけると、そのマスクのサイズに書き出されるため、意図しないサイズで書き出されることの防止になります。
  • CocosStudio側でspritesheet化を行うので、この時点では並べ方は適当です。だいたい縦横何pxくらい使うかが判断できればいい感じです。f:id:tommy_chanchan:20151206041507p:plain
  •  ファイル->生成->画像アセット にチェックを入れると、下記のように勝手に書き出されます、超便利です。スライスツールなんて要らんかったんや。
  • 生成されたフォルダごと、CocosStudioに取り込みます。

CocosStudio側での作業

*以下、CocosStudioのアニメーションまわりでできることと、デザイナ的に気になりそうなとこをざっくり説明してます

画像の取り込み〜Sceneの作成

・先ほど書き出した画像はフォルダごと直接、CososStudioのリソースにD&Dできます。

f:id:tommy_chanchan:20151206130658p:plain 

・New File->Scene で新しい.csdファイルを作成できます。

 f:id:tommy_chanchan:20151206131002p:plain

・まず最初に、完成した1枚の画像をOpacity:50%くらいにして配置しておくと

 今後の各パーツの配置がしやすくなります。

f:id:tommy_chanchan:20151206131048p:plain

・取り込んだ画像をどんどん配置していきます。

・右側の項目で、アンカーポイント・位置・サイズ等指定できます。

f:id:tommy_chanchan:20151206145846p:plain

 

アニメーションまわり

・基本的に、flashのようなキーフレームアニメーションのツールと似たような使い勝手です。該当のフレームで右クリック・もしくは左上の卵みたいなマークを押して、

キーを追加していく感じです。

f:id:tommy_chanchan:20151208024422p:plain

・変形・拡縮・移動・回転とイージング等の設定はできます。

 f:id:tommy_chanchan:20151208024836p:plain

*Begin to record frameにはチェックを入れておいたほうが良いです。。

確認した限りだと、

Opacity(透過度をいじる)

Visible(表示・非表示の制御)

Color(加算っぽく色つける)

は、一度チェックをいれないとタイムライン上に出てこないようでした。   

 

テキストのスタイルに関して

*CocosStudio上で出来ること

・シャドウとアウトラインに任意の色をつけることができます。

・シャドウ・アウトライン自体の透明度はいじれませんでした

・シャドウ・アウトラインにボカシはかけられないです

・アウトラインは外部の.ttfフォントじゃないとつけられないです

・Label要素じゃないとシャドウとアウトラインつけられないです(button要素内のTextだとできない)

(、、結構微妙だなーと。)

f:id:tommy_chanchan:20151206131936p:plain  f:id:tommy_chanchan:20151206132019p:plain

SpriteSheet化

・最終的に、画像をひとまとめにする際に使います

・NewFile->SpriteSheet を選択すると、.csiというファイルができます

・.csiの中にpngをD&Dするだけで勝手にまとめられます。

 パブリッシュした際に、.pngと.plistのファイルが出力されます。

f:id:tommy_chanchan:20151206131334p:plain    f:id:tommy_chanchan:20151206131500p:plain

f:id:tommy_chanchan:20151206131434p:plain

 完成したら

受け渡し方法などはプロジェクトごとに、ルール化すべきところではあると思うので、

近くにいるクライアントのエンジニアさんに相談しましょう。

エンジニアの人とは仲良くなった方が良いです。

---

最後に

記事が長くなってしまい申し訳ありません。

まだ試行錯誤な部分はありますが、これからも頑張っていきたいです。

 

明日は

ohjiroちゃん

 

ユニティちゃんライセンス

このコンテンツは、『ユニティちゃんライセンス』で提供されています

*サンプルに以下のブラシ素材をお借りしました。
http://z-design.deviantart.com/art/Z-design-Tech-Brush-Set-1-15257579
http://webdesignledger.com/25-best-tech-interface-photoshop-brushes-ever-created