スワイプの合間から

某所のUIデザイナーの備忘録

Unite Training Dayに行ってみたよ[後編]

ゲームアプリのUI考え方と実装

皆様、お待たせしました…Unite2016 Tokyoトレーニングデイの後半レポ始まるよ!!

残り3時間がっつりは皆んな大好き(!?) uGUIを学びます!!

 

講師は同じくUnityの中の人、池和田有輔氏です。

uGUIを学ぶ際には、こちらの書籍には本当にお世話になりました。はい。

 

前半はuGUIの基本的な機能の説明に

uGUIはunity4.6から実装された、割と新し目の機能です。

会社で勉強しろや〜と言われてもなかなか資料がなかったり

あと皆んな、NGUI使ってたりで。まだまだ普及していないかな…?という印象

それは自虐なのか?と思ってしまう解説がチラホラw

若干、uGUIの基礎知識がある人にとって前半の基本の説明のみというのは辛いかなぁという印象

周りでは「Anchorがサッパリわからん…」という声が聞こえたので、触りながら覚えるのが一番だろうなと感じました。

 

HTMLなどWeb知識があれば"float段組"って思っておけば良いんじゃないかな

個人的にはそこ聞きたかったんだけど…

f:id:power4mode:20160413235142j:plain

気になったのは講師の経歴。

関わっていたプロジェクトがスマートフォンとコンソールのマルチプラットフォームだったらしい

「コントローラーをどうするかとか、落とし込むのに苦労しました。

 今日はその話をすると長くなるので割愛します・・・」

割愛しないで!!

後半はいよいよ実践へ

Sprite素材をいただいて、RPG風のキャラ選択とマップ遷移を作りました。

f:id:power4mode:20160410214936p:plain

イラストはオインクゲームズ所属の平岡氏

絵本に出ててきそうな可愛いイラストです。

oinkgms.com

 

講師の制作したアセットもサンプルでいただき活用したりしました。

Fugaku


Typeface Animator Demo

だからこそ聞きたかったUIの考え方

テキストのちょっとしたアニメーションなんて一体どこで使えばいいんだ?

「New」マーク程度で、多用したらダサくなっちゃうだろ…

としか考えられなかったのですが、別のサンプルのデモを見せてもらうことで

ああ、こういう使い方もあるのだな…と思い直しました。

(ちょっとした操作に対するフィードバックとしてスパイス的に使用する感じ)

 

実際に言葉での説明はなかったので、講師の方はどういう思考でこのアニメーションを使用しようと考えるのか

それこそ、タイトルにするからには説明していただきたかったなぁと

2Dゲームでレベルデザインの話があったので、ある程度踏み込んでもらえると嬉しかったです。

 

こういう表現技法って結局、UIの基本を押さえてから有効活用できるんじゃないかなぁと思うわけです。

UIって難しいなぁ…

もらったサンプルで色々いじいじするしかないですね…!!

 

てか…youtube漁ってたら、Global Game Jam2015で同じ会場にいた人や…orz

惜しいことをした…!

Unite2016 Tokyo講演覚書き/2D新機能・個人ゲーム開発〜

ビルディング・2Dワールド in Unity ~2D機能のあれやこれや~

※講演資料なし・デモのみ

 

【9スライスについて】

2Dゲームにおけるspriteの配置や設定などがより便利に。

通常では並べてコピーして…の繰り返しだったが、

uGUIやNGUIの人にはお馴染みの9スライス対応。

drow modeで繰り返しの仕様が可能。サイズ比を変えずストレッチすることも。

回転や引き伸ばしても自由自在

コーナーを変えずに中の部分をストレッチさせることが可能

 

【タイルマップについて】

タイルマップを作成するとグリッドを表示できる

セルサイズ、数や形(菱型など)は自由に設定できる

グリッドにspriteが吸着するので、ポジショニングができる

 

スプライトは差し替え可能

パレット上で設定可能しペイント可能

photoshopのブラシ、パターン登録に似ている

描画したタイルだけに色を反映できる

 

レイヤーも分けて設定できる

グリッドに沿わなくてもできる→動かせる

回転も可能

アニメーション登録可能

 

プログラム、スクリプトを追加できる

タイルマップでも重ねて描画していくと空間などが作成可能。

大きさに応じて壁が自動生成される。パイプや地下空間などに仕様できそう

illustratoeのブラシににている

 

