5.1さらうどん

@giginetの技術ブログ。ゲーム開発、iOS開発、その他いろいろ

Markdownでスライドを作る決定版!「Deckset」が非常に良かった話

スライドを作りたい

photo by James Jordan

勉強会に出席するような意識の高い読者諸賢であれば、各々様々な方法でスライドを作っているかと思います。

僕は、markdownを使って楽にカッコイイスライドを作ろうと、今までいろいろ試行錯誤してきたのですが、どれも僕の要求を満たすような感じではなくて、結局Keynoteを使ってせっせとスライドを作っていました。

Decksetが凄く良い

Markdownからスライドショーを生成してくれる「Deckset」というMac用のアプリを2000円も出して買ってみたのですが、凄く良かったのでご紹介します。

https://itunes.apple.com/jp/app/deckset-turn-your-notes-into/id847496013?mt=12&uo=4&at=10l8JW&ct=hatenablog

Deckset for Mac: Turn your notes into beautiful presentations

作ってみた

このスライドはこんな感じのmarkdownからできてます。

deckset

Decksetはここが凄い

大抵のメインの機能はスライド内で述べてしまったのですが、他にも細かい機能が多数実装されてます。

  • markdownからスライド生成できる
  • 豊富なデザイン
  • Github Flavored Markdown(GFM)対応
  • 画像の設置位置を指定できる
  • 文字のサイズも変更できる
  • 一部HTMLタグが使える
  • 発表用メモが書ける
  • 動画も埋め込める
  • 4:3, 16:9のアス比に対応
  • PDFにはき出せる
  • 外部の好きなMarkdownエディタと連携できる

特に、画像を専用のシンタックスで制御できるところが満足度高い

今までやってきたこと

photo by mdalmuld

お金なんかかけなくてもタダでできるよ!と異を唱えたい方は多いと思うので、Decksetに辿り着くまで、僕が試してきた方法をご紹介します。

もっと良い方法があれば教えてください。

slideshow

Ruby製のスライド変換ツールであるslideshowなどを使って、HTMLに吐きだしていました。割と簡単にできて嬉しいし、結構カスタマイズ性も高かった。

slideshow-s9/slideshow

さらに、以下に紹介されているようにguardなんかを一緒に使ってあげると、markdown保存するだけでスライドができて便利でした。

Markdown × slideshow × guard で快適プレゼン資料作成 - Confront my ignorance

しかし、初期状態には良いテーマがなかったり、日本語を扱うと微妙になったり、テーマを増やすにはCSSを書くのが面倒だったり、画像の細かい位置調整がうまく行かなかったりと、使い勝手が悪いところも。

Pandoc + Reveal.js

Pandocを使ってMarkDownからreveal.js用のスライドを作ってしまおう。 - 亀岡的プログラマ日記

Pandoc - About pandoc

hakimel/reveal.js

Haskell製のドキュメント生成ツールPandocで、実はmarkdownやreStructuredTextからスライドショーを作ってくれる機能があります。

これを使っても良いけど、環境構築が面倒なことに加え、結局は前述のslideshowと同じような問題に陥る。

Glide.so

f:id:gigi-net:20140505214704j:plain

Gistにmarkdownを上げるだけでスライド化してくれる便利サービス、『Glide』。

Glide

これはかなり良い線まで行ってて愛用させて頂きました。

凄く便利だったのですが、デザインテンプレートが少ないのと、改ページの仕様が面倒なこと、いちいちオンラインに上げないといけないこと、さらに画像を別の所に保存しておく手間などが不満でした。

僕はGistにmarkdownを上げて、それをリポジトリとしてcloneして、そこに画像を突っ込むみたいな運用をしていましたが、高々スライド一つ作るだけで凄く面倒だったので、徐々にあまり使わなくなりました。

Keynote + カッコイイテンプレート

結局、Keynoteでいいやーという結論に落ち着く

Keynote

Keynote

  • Apple
  • 仕事効率化
  • 無料

