デザフェスに行ってきた
デザフェスに行ってきました。
戦利品はこんな感じです。
東6ホールピンバッジや各種いいなと思ったステッカー。
(Chromeでインターネット回線切れた時に現れる恐竜はGoogle I/O帰りの@kurotakyにもらった)
そして口曲がり軟骨頭の怪獣。
本名は「変身怪獣バナンガ」と言うらしいです。
デザフェス全然関係ないけど東7ホールの自販機の部屋にあった「東7放水銃操作卓」がかっこよかった。圧倒的弐瓶勉感。
何に使うんだろう。
Strength Finderやってみた
最近会社で話題になっていた、Strength Finderをやってみました。
Gallupの調査によって、人は自分が最も得意なことにフォーカスすると成功することが証明されています。才能を見つけ、それを強みに発展させたとき、人は、より高い生産性を発揮し、パフォーマンスが向上し、より意欲的に取り組むようになります。
GallupのClifton StrengthsFinderテストは、人が自分の才能を特定するための第一歩です。Clifton StrengthsFinderの結果は、スキル、才能、知識の独自の組み合わせ、つまり強みについて話し合い、それを発展させる方法を示します。
とのことです。
結構30分くらいぶっ続けでやらなきゃいけなくてしんどかったけど、正直に答えました。
結果は、
で、なんとなく当たっている感じでした。
品質を重視していこ。
さあ、才能(じぶん)に目覚めよう 新版 ストレングス・ファインダー2.0
- 作者: トム・ラス,古屋博子
- 出版社/メーカー: 日本経済新聞出版社
- 発売日: 2017/04/13
- メディア: 単行本
- この商品を含むブログを見る
fonts.comでMonotype定期購読はじめた
いまさらだけどfonts.comでMonotypeの定期購読をはじめました。
ついこのあいだ出た「たづかね角ゴシック」と、「AXIS Font Japanese Condensed( Re:CREATORSでつかわれてるやつ )」のWebフォントが使えるっぽいし、その他2,200以上の有名欧文フォントが使えるとのこと。
年間契約すると＄9.99/月。
とりあえず１年使ってみようと思います。
tyranoscript + Electronで「五〇度の真夏が巡る」というノベルゲームを作った
まずはC91お疲れ様でした！！！！！(まだ終わってないけど)
いつもやっているOTARIBAというアイドル・アニソンのクラブイベントのメンバーで1日目西の-14aで吉祥寺を舞台にした「五〇度の真夏が巡る」というノベルゲームの体験版を出しました。自分はスクリプトとゲームのUIや小物周り、ロゴのデザイン、特典冊子の装丁などを担当しています。
【再掲】【C91】1日目西の14a OTARIBA Games『五〇度の真夏が巡る』というノベルゲームの体験版を頒布します！表紙こんな感じになってますので何卒〜 https://t.co/iV3X7PGzZE… #C91 #OTARIBA pic.twitter.com/p8rokFoGMS
— テストアカウント@木西の-14a (@putchom) 2016年12月24日
【C91】特典冊子が届きました！12月29日(1日目)東京ビックサイト西の14aにてノベルゲーム「五○度の真夏が巡る<体験版>」と一緒に頒布します！何卒！ #OTARIBA #C91 pic.twitter.com/RBL4zD6zGP
— テストアカウント@木西の-14a (@putchom) 2016年12月20日
名刺ができました〜！テレカ風になっております📞😍 #C91 pic.twitter.com/i4hgWGF63E
— 五〇度の真夏が巡る@木西の14a (@NatsumeguGame) 2016年12月25日
設営完了〜！みなさんお待ちしてます☺️🎉🌸 #C91 #OTARIBA pic.twitter.com/CkfpxObqyj
— 五〇度の真夏が巡る@木西の14a (@NatsumeguGame) 2016年12月29日
今回出展者として初参戦だったのですが、「絵がかわいい」「クオリティが高い」など、来てくださった方から嬉しいお言葉をいただき、良い年末年始が迎えられそうな気持ちです。
本当にありがとうございました！
このエントリではどうやって作ってるのか聞かれることがたまにあったので、まとめておこうかと思います。
ゲームの基本的なシステムは最初から作るのは大変なので、オープンソースのtyranoscriptというノベルゲームエンジンを使っています。
これはノベルゲームの開発によく使われる吉里吉里をウェブのプラットフォーム上で動くようにしたもので、フロントエンド周りの技術を多少おさえている人であればわりと簡単に本格的なノベルゲームを作ることができます。
他にも似たようなノベルゲームエンジンはあるのですが、tyranoscriptを選んだ理由としては、
- デスクトップアプリケーション(Windows、Mac)、スマートフォンアプリ(iOS、Android)、ブラウザゲームにワンソースで展開できる。
- 自分が普段の仕事で使っている領域の技術でカバーできる(HTML、CSS、Javascript)
- 自由度がかなり高い
- メンテナンスが活発に行われている
- 開発者がいい人そう
チームで最初の構想を練っている時に「ゆくゆくはiPhoneアプリにしたいよね〜」と話していたので、もし展開するとなったときに開発コストが少なくてすむようにしたいなと思っていました。
また、普段の自分の仕事領域のフロントエンドの技術で完結するのも魅力的で細かいデザインのカスタマイズなどもCSSで全部書けるので最高だなと思っています。
あと開発者さんのshikemokumkさんがとてもいい人そうで、交流掲示板に寄せられた質問やバグに丁寧にこまめに返事をしていたり、この間2016年振り返りのエントリを書かれていて、モノづくりに対する姿勢にすごく共感しています。
開発スピードも活発で新機能がどんどこリリースされるので素晴らしいです。
また、デスクトップアプリケーション化するところにあたっては、Electronを使用しています。
ElectronはGithubが作っているクロスプラットフォーム向けのデスクトップアプリを開発できる、オープンソースの開発プラットフォームで、数行設定を書くだけで、簡単にWindows、Mac両対応のデスクトップアプリケーションを作ることができます。
tyranoscript公式ではアプリケーションのパッケージ化にあたってはnw.js（旧名：node-webkit）を使っていたのですが、
- 自分が個人的に作っていたTumblrのgifでVJができるアプリでElectronを採用していて慣れていた
- 周辺のライブラリが充実してるっぽい
- Githubが作ってるし安心感ある（？）
という理由で採用しました。
Electronは開発が活発なため、1年前に今回のゲームで作ったパッケージ化の環境がC91の1週間前に動かなくなるというトラブルもありましたが、アプリケーション側のソースとまったく結合してないため環境を最新にして動かすとすんなり動いてくれてたすかりました。。。（アップデートはこまめにやろうな）
今回さわりだけ紹介しましたが、もっと突っ込んだ話もいずれ書きたいなと思います。
開発にあたってはこの辺にお世話になりました。
「五〇度の真夏が巡る」の体験版は次回コミティア119にも出展しますので是非起こしいただけると嬉しいです！
明日はKOMEWORKSの木緖なちさんのロゴ本が欲しいので普通にコミケの3日目に遊びにいきます。
それでは良いお年を！！！
Maison book girl 2nd oneman live 『Solitude HOTEL 2F』に行ってきた
以前からとても好きなMaison book girl(通称：ブクガ)のセカンドワンマンに行ってきました。なんとこのライブ即日完売でした。買っといてよかったよ。。。
ブクガは誰がなんと言おうと音楽よし、世界観よし、キャラクターよしで最高のアイドルです！
そしてついに来たる11月30日に「river」（cloudy irony）というシングルで徳間ジャパンからメジャーデビューします！
このMV、曲はもちろんのこと、色調とかタイポグラフィとか細部に至るまで作り込みがすごくて本当に好みです。。。
LIVEはというと、世界観を壊さないように(?)MCを最後まで入れること無くぶっ通しでやってて一つの舞台を見てるようでした。。。
でもさすがに休憩しないと息あがってメンバーもお客さんも死んでしまうので、MCタイムの代わりに気持ちのよいエレクトロニカ(?)が流れる中、ひたすら野菜を切る映像に合わせてポエムが読まれる(見た人じゃないとなんのこっちゃ分からんと思いますが)という演出もあり、あのへんで謎のカタルシスを得ました。
そして最後まで突っ走ったかとおもいきや、アンコールでmy cut(自分が一番好きな曲)がかかり会場の熱気もすごく、もう膝から崩れ落ちて帰ってきました。。。はぁ最高。。。
セトリは誰かが公開してくれるはずだ。
[追記]公開されてました。ありがとうございます！
2016/11/6
— ブクガ セトリ まとめ (@Mbg_setlist) 2016年11月6日
2nd oneman live
Solitude HOTEL 2F
shibuya WWW X
*画像にて失礼します pic.twitter.com/TahVux7YzC
また、ブクガのすごいところは物販が普通にかっこいいし普段も着れるところ。
【11月6日 Maison book girl 2nd oneman live「Solitude hotel 2F」物販表２】グッズ #ブクガ pic.twitter.com/M9T7Yn2DFP
— Maison book girl (@maisonbookgirl) 2016年11月3日
チェキ券もしゃれておったよ。
ブクガのチェキ券かっこよさ pic.twitter.com/CSQaCCVw7m
— テストアカウント (@putchom) 2016年11月6日
最後になんといっても自分が一番言っておきたいのはこちらの矢川葵さんが世界一かわいいってことです。
こんなに自然体でかわいい人見たことないよ。。。かわいすぎる。すごい。なんなんだよ。
メジャーデビューめでたいし、これからも頑張って欲しいと思うのでした。現場からは以上です。
動画仕上げについて調べた
とある事情でアニメのOP動画のようなもの(といっても静止画を動かす感じのやつ)をつくる必要が生まれたので最近のアニメっぽい仕上げに近づけるにはどうやるのかなーと思って調べた備忘録的なメモです。動画の制作はAfter Effectsでやってます。
ちなみに最近のアニメっぽい仕上げっていうのはこういうキャラの輪郭が少しボケてボワーってなってるやつです。
普通に絵描いただけではこんな感じにならないので、神は細部に宿る的な処理なんだろうなーと思っていたのですが、自分でも作ってみたくなったので調べました。
いろいろ調べてみるとこんな良さげな記事が出てきました。
アニメの撮影の工程では静止画をパラパラ漫画の要領で組み合わせたあと、こういう処理をやってるらしい。
・エフェクトワーク：エフェクトを追加し、場面に臨場感を与える
・ライティング：光源を意識し、場面にリアリティを与える
・セル調整：ほほのぼかしや肌にグロー効果を加える
・色調整：人物、背景間等で色味が合わない場合、合うように調整する
・テクスチャ貼りこみ：人物、背景以外で追加したい素材を合成する
とりあえずライティングとセル調整のところだけやってみました。
ちなみに元の絵はこんな感じ。
ライティング
絵の影が右下に向かって落ちているので、こういう左上に光源がくるようなグラデーションエフェクトを平面を上に乗っけて、オーバーレイにしたあと、不透明度を40%ぐらいにしたらこんな感じになった。
左上の光源にした方が少し明るくなって現実味が出た気がする。
さっきのブログに、
人物セルのこちらからみて右側にある「カゲ」にリアリティや画面全体の空気感を与えることができるのです。
とあるので、背景絵がもう少しちゃんとしてるとわかりやすいのかも。
EQにしろドロップシャドウにしろエフェクトはわからないくらいかけるのがちょうどいいって誰かが言ってた気がするのでこのまま進めます。
セル調整
セル調整はディフュージョンフィルタというのをかけたあとに、画像のジャギを取ってグロー効果というのをかけるらしい。なるほど。
「DF（ディフュージョンフィルタ）」という処理をセルにかけます。これは明るい色だけを「飛ばす」効果処理です。この効果をかけることを前提に「明るい色」と「暗い色」のメリハリをつけていきます。
このディフュージョンを行うと、明暗色間での調和をとることができるのですが「明るい色」を突出して飛ばすという処理のメカニズムから人物の「主線」のくどさを軽減することができます。
まずディフィージョンフィルタをかけてみたんですが、AEでのかけ方がわからなかったので調べたらスッと出てきました。
薄めがいいなと思ったので上のエントリのDF-Aの方法でやりました。
↑一番上のレイヤー
複製レイヤー①：合成モード「オーバーレイ」にして不透明度30%。
トーンカーブで軽くS字にしてコントラスト上げて、
ブラー(滑らか)を20でかける。
複製レイヤー②：合成モード「輝度」にして不透明度30%。
ブラー(滑らか)を20でかける。
オリジナルレイヤー：何もせずにそのまま置く。
↓一番下のレイヤー
おお！なんかだいぶボヤッとしてきた！よさだ！
ここで、ジャギとりをしとくっぽい。
調べると、OLMという会社(?)のOLM Smootherっちゅうプラグインを使うとさくっとできるっぽい。
なんでもポケモンとか妖怪ウォッチの制作にも使われてるツールなのに無料で使えるらしい。太っ腹過ぎる...ありがとうございます！
ジャギを取ったので、グロー効果をかけます。
グロー効果がどんなものなのかはここが分かりやすかったです。
上の記事はPhotoshopでの方法ですが、AEでも同じような事ができました。
その結果、、、
肌がツヤツヤした！！！！！！
テカらせすぎてPhotoshopオバケみたいになってる気もするので、もう少し微調整したほうがよさそうですが、だいぶイメージに近づきました！
制作の現場の方はこんな処理を毎回やってるのかー！！すげぇ大変だな...
(ある程度自動化されてるとは思うけども)
処理工程を知ったことで、普段見ているものがもっとありがたく感じられそうです。
ありがたや...ありがたや...
はじめよう! 作りながら楽しく覚える After Effects
- 作者: 木村菱治
- 出版社/メーカー: ラトルズ
- 発売日: 2015/02/14
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
Adobe After Effects トレーニングブック サンプルデータを触りながら学べるハンズオン形式の解説書
- 作者: 高橋篤史
- 出版社/メーカー: ワークスコーポレーション
- 発売日: 2009/10/20
- メディア: 単行本
- 購入: 17人 クリック: 155回
- この商品を含むブログ (6件) を見る
お産合宿でファミコンっぽい音楽が作れるアプリを作った
会社の開発合宿であるお産合宿10に参加して「picotii(ピコティ)」というChiptune(ファミコンっぽい音楽)が簡単に作れるiOSアプリを作ってきました。
自分がデザイン、@kuroyamが開発を担当しました。
結果としては、ちゃんと目標としていたApp Storeに申請するところまで行けました！！！！！
審査早く通ってほしい！！！！！！！
忘れないうちに、今回このアプリを作る上で自分なりに工夫した点を書いておこうかと思います。
Sketch + Zeplinでモックアップの共有を素早く行った
最近自分が携わっているminneのiOS・Androidアプリ開発でも使い始めたZeplinを使用することでスピーディーに画面・指示書を共有することができました。
【⌘ + E】でSektchで作成した画面を瞬間アップロードすることが出来るので素晴らしいです。
こんな感じで要素間のマージンなども自動計算してくれます。
また、フォントの色やサイズも自動でリストアップしてくれます。
超絶便利。
音楽作りの敷居を下げることを意識した
音楽を作る系のアプリは大体専門用語が飛び交っていてその分野に明るくない人には難しいなーと感じていたので、擬音語や誰でも分かる言葉に置き換えることを意識しました。
また、音楽を作るモチベーションを上げるために、キャラクターや世界観を作ることでアプリに没入してもらうことを意識しました。
以下ざっくり思考過程です。
- 一番優先することは音楽作りの敷居を下げたり、モチベーションをあげること
- 「親しみやすいキャラクター」と「アプリに没入するための世界観」を作ろう
- キャラは宇宙船が壊れて祖国に帰ることができなくなった宇宙人
- 「カイルくん」みたいにちょっと鬱陶しい感じにしたい(逆に愛着を持ってもらう)
- 変な関西弁を喋る
- この宇宙人を祖国に返すために曲を作る
- プレイヤーは曲を作るたびに「オトのカケラ(宇宙船を直すための部品みたいなもの)」を集められる(ゲーミフィケーション)
- 助けてあげてるのにめっちゃ上から目線で話しかけてくる
- 全体的に8bitなゆるい見た目にする
- 楽器の名前は小難しい名前ではなく「ぴこぴこ」とか「ポロポロ」みたいな擬音語にしよう。
というのをざっくり考えてチーム内で共有しました。
何か判断迷った時にあらかじめ設定・世界観チーム内で共有しておいたのでブレずに最後まで進められたのかなと思います。
この辺のキャラ・世界観設定のノウハウは去年のお産合宿で作ったギャルゲーの知識が生かされている(はずです)
毎回お産合宿前は、画面設計やサービスのトンマナレベルのものはあらかじめ決めていくのですが、今回他タスクに追われバタバタしていたこともありアプリの名前すら決まっていませんでした。。。
しかし思ったよりスピーディに開発を進めることができよかったです。@kuroyamに感謝。
まだまだ詰めが甘いところだらけなのでこれからブラッシュアップしていきたいと思います。
来年も参加するぞ！！！！！！１１１１１
[2016年9月25日追記]
ついにリリースされました！！！！！！
