鍋はすき焼きがすき

チゲ鍋が好きなわけじゃないんだからね

話題のかるた 制作ミニ裏話

前回↓の続きです。 chige.hatenablog.com

さて、話題の「プログラミング言語かるた」ですが、目標金額100%を達成し、現在190%を超えています!
出資いただいたパトロンの皆様、シェア頂いた方々、本当にありがとうございます!!

まだ知らないよって方はこちらをご覧ください!

プログラミング言語かるた公式サイト
「プログラミング言語かるた 制作プロジェクト」 いよいよ始動! - CAMPFIRE(キャンプファイヤー)
「C言語の派生でオブジェクト指……」→「C++!」 特徴から言語名を選ぶ「プログラミング言語かるた」制作中 - ねとらぼ

メイキングブックってのがあるじゃろ

プログラミング言語かるた」のリターンプランで、A, C, Dを選んでいただくと、オリジナルメイキングブックというのが付いてきます。これですね↓↓↓

f:id:chige12:20180306205154p:plain

CAMPFIREに載せている情報では、

この「かるた」はどのようにして生まれたのか。制作メンバー2人の会話や途中経過など、制作裏話をたっぷり掲載。
そして、この製品化プロジェクト発足後のサイト制作や、デザイン・動画の話などなど、楽しんでいただける内容となっております!(たぶん)
さらに、プログラミング言語かるたをカード替わりに使って遊べる、「プログラミング言語かるたすごろく」も収録。遊び方の幅が広がります! 目指せ凄腕プログラマー
※もしたくさんのご支援をいただけたならば、その分ページ数が増やせるので、さらにコンテンツを追加できればと考えています。
※サイズはA5です。

ということなんですが、この冊子から溢れ出たネタを少しご紹介。

今回のブログの内容はずばりこちら↓↓↓

メイキングブックに載せるほどでもないけど、
こんなことがあったんだよって言っておきたいシリ~ズ!!!

メインディッシュ

かるたの製品化に載りだしてからも、もう一人の凄腕メンバー「やましー」と色んなやり取りをしてきました。その一部始終をお見せします。

#1 かるた裏面の話

――― かるたが生まれた当時は

当初、かるたの裏面には何も印刷されていませんでした。それもそのはず、前回お話ししたように、かるたのデザインが印刷されたコピー用紙を厚紙に貼り付けただけのものだったからです。

そのため、のりが乾燥するときに縮み、かるたが反り返ってしまっています。↓↓↓

f:id:chige12:20180311192955j:plain
反り返ってしまった かるた

製品版はちゃんと印刷所に発注するのでこんなことはなくなるはずです。
ちゃんとした印刷会社で、ちゃんとした厚紙に、綺麗に印刷してもらえる製品版は、裏面のデザインを新たに作る必要がありました。

また、このかるたにはある問題点を抱えていました。
高専カンファレンスえぶりわん」の時に数回プレイした友人たちが、後日のテストプレイで無双してしまったのです。このかるたは覚えゲーであり、意外と色や言葉が特徴的なため、学生同士で何度もプレイしていると34枚くらい簡単に覚えてしまえるようです。

簡単なゲームほどつまらないものはありません。どうにか難易度を調整し、長く遊んでいただきたい。

そこで、「取り札の裏面はソースコードだけにしよう!」となったのです。

f:id:chige12:20180311200318p:plain
取り札裏面はソースコードだけ

――― デザインどうする

かるた裏面をソースコードだけにするという案に決まってから、デザインをどうするか考えなければいけませんでした。
オモテ面で使っていた枠の色情報も出さないという縛りから、枠を外す必要もあります。そのためオモテ面とはかなりデザインが変わってきます。落ち着く案を探すまで苦労しました。

まず、かるたのロゴは入れたいよねっていう話をしていました。とりあえず白で囲ってみたのがコチラ↓↓

f:id:chige12:20180311192724p:plain
色が葬式っぽくなってしまった

完全に誰かお亡くなりになっているムードです。しかも、かるたは斜めにカットするので四角で囲んでも右端が削り取られることを忘れていました。う~んダメじゃん。

f:id:chige12:20180311200515p:plain
なんとかかっこよくしたい