Azusa」というKeynoteテンプレートが非常にカッコよく、とりあえずこれを使っておけば見た目が良くなるユニクロ装備ので、これでいいやーと言った結論に落ち着きました。

大体いい感じになるKeynoteテンプレート「Azusa」作った - MEMOGRAPHIX

オススメMarkdownエディタ

Markdownを編集する方法はいろいろあるのですが、Macでのエディタはいろいろ試した感じ無料で使える中では「LightPaper」というエディタが一番良かったです。

Simple, beautiful & free Markdown editor for passionate writers on Mac

有料の奴はもっと良い物があるかもしれませんが、フリーはこれが一番オススメ。これもGFMが使える。

まとめ

  • Deckset凄い
  • スライドはmarkdownで作った方が楽
  • いろいろ悩むぐらいなら2000円払ってDeckset買おう
  • Macでタダでmarkdownを書きたければ「LightPaper」がオススメ
  • 意味なく画像を入れるとスライドショーもブログも格好良くなる

cocos2d-x 3.0でクロスプラットフォームなインディーゲームを開発した話

『Wave Weaver』リリースしました!

シンプル操作で脅威の中毒性。波をよけ続けるゲーム『Wave Weaver』をリリースしました!

詳しくは以下の記事とトレーラーをチェック!

波をかわして曲を紡ぐ、カジュアル中毒ゲー『Wave Weaver』をリリースしました - 5.1さらうどん

Google PlayApp Storeで大好評配布中です!非常に多くの方に遊んで頂けているようで驚いています。

for iPhone / iPad

https://itunes.apple.com/jp/app/waveweaver/id841280819?at=10l8JW&ct=hatenablog

iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 WaveWeaver

for Android

Android app on Google Play

Wave Weaver - Android Apps on Google Play

この記事は

この記事はWave Weaverの開発話を交えて、cocos2d-xを使ったクロスプラットフォームなゲーム開発の知見をお伝えするつもりです。

Wave Weaverは、cocos2d-x 3.0のβ版を使用しており、国内では最速レベルのプロダクトだと思われます。そのため、今後使う人に使用感など含め、お伝えしていきたいと思います。

Global Game Jam Sapporo

f:id:gigi-net:20140323102644j:plain

このゲームのプロトタイプは、48時間でゲームを開発するハッカソン、GlobalGameJamの中で作られています。48時間で基本的なプロトタイプはできあがっていた!

詳しくは、gihyo.jpに僕が寄稿したイベントレポートをご参照ください。

ソーシャルゲーム,ボードゲーム,ファミコンまで!? Global Game Jam 2014参加レポート:レポート|gihyo.jp … 技術評論社

cocos2d-x 3.0を使ってみた

最終的に、本作ではcocos2d-x 3.0beta2を使っています。

現在ではRC版が出ているのですが、GGJ当時(1月末)の最新版はβ1でした。

lambda超便利

3.0最大の恩恵は、C++11で実装されたlambdaに完全対応しているところ!

特に、今作ではエンディングなど、逐次的な処理があったので、大体はAction + lambdaで、cocos2dのBlocksライクにかなりお手軽に記述できました。今まではわざわざコールバックを定義して、なんてことをやっていたので、非常に利便性が上がっています。

反面、lambdaを使いすぎると、コードの可読性が落ちて大変でした。特にGGJでは尚更。

さらにC++のlambda-captureと、cocos2d-xのautoreleaseが相性最悪な感じで、captureしたと思ったら、autoreleaseされててぬるぽ、みたいなことがよく起きたのもハマりどころでした

クロスプラットフォーム化が楽

3.0からプロジェクトを生成した時点で、全てのプラットフォーム用のテンプレートが生成されるので、クロスプラットフォーム化がかなり楽でした。ありがたい変更。

alpha, beta, rcで仕様が変わりまくった

まだリリース前なので、仕様がコロコロ変わって大変でした。