【マスク】

マスクインタラクション

ハイドなど調整可能

グレースケール 、アルファを調整可能

囲ったことを表示可能

 

【カプセルコライダー2Dについて】

キャラにカプセルコライダー

エッジコライダーに沿わせてカプセルコライダーを合わせられる

キャラクタにいちいちボックス、サークルコライダーを設定しなくて済む


所感

本講演の前にできたばかりのデモを見せながら機能を説明したため

会場の反応もあり、盛り上がりながらとてもワクワクしたものになりました。

実際に実演するため機能も分かりやすく、まるで絵を描くようにUnity上で2Dのスクロールゲームが作れるので

今後、プランナーが2Dゲームのレベルデザインなどを考えるときに使えそうだなと感じました。

デザイナーでもグラフィックを先行したもの・モックを作れるのではないかと感じます。

感覚的にはマリオメーカーのようなものでした。

これからもっと2Dのゲームは時間が短縮して作れるように感じました。

Unityを使った個人ゲーム開発における「収益化」の現状と未来

発表資料

http://japan.unity3d.com/unite/unite2016/files/DAY2_1700_Room2_IchijoTakaaki.pdf

www.4gamer.net

所感

Uniteの中でかなり盛り上がった部類の講演に感じました。

何より内容にメリハリがあり途中と途中に笑いをはさみ、真面目な話もある。

プレゼンがかなり上手いこともあり、観衆の熱量も自然と高まった印象でした。

受けたあとは、「そうだ、個人制作しよう!!」という気持ちになります。

ただ例に出された「Back in 1995」はまだ開発中のゲームであり、収益化の成功については未確定の要素が大きいため今後の動向は注視したく思います。

 

また個人で名前は聞いたことはあったが、まさか日本のゲームとは思いませんでした。

Kotakuという海外メディアに取り上げられたのが一番大きいところでしょう。

こういった個人制作を取り上げてもらうというのは、なかなか例が少なく稀で難しく感じるところです(言葉や文化の壁など)