エディタの定番UIを基にしたデザインとなっているため、「エディタっぽい」というのは一つのデザインの指標になります。とりあえず周りの縁を消して、角を削ってから再構成。
下側の画像ではエディタのタブをイメージした帯を付けています。帯を付けるというアイデア自体は良かったんですが、なんか違うなぁという話に。

そこで出た案が、帯の境界を線で区切るというシンプルなもの。オモテ面の背景にも使った十字を使用して飾りつけをしました。

f:id:chige12:20180311201307p:plain
十字を使おう

この十字は後で調整されて、今では少し小さくなっています。
僕はこの時「こんな感じはどうかな?」という意味で「+ーーーーーーーー+」とコメントしています。デザインの意思疎通方法はいろいろありますが、これでもなんとなく伝わるもんですね。

メイキングブック表紙の話

メイキングブックの表紙を担当したのは僕でした。かるたのデータ1枚1枚がベクターデータのままなので非常に重い。仕方なくワイヤーフレーム表示で制作していたのですが、それだと色がわからないしやりにくい。圧倒的金銭力でメモリとCPUをがっちり確保したいところです……。

こちらが初期案。クソですね。

f:id:chige12:20180311191507p:plain
この後やましーに色々言われた

ぐっすり睡眠をとった別日、重いPCにムチを打ち、やましーからの提案を1つずつ消化。

f:id:chige12:20180311191555p:plain
だいぶ良くなった

わかってる。頭には最初からコレがあったんや(言い訳)。
PCが重いと頭も重くなるし、PCが固まると頭も固まってしまうので良くない。なかなかやる気が出なかったのですが、この後上から順番にかるたの色が虹色になるように並び替えました↓↓

f:id:chige12:20180311191530p:plain
虹色ソーティングドロップ第2星

並び替える前は、「あ~また重たいAi動かさないけんのかぁ~めんどくせぇなぁ」って感じだったのですが、いざ綺麗に並び替えると「はい、完璧。美しい。天才ですわ。」位の気分の差が出ますよね。

ちなみに、虹色ソーティングドロップ第1星は公式サイトの回転ずしアニメーションです。時事ネタで申し訳ねぇ。

メイキングブックの付録「すごろく」の話

メイキングブックにすごろくをつけようというアイデアが生まれたのは会議中だったと思います。デザインはやましーが担当してくれました。

f:id:chige12:20180311191652p:plain
ドロップシャドウの付き方が微妙

これがすごろく初期案↑↑↑。
ドロップシャドウ(後ろの影)に注目してください。最初、ビリビリゲームみたいな線(下図)に合わせて画像を沿わせていたんですが、沿わせるときに線がわかりにくいのでドロップシャドウをつけて目印にしていました。

f:id:chige12:20180311191710p:plain
ビリビリゲームかな?

なので、分かりづらいですが最初は、マスとマスの間の隙間には影が入り込まず、下地色のダークグレーが浮き出て見えている状態でした。ドロップシャドウが案外いいなぁということに気づき、あえて影を付けることを選びました。 この時点でマスが増えるように線の形を変えて、距離を長くとってますね。

その日の深夜に修正版が上がってきました。マスの隙間の影が修正されて、ちゃんと隙間に影が入り込むようになっています。ん~この画像だとちょっとわかりにくいかぁ~

f:id:chige12:20180311210631p:plainf:id:chige12:20180311210714p:plain
改善前(左)と改善後(右)

あとは虹色になるようにマスをソートすれば完成!

f:id:chige12:20180311212014p:plain
ネタバレなので内容は黒で塗りつぶし

どんな内容のすごろくになっているかは、お楽しみに!

まとめ

こんな感じで、2人で楽しみながらわちゃわちゃと制作しています。なので話せる話題は他にもいろいろあります。今回(時事ネタパロディなど)メイキングブックには収録できそうにないネタをご紹介しましたが、いかがだったでしょうか。

引き続き、かるたの追加言語の選定などを行っていきたいと思っています。そして今後もまた現在進捗などを、CAMPFIREの活動報告などを通じて記事にまとめていきたいと思っています!

来週も記事をドロップドロップ ♪ (したい)