以前、alpha版を基準にスライドを作ったのですが、それからGGJで利用したbeta1は、ArrayやDictionaryが廃止されていたりと、結構大きな変更が。

cocos2d-x 3.0 + C++11で始めるゲーム開発超入門

最近リリースされた3.0のrc版ではプロジェクトの生成方法が変わっていたりして、あんまり原形を留めていない感じです。

開発スピードが速すぎて仕様が安定しなさすぎるので、正式リリース前のフレームワークを使うのは危険な感じ。

クロスプラットフォーム + Universal対応

今回はゲーム自体がシンプルだったのもあって、プラットフォーム別に4種類画面を作りました。

f:id:gigi-net:20140323104935p:plain

左からiPhone(4.0インチ)、 iPhone(3.5インチ)、iPadAndroid

iPhone / iPad

iPhone開発はノウハウがあったので、いつも通りこちらを基準に作りました。

iPhoneRetinaとNon Retinaの画像を用意する必要があるのですが、Retina版を基準に作り、Pythonで簡単なスクリプトを書いて、Non Retina用に自動変換をしていました。PIL便利。

4インチ対応は背景画像だけ別に用意して、あとは同じリソースを画面サイズから相対位置で配置するように切り替え。

iPad対応もほぼ同様。iPad版は実は実装上はiPhone版より画面が狭いです。反面、非常にボタンが押しやすくなっていて割と別ゲーに。

Retina iPad用にはSplash画像を別途用意しただけで特に何もしていません。意外と見た目は気にならない感じ。

Android

Android対応は初だったので、動けばいいや的な感じで、あまり機種ごとの最適化は行わずに、一律iPhone3.5インチのNon Retina版と同じ表示になるように作りました。Androidはこの辺が大変ですね。

ビルドにはGradleを使用。NDKの対応にはこちらの記事が大変参考になりました。

gradleでCocos2d-x3.0alpha1のアプリをbuildしてAndroidのapkを作成する - きょこみのーと

古い機種だと重たいという話も聞こえており、今後の課題ですね。

ちなみに、開発中は幻のOUYA版が存在してましたが、コントローラーへの対応が面倒だったので、リリースは見送りました。

Jenkins + TestFlight/DeployGateで高速テストプレイ

ゲームの質は、開発者が如何に遊びまくったかが全てなので、テストプレイ超重要です。

今作では、Jenkinsを用いて、コミットと同時に、各プラットフォーム向けに自動ビルドをしておりました。

f:id:gigi-net:20140323105404p:plain

コミッタはiPhone 4.0インチ環境で開発するだけで、あとはチームメンバーが勝手に確認したりテストしたりしてくれるので、非常にスピード感がありました。

今回のようなクロスプラットフォームの開発では、いちいち全機種ビルドして確認してられないので、CIは必須な感じがしますね。

gitは共通言語

f:id:gigi-net:20140323110020p:plain

ゲーム開発はプログラマの仕事が増えると大変なので、gitを共通言語にして、皆がリポジトリにコミットできる環境を作るべきだと感じました。

例えばデザイナーに「画像が差し替わったのでDropboxに上げましたー」とか言われると、わざわざ持ってきて、ファイル名を変えて、差し替えたのか差し替えてないのかわからずに面倒なことになります。

今回はgitを使えるメンバーが多かったので、その辺が非常に楽でした。プログラマ以外のデザイナーやコンポーザーもgitを使うべき。

辛かったところ

逆に今回の開発環境で上手く行かなかったところについて。

SpriteStudio for cocos2d-xが辛い

f:id:gigi-net:20140323111825p:plain

今回は演出を少しでもリッチにするために、アニメーション作成にSpriteStudioというソフトウェアを使用していました。

SpriteStudioはGGJのスポンサーも努めており、インディー開発者向けに、プロユースの物と同等の機能を持ったモノが無償で提供されています。ありがたい!