そういった点を考えると登壇者の経験のみを一概にマネできるかというとそうでもなさそうであります。(簡単にできるわけでもなく

ただ今後、この講演をキッカケにして、日本の個人制作・インディーズがどう盛り上がるか楽しみではあります。

関東ゲーム制作部、ちょっと覗いてみようかなぁ

Unite Training Dayに行ってみたよ[前編]

初Unite。わーい!

Uniteとは

毎年開催される、Unityというゲームの開発ツールのカンファレンスです!(ざっくりすぎ

詳しくは公式サイトへ

Training Day0

Uniteは4月4〜5日の2日間ですが

前日にUnityのスキルを集中的に学べるワークショップが開催されました。

(時間はなんと6時間ぶっ通しの長丁場…)

 

場所は台場ヒルトンホテル。

geek的な催しには似使わない始終フローラルな香りでした。。。

f:id:power4mode:20160403211641j:plain

f:id:power4mode:20160403211439j:plain

ワークショップ コースBに参加

ゲームアプリ UI & 2D ゲーム作りワークショップ

前半3時間は2Dゲーム作りのワークショップです。

講師はユニティ・テクノロジーズ・ジャパン合同会社

大野 功二氏

以下の著書でも知られます。(本屋で見たことあるー

Unityではじめる2Dゲーム作り徹底ガイド スマートフォンでも遊べる本格ゲーム開発に挑戦

Unityではじめる2Dゲーム作り徹底ガイド スマートフォンでも遊べる本格ゲーム開発に挑戦

 

Unityちゃんのガンアクションゲームを作ったよ!

スタンダードな横スクロールのアクションゲームです。

▽こんなの

f:id:power4mode:20160403213108p:plain

画像素材等などは配布されたUSBメモリの中にサンプルファイルが事前に格納されており、

それをコピーして自分のPCで実際に作ってみよう!という流れでした。

始めの10分程度はUnityとはという初歩の解説から丁寧にしていただいた印象です。

「周りの人と助け合いましょう」ということでお隣さんと挨拶する時間もあったり笑

実際につくる過程ではかじってないと難しいかも

これについては周りの方の印象ですね。2Dゲームだけどプロジェクトを3Dにしてしまう方がチラホラ

あとは時間がない影響で、C#スクリプト部分についての解説はざっくり。

最近スクリプト打ち始めたので、タイピングとか追いつかなかったりとかね

C#勉強しないとなぁ)

ただ周りにスタッフの方もいらしゃったので、随時フォローしてもらったり周りの人に聞くことも可能だったので

体制としては良かったかなと感じました。

(意地で自力でつまづいたところを解決した人←)

 

レベルデザインのお話もありました!

ゲームぽい格子ができたので…ということで

ちょっとこれは予想外でしたね。

ただ普段「レベルデザインレベルデザイン」て言っていましたが、ほぼ難易度に近い意味合いで使っていたので

実はそういうことじゃないんだよ〜ということを知れたので勉強になりました。

f:id:power4mode:20160403211517j:plain

f:id:power4mode:20160403211530j:plain

 

レベルデザインとは

難易度調整ではなくゲームの場や流れの設計のこと

ストーリー展開や演出等もレベルデザインの一環ということでした。

ああ、うん。なんか言われてみればわかるかも…

ゲームのステージにも確かに盛り上がりや緩急などは必要ですね。ずーっと同じような階層だと飽きちゃいますし。

 

ドラマティックにゲームをつくるときは「序破急」を意識する。

映画などにあるストーリー展開の”盛り上がり曲線”を真似て、レベルデザインに置き換えてみると

クライマックスを感じるゲームが作れるのだそうです

メカラウロコ。゚(●'ω'o)゚。

 

最後に講師の方が作ったアレンジステージを解説していただき

レベルデザインの工夫の仕方で、今日作った限られた素材の中でも遊びの幅が広がることを教えてもらい終了。

ね?簡単でしょ?

て言われたら

゚+(b゚ェ゚*)+゚セヤナ

って答えられそうなくらいUnity2Dゲームがぐっと近づいた3時間でした。

ゲームジャムとかではプログラマーさんに任せっぱなしでしたが

今度参加するときには、ちょっとチャレンジしてみようかなっ

 

※このワークショップで使われた資料や講演内容の動画は後日Unityのサイトで公開されるとのこと。 

 

後編では残りのuGUIのワークショップやら戦利品自慢やらしたいと思います( ^ω^ )( ^ω( ^ω^ )

 

 

Delight U落ちたので独学でUI勉強法考えるよ!!

Delight U&UI Crunch、落ちたのは私だ。

f:id:power4mode:20160402121411j:plain

厳選なる抽選の結果、お席を…てe+の当落メール定型文かな…?

 

経歴と400文字程度の志望動機と作品集…での選考。作品集出せなかったのは痛かったかなぁ…

あまりに情熱的に書いてたら900文字くらい志望動機が溢れてしまったので、削りに削って日本語おかしくなってしまったのは、ご愛嬌。

はやく営利目的でもしてほしさ…

ちなみにUI Crunchも落ちました。

とことんDeNAさんと縁がない…UI Crunchも落ちまくってるんですよね。

関東圏内にそんなデザイナーおるんかいな…状態ですわ。

UX JAMに参加した際、他の方との交流で判明しましたが、この手のイベントって必ずしもデザイナーが参加する訳ではないようです。

ユーザビリティ>サービスの向上って考えるとプランナーなりプログラマーも関わる訳ですね。

小さいWeb会社だと普段仕事を取ってくるような、肩書きがなんかC〜がつくような代表さんまで来られる訳です!!(ウヒャー

そんなこんなでどこぞの「誰でも起業講座!」的な雰囲気になって不特定多数が集まるよくわからないイベントになっていかないかちょっと不安ですね…(ただの嫉妬

当日になったらキャンセルでもしかすれば繰り上げワンチャンを期待するしかないですね。><

ちなみにツイートしたら運営さんに拾われた

何この、丁寧な対応…(;ω;) また応募する…!

落ち込んでも仕方ないので勉強法を考える

正直WebデザイナーもUIデザイナーも自称したら誰でもなれる訳でして。

しかし、その中できちんとユーザー心理を把握した設計ができる人がどれだけいるか。

散々、文系脳で進んできましたが。ここにきて

UIって工学やん…バリバリ理系ちゃうの…

とちょっと学生時代に不真面目に数学やってた自分を殴りたい。

1.UIに関する本を探す

買っておいて本棚の肥やしになってることが多いので、自戒をこめて引っ張り出す。

ゲーム系のUI本はこれが定番だと思います。

カテゴリ分けし、実際のゲームタイトルを事例にしているのでわかりやすい。

演出やエフェクト・音楽などユーザーの行動から反映されるものは全てインターフェイスだ。という話には目からうろこです。

ゲームインターフェイスデザイン

ゲームインターフェイスデザイン

  • 作者: Kevin D. Saunders,Jeannie Novak,加藤諒,株式会社Bスプラウト
  • 出版社/メーカー: ボーンデジタル
  • 発売日: 2012/12/26
  • メディア: 単行本(ソフトカバー)
  • クリック: 1回
  • この商品を含むブログ (1件) を見る
 

 続いて、こちらは去年に出ました。日本のゲームタイトルを中心にAAAタイトルから〜モバイルゲームまで

ソシャゲなんて運営したらデザインそのままでしょ?ってイメージなんですが、

UI改修実例などが掲載されているのでとても好感がもてるようになります(そこじゃない

これから買おうと思ってる本
インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

 

 

Webやスマートフォンとくぎってしまうとどうしてもレイアウトの2カラムが〜という話になってしまって、どちらかというとWeb構造のお話になってくるのかなと

もっと根本的な設計からを考えるということをこれから身につけていきたいので

デザイン論理武装したいと考えているので上記の本は良さそうだなぁと 

 

2.他人の勉強法を真似る

ブログ情報社会万歳!!今なら親切な人たちが積極的に情報を発信してきてくれています。

複数の人たちがしていることを自分で実践してみて、合ったものを見つけていきたいですね。

3.良いと思ったものはトレースしてみる・真似てみる

よく言われます。トレース…

なんで真似たりトレースしてみないといけないんだろう…見れば分かるじゃん

て最近まで思ってました…

しかし良いデザインはpixcel単位まで計算されているのです!(トレースしてみて感動した

8の倍数でオブジェクトを統一していたりなど気がつくことは多いです。

何も考えないで、トレースではなくきちんとサイズやレイアウトも意識してトレースすることが大事です。

※イラストでの写真トレースなどよく炎上していますが、個人的には勉強のためであり発表しなければ構わないと考えています。

4.実際に検証する

 ここまで上げた中で、どうにもWebデザイン主体のものが多く

じゃぁ…ゲームってどうなのさ…という困ったことが起きます。

Webやアプリも大分インタラクションやできることが増えましたが、ゲームの幅に比べるとまだまだです…

基本的なところを抑えてからゲームに手を出すのも良いと思いますが。

息抜きに遊びながらゲームのUIを研究するのはいかがでしょう。

www.slideshare.net

これはグループワークとなりますが…

よく個人で遊んでスクショを撮って…とここまででよく終わっているかと思います。

それをきちんと、どういったところがUIとして「気持ちがいい」か「操作しにくい」のかを言語化し定義することは大事だと思います。

またグループでディスカッションすることにより、UIの品質を客観的に見ることができます。

 まとめ

つらつらと書きましたが。。。

正直もっと早くしておけばよかったなぁと今のスキルで感じます。

「とりあえずゲーム会社に入っていればデザインスキルが身につくだろう」

と考えていました

が。

運営の長くなっているソーシャルゲームに配属されると、ルーチンワークとなって予算がないとUI改修もなく設計をする経験が積めません…

ただバナーつくるマンになってしまった自身を変えるために今年は頑張ろうと思います…

ファイトだよ! (و'ω')و

 

村上隆の五百羅漢図展に行ってきた話

f:id:power4mode:20160331233156j:plain

撮影可!アートディレクションも見られるお得な展覧会

村上隆の画風が好きかと言われると・・・ぶっちゃけそこまででもなく

彼の芸術性は優れているだろうけれども、どうにもそこまで理解ができる類のものではないなぁ…

と個人的に思いつつも

Twitter村上隆の展覧会が評判良かったので見に行ってみました。

五百羅漢とは

釈迦が入滅後に第一回の経典結集の際に集まった聖者500人だそうです

はー・・・そんなに集まったのか・・・物語ぽいですね・・・

f:id:power4mode:20160331234145j:plain

f:id:power4mode:20160331234157j:plain

五百羅漢の絵自体は会場後半でした。大きな絵が壁一面にあるだけでも壮観です。

色鮮やかでポップなんですが和も感じられるし、宗教画にも見える不思議な感じでした。

個人的にはこっちが目玉

羅漢図のあとはメイキングコーナーというか、なぜか資料集や指示書の展示もありました。

村上隆は実際に絵を描くというよりアートディレクションなんですね。

まぁ、そりゃそうだよなぁ・・・と思いつつ

この指示書の文言に震える・・・

いや、これ本当に展示していいのかな?って思う程度に暴言が・・・

絶対これ自分が仕事したら怖くて胃が縮み上がりそうなんですが、すごく勉強になりそうだなと思いつつ

それでも逃げ出す間だろうかとも考えました。

f:id:power4mode:20160331234644j:plain

f:id:power4mode:20160331234658j:plain

また日本画を描くにあたっての資料展示もありました。

なかなかこれはやはり、ベースの設定って芸術にするにしてもそれをテーマにするからには同じ地盤ではないといけないのかなと。

歴史の再現ですね。これは

f:id:power4mode:20160331234748j:plain

f:id:power4mode:20160331234800j:plain

大学時代のインタビュー映像等もあり、彼の思考に触れることができ

なかなか興味深い展示でした。

いつもあのお花と目玉のポップカルチャー的な絵しかイメージがなかったので。

余談ですが

今回、展覧会を見るにあたって気になった混雑度

こちらのサイトを見てある程度目星をつけて行きました。

最近だとTwitterの投稿を分析してその展示会の混雑状況をほぼリアルタイムに知れることができるんですね。

未来的だわ

ただビックデータの利用はいいのですが個人の視点だと、常に監視されている不安もある程度出てきてはしまいますね。

これ見ると普通に行ってきたよー!って顔写真も掲載されているので・・・

まぁ、でも便利ではあるので休日に展示会行く際は活用できるといいのでは

週刊少年ジャンプ系のネイティブゲームをまとめてみた(16年3月現在

やっぱり強いよ!僕らの青春

少年ジャンプと言えば、スラムダンク世代ではないですが

毎年、夏休みのこども劇場の影響で、9月頃にスラムダンクごっこが流行りました。

(大体、皆んなミッチーやりたがって入らない3Pシュートを延々と…)

受験時のときは毎朝見て、登場人物たちの努力を見ると「ああ…私も頑張らないと…」

となって、勉強を頑張ったものです…

(と言いつつあまりしていません…)

上京してきた際は、実際に江ノ電に乗って聖地巡りとかしました。

それくらい思い入れがあります。

 

ネイティブゲーム市場も成熟期でIPが強い?!

て、おっとと…思い出話が長くなってしまいました…

業界のニュースでも良く言われていますね。そのあたりはApp Annieや矢野経済研究所の話が参考になるかと思います。

売上ランキングを見ると分かるように

オリジナルタイトルではなく原作アニメや漫画などのゲームが多くなってきています。

ランキング上位はここ2・3年程度、パズドラ・モンストの独壇場でしたが

この1年で、IPタイトルの上位食い込みが顕著になってきました。

話ではGREEMobageの後期の状態と同じ感じらしいですね。

もうそうだったけな…?って程度に忘れてしまいました…月日が経つのは早い

 

個人的に有名IPのタイトルって、中小企業が会社の実績や知名度確保のために下請けするイメージだったんですけど。

最近だと、オリジナルでヒット飛ばしたそれなりに力のある開発会社とIP版元が手を組んでシステムを流用してそのジャンルのゲームを駆逐してくるようなエグい感じになってますよね…

まぁ、あとはブラウザゲーで大きくなった会社がネイティブで鳴かず飛ばずで、売上安定のためにIPに手を出すとか…おっとゲフゲフ…

 

パズドラ・モンストの登場で、俺たちも面白いゲーム作るぞ!!うぉおおおお!!って悪戦苦闘しながら、皆さん思い思いにオリジナルタイトルの開発頑張ってみたけど

現状の市場を見るともう飽和状態。

ユーザーさんも新しいゲームを始めるまでもなく、現在遊んでるタイトルで満足していただいてる訳です。

そこで、誰もが知っている昔読んだ好きな漫画!のタイトルが強いわけですね。

私も好きな原作のタイトルなら、ゲームとしての面白さ云々の前に条件反射で手を出しますよ。

中でもやっぱり国民的漫画雑誌のジャンプは本当に強いですね。

案外とタイトル出てるんですが、ググってもリスト化されてないので、自分用にまとめます。

という訳で週刊少年ジャンプ系タイトル集めてみた

※終了したものについては記載しません

続きを読む