「超汎用」データ制作 あらゆるゲーム開発シーンに対応。2Dスプライトアニメーションデータ作成ツール「OPTPiX SpriteStudio」 | ウェブテクノロジ

しかも公式でもcocos2d-xをサポートしていたため、今回導入してみたのですが、標準で用意されてるものを再実装していたり、インターフェイスが独特だったりと、ライブラリのできがあまりよろしくなくて大変でした。

補助ツール・ライブラリ群・サンプルのダウンロード | OPTPiX Help Center

リリース前だったので、当然3.0には対応しておらず、動くように書き直したのですが、アルファブレンディングなどがちゃんと動かずに、そのまま使えない自体が多発。

結局、SpriteStudioで作ってもらったアニメーションを目コピーして、コードで実装したりしていました。

さらに、現在Mavericksで動かないのも辛いところ。わざわざVM立ち上げて作業してました。

ライブラリも1000行ぐらいあって、読み解いたり修正が大変な感じだったので泣く泣くそのまま使用。今後とも使っていくのであれば、しっかりと書き直したい感じですね。

とはいえ、今回のように趣味で開発する場合は、SpriteStudioは無償で使えるという点でかなり魅力的。

お金があるのであれば、標準でサポートしているSpineなどを買うのが良いと思いますが・・・・・・。

CocosDenshion::SimpleAudioEngineが辛い

cocos2d-xの音周りは、SimpleAudioEngineってのがついているんですが、必要最低限の機能しかついていない上に、なぜか実装がいろいろと酷い

などなど。

そのため、ゲーム途中でアプリをバックグラウンドに送ったときの音周りの挙動などに苦労しました。

前作の『VOXCHRONICLE』はサウンドを動的に操作する必要があったので、自前でOpenALガリガリ書いていたため、音周りの混乱はありませんでした。iOS版のみのリリースであったことも幸いして、クロスプラットフォームを意識せずに設計できたのも楽な点。

もう少し時間があればガッチリと手を入れていきたいところ。結構基本的な機能も揃っていないので、割とみんな困ってると思うんですけど、みなさまどうしてるんでしょうね。何かご存じでしたら教えてください。

ビルド時間が長すぎて辛い

cocos2d-x 3.0は2.xに比べて、かなりビルド時間が長くなっているように感じました。

特にiOS版はObjective-C++を使っている関係で、ビルドがタダでさえ遅いのに加え、本プロジェクトではboostを使っていたため、さらにビルド時間が長くなりました。

特にMacBook Airでは、クリーンビルドだと5分以上待たされることもザラ。48時間しかないGGJでは致命的な感じでした。

レベルデザイン

『Super Hexagon』を意識しまくった

f:id:gigi-net:20140323110707p:plain

このゲームは、『Super Hexagon』というインディーゲームに強くインスパイアされています。

『Super Hexagon』の中毒性を踏襲すべく、以下のような仕組みでレベルデザインを行いました。

  • 波の排出や、数秒間待機するなどの命令をOrderと呼ぶ
  • 各Orderには排出開始位置や、波の色、Easingなどが設定されている
  • 一連のOrderのまとまりをPatternと呼び、レベル毎にPatternを何種類か定義し、ランダムに出現順を変えている

このように、毎回適当に波を出すのではなく、ある程度のパターンをデザインし、ランダムで出すような仕様になっています。

これによって、一見突破不可能な波であっても、何度も遊ぶことで記録が伸びていき、中毒性の高いゲームに仕上がっています。

レベルデザインについては様々な声を頂いています。ありがとうございます。

レベルデザインや、波のエミッター周りの実装は、『Super Hexagon』を最高レベルまでやり尽くした[twitter:@tcptr]さんが作り込んでくれたので本当に良いモノができました。

ちなみに、だいたい1時間ぐらいでエンディングを見れるように調整してみたのですが、概ねそんな感じになっているようで何よりです。

タダでもここまでできる!

最近はゲーム開発用の環境もだいたいはOSSで揃うようになってきたので、お金をかけずにここまでの開発が個人でできます。良い時代ですね!

他の人の開発裏話

デザインや音楽などにも、細かなところに工夫が生きています。ご興味のある方は是非。

ゲーム開発したい方は

f:id:gigi-net:20140323111018p:plain

札幌ゲーム製作者コミュニティKawazでは、プロアマ交えて楽しくストイックにインディーゲーム開発をしています。是非ご参加ください!

おまけ

ありがたい

*1:最初はTestFlightを使っていたが、サービス終了に伴い移行した

波をかわして曲を紡ぐ、カジュアル中毒ゲー『Wave Weaver』をリリースしました

ダウンロードはこちらから!(無料)

for iPhone / iPad

https://itunes.apple.com/jp/app/waveweaver/id841280819?at=10l8JW&ct=hatenablog

iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 WaveWeaver

for Android

Android app on Google Play

Wave Weaver - Android Apps on Google Play

どんなゲーム?

やってくる波と同じ色を選び続けて、ひたすら波を避けるゲームです。

簡単操作ですが、なかなか手応えのある調整になっています。

1レベルはわずか15秒。レベルが上がるに従って、だんだんと難易度が上がっていきます。

f:id:gigi-net:20140320060919p:plain

f:id:gigi-net:20140320060915p:plain

ユーザーの反応

攻略

最初は始めて5秒ぐらいで死んでしまうでしょう。しかし、波の出現パターンは完全なランダムではなく、ある程度は一定です。

そのため、一見すると困難に見える場所でも、何度かやれば必ず突破できます。続けていればスコアがみるみる伸びていくのを実感できるでしょう。

画面下方のカラーバーは、スライドでも動かすことができますが、断然タップ操作がオススメ!遊びやすいスタイルでプレイしてみてくださいね!

そして、航海の果てに待つものとは・・・・・・

f:id:gigi-net:20140322093425p:plain

開発の話

ようやっとリリースできました!

このゲームは、今年1月末に行われたGlobalGameJamという48時間でゲームを作るハッカソンでプロトタイプが製作されました。

f:id:gigi-net:20140320060630j:plain

f:id:gigi-net:20140320060637j:plain

f:id:gigi-net:20140320060657j:plain

WaveWeaver | Global Game Jam

僅か48時間で、ゲームの核となる機能はできあがっていたのですが、その後、レベルデザインを何度もやり直したり、エンディングなど、演出を強化したりと、リリースまでなかなか時間が取られてしまいました。

GGJ当日の製作の様子はgihyo.jpに掲載されているイベントレポートをご覧ください!

ソーシャルゲーム,ボードゲーム,ファミコンまで!? Global Game Jam 2014参加レポート:レポート|gihyo.jp … 技術評論社

技術的な話

このゲームは、cocos2d-x 3.0のβ版で実装されました。おそらく日本国内最速レベルのプロダクトかと。

そして、前作『VOXCHRONICLE』はiPhone向けにしか提供しなかったのですが、今作はiPadAndroidにも対応。慣れないクロスプラットフォーム開発となりました。

シンプルなゲームだったのが幸いし、移植は割とすんなり行えました。Androidの開発ノウハウも得られてよかった。

開発の詳しい話は、後日別記事にまとめたいと思うのでお楽しみに!

まとめ

とても難しいゲームですが、短くテンポよく遊べ、音や演出も気持ちいいので、なかなか中毒性のある作品に仕上がりました。60秒突破後のエンディングは必見です。

ぜひクリアしてみてくださいね!

for iPhone / iPad

https://itunes.apple.com/jp/app/waveweaver/id841280819?at=10l8JW&ct=hatenablog

iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 WaveWeaver

for Android

Android app on Google Play

Wave Weaver - Android Apps on Google Play

『VOXCHRONICLE』も好評配信中

行動と音が同期する、コマンド選択型奥スクロールRPG、『VOXCHRONICLE』も大好評配信中!

是非遊んでね。