つくるブログ 物は試しで作ってみる。認められなくても作ってみる。自作のLineスタンプ、アプリなどを随時公開。 2016-09-28T00:11:38+09:00 numa56 Hatena::Blog hatenablog://blog/10328749687176083012 くだらないスマホゲーム作ってみました hatenablog://entry/10328749687186599407 2016-09-28T00:11:38+09:00 2016-09-28T00:15:29+09:00 はじめに スマートフォンゲーム(iOS、Androidアプリ)を今回は作ってみようと思います。作った経験は初めてではありません。というのも私はエンジニアとして働いた経験があります。今は違いますが。 その経験を生かし、と言っても今回は現役のエンジニアさんにご協力いただき作ってみたいと思います。 使うツールはこれドン! デザインは以下で行いました。 japan.unity3d.com www.minddesk.com Pixen Matt Rajca Graphics & Design $19.99 企画 まずは企画ですが、ゲームを作る上で以下を制約としました。・システムはすごく簡単で工数がかから… <h3>はじめに</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A1%BC%A5%C8%A5%D5%A5%A9%A5%F3">スマートフォン</a>ゲーム(<a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a>アプリ)を今回は作ってみようと思います。<br />作った経験は初めてではありません。というのも私はエンジニアとして働いた経験があります。今は違いますが。</p> <p>その経験を生かし、と言っても今回は現役のエンジニアさんにご協力いただき<br />作ってみたいと思います。</p> <p>使うツールはこれ<br />ドン!</p> <p><iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Unity: 統合ゲーム開発環境" src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fjapan.unity3d.com%2F" frameborder="0" scrolling="no"></iframe>デザインは以下で行いました。</p> <p><cite class="hatena-citation"><a href="http://japan.unity3d.com/">japan.unity3d.com</a></cite></p> <p><iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Qubicle Voxel Editor for Mobile Game Development, Modding, 3D-Printing" src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fwww.minddesk.com%2F" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="http://www.minddesk.com/">www.minddesk.com</a></cite></p> <div class="itunes-embed freezed itunes-kind-mac-software"><a href="https://itunes.apple.com/us/app/pixen/id525180431?mt=12&amp;uo=4&amp;at=10l8JW&amp;ct=hatenablog" target="_blank" rel="nofollow"><img class="itunes-embed-image" title="Pixen" src="http://cdn.image.st-hatena.com/image/scale/d405bec48d1f8fbd7f9683152a2bf564a50aecac/enlarge=0;height=200;version=1;width=200/http%3A%2F%2Fis3.mzstatic.com%2Fimage%2Fthumb%2FPurple71%2Fv4%2F14%2F30%2Fc6%2F1430c6d9-d058-c27d-db80-855d0bdd2446%2Fsource.icns%2F100x100bb.png" alt="Pixen" /></a> <div class="itunes-embed-info"> <p class="itunes-embed-title"><a href="https://itunes.apple.com/us/app/pixen/id525180431?mt=12&amp;uo=4&amp;at=10l8JW&amp;ct=hatenablog" target="_blank" rel="nofollow">Pixen</a></p> <ul> <li class="itunes-embed-artist">Matt Rajca</li> <li class="itunes-embed-genre">Graphics &amp; Design</li> <li class="itunes-embed-price">$19.99</li> <li class="itunes-embed-badge"><a href="https://itunes.apple.com/us/app/pixen/id525180431?mt=12&amp;uo=4&amp;at=10l8JW&amp;ct=hatenablog" target="_blank" rel="nofollow"><img src="//cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-macappstore@2x.png" alt="" width="80px" height="15px" /></a></li> </ul> </div> </div> <p> </p> <h3>企画</h3> <p>まずは企画ですが、ゲームを作る上で以下を制約としました。<br />・システムはすごく簡単で工数がかからない<br />・コレクション要素があり、繰り返し遊びたくなる<br />・マネタイズは以下のクロッシーロードを参考に動画広告を入れる</p> <p><a href="https://itunes.apple.com/jp/app/kurosshirodo/id924373886?mt=8">クロッシーロードを App Store で</a></p> <p><span style="color: #3d3f44; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;">・デザインは世界受けしそうなものにする</span></p> <p> </p> <p>こんな感じで数枚の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%D7%A5%EC%A5%C3%A5%C9%A5%B7%A1%BC%A5%C8">スプレッドシート</a>を作りまとめておく。<br />作るゲームは「握り寿し」「軍艦」「海苔巻き」の3種類のネタを瞬間判断でのせていくゲームです。コインを集めてガチャを回し「寿しコレクション」ができるようにもします。</p> <p><img class="hatena-fotolife" title="f:id:numa56:20160927235036p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/numa56/20160927/20160927235036.png" alt="f:id:numa56:20160927235036p:plain" /></p> <p> </p> <h3>制作</h3> <p>いよいよ制作です。一ヶ月くらいで完成させようかと思っていましたが、意外と時間がかかりました。協力していただいたエンジニアさん含め私も忙しく時間が取れなかったのもありますが2〜3か月くらいかかったかと。</p> <p>ツール系のアプリケーションとは違い以下に時間がかかったかと思います。</p> <ul> <li>ゲームプレイの手触り感</li> <li>ゲーム内のアニメーション</li> <li>UI遷移時のアニメーション</li> </ul> <p>仕組み自体はすぐにできても、ゲームっぽく動かすところにコストがかかることがわかりました。とはいえやらないとチープになります。本当世の中に量産されている無料アプリでさえ大変なんだなあと分かりました。</p> <p> </p> <h3>マネタイイズ</h3> <p>Unity Adsを使いました。コインを入手するために動画を見なくてはいけないという仕様です。</p> <p><iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Unity Ads" src="//hatenablog-parts.com/embed?url=http%3A%2F%2Funityads.jp%2F" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="http://unityads.jp/">unityads.jp</a></cite></p> <p> </p> <h3>完成!</h3> <p>そして無事に完成しました。ストアにこんな感じに並んでます。</p> <p><img class="hatena-fotolife" title="f:id:numa56:20160928000530p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/numa56/20160928/20160928000530.png" alt="f:id:numa56:20160928000530p:plain" /></p> <div class="itunes-embed freezed itunes-kind-software"><a href="https://itunes.apple.com/jp/app/sushi-rush-o-shou-sinoakedogemu/id1141697465?mt=8&amp;uo=4&amp;at=10l8JW&amp;ct=hatenablog" target="_blank" rel="nofollow"><img class="itunes-embed-image" title="Sushi Rush - お寿司のアーケードゲーム" src="http://cdn.image.st-hatena.com/image/scale/abe56aeba395b94eb26514dab1647b7aa40a07cb/enlarge=0;height=200;version=1;width=200/http%3A%2F%2Fis3.mzstatic.com%2Fimage%2Fthumb%2FPurple71%2Fv4%2F5a%2F3e%2F7e%2F5a3e7ebd-3afc-68ea-d40a-aedabd9e1ce1%2Fsource%2F100x100bb.jpg" alt="Sushi Rush - お寿司のアーケードゲーム" /></a> <div class="itunes-embed-info"> <p class="itunes-embed-title"><a href="https://itunes.apple.com/jp/app/sushi-rush-o-shou-sinoakedogemu/id1141697465?mt=8&amp;uo=4&amp;at=10l8JW&amp;ct=hatenablog" target="_blank" rel="nofollow">Sushi Rush - お寿司のアーケードゲーム</a></p> <ul> <li class="itunes-embed-artist">KEISUKE NUMATA</li> <li class="itunes-embed-genre">ゲーム</li> <li class="itunes-embed-price">無料</li> <li class="itunes-embed-badge"><a href="https://itunes.apple.com/jp/app/sushi-rush-o-shou-sinoakedogemu/id1141697465?mt=8&amp;uo=4&amp;at=10l8JW&amp;ct=hatenablog" target="_blank" rel="nofollow"><img src="//cdn.blog.st-hatena.com/images/theme/itunes/itunes-badge-appstore@2x.png" alt="" width="60px" height="15px" /></a></li> </ul> </div> </div> <p> </p> <p><iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Sushi Rush - お寿司のアーケードゲーム - Google Play の Android アプリ" src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.yustudio.sushi%26hl%3Dja" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="https://play.google.com/store/apps/details?id=com.yustudio.sushi&amp;hl=ja">play.google.com</a></cite></p> <p>みなさん、よろしければダウンロードしていただけたらと思います。<br />くだらないですが頑張って作りました、宜しくお願い致します!</p> numa56 懲りずにまたLineスタンプ作りました。(2回目) hatenablog://entry/10328749687178970593 2016-08-13T22:22:16+09:00 2016-08-13T22:28:34+09:00 前回、下手くそだけど Lineスタンプを始めて作ったという記事を書きました。以下が前回の記事です yarebadekiru.hatenadiary.jp 頑張って作ったんだけどまあ売れない。だけど売れないからといってめげません。タモリさんも続けることが大事だって言ってましたし、作ることはやめません!笑 それで作ったLineスタンプがこれ! store.line.me 前回製作したラインスタンプは新しさが全くなかったんですね。今回はその反省を生かして、今までなかったようなものをつくってみました。具体的には、3DのVOXELのデザインにしてみました。理由は3DのVOXELで作られたカジュアルゲーム… <p>前回、下手くそだけど Lineスタンプを始めて作ったという記事を書きました。以下が前回の記事です</p> <p><iframe class="embed-card embed-blogcard" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" title="下手くそだけどLineスタンプ作りました。うまのシェリー。 - つくるブログ" src="http://yarebadekiru.hatenadiary.jp/embed/2016/07/26/011715" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="http://yarebadekiru.hatenadiary.jp/entry/2016/07/26/011715">yarebadekiru.hatenadiary.jp</a></cite></p> <p>頑張って作ったんだけどまあ売れない。<br />だけど売れないからといってめげません。<br /><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BF%A5%E2%A5%EA">タモリ</a>さんも続けることが大事だって言ってましたし、作ることはやめません!笑</p> <p>それで作ったLineスタンプがこれ!</p> <p> </p> <p><img class="hatena-fotolife" title="f:id:numa56:20160813214626p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/numa56/20160813/20160813214626.png" alt="f:id:numa56:20160813214626p:plain" /></p> <p><iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="VOXEL ZOO 3Dの動物たち - クリエイターズスタンプ" src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fstore.line.me%2Fstickershop%2Fproduct%2F1297908%2Fja" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation" style="font-style: normal; font-size: 14.4px; opacity: 0.75; display: block; color: #3d3f44; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="color: #999999; opacity: 1; font-size: 11.52px;" href="https://store.line.me/stickershop/product/1297908/ja">store.line.me</a></cite></p> <p>前回製作したラインスタンプは<strong>新しさ</strong>が全くなかったんですね。今回はその反省を生かして、今までなかったようなものをつくってみました。<br />具体的には、3DのVOXELのデザインにしてみました。<br />理由は3DのVOXELで作られた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AB%A5%B8%A5%E5%A5%A2%A5%EB%A5%B2%A1%BC%A5%E0">カジュアルゲーム</a>の「クロッシーロード」が全世界で流行って、デザイン性も注目されてたんですね。</p> <p>まとめると</p> <p><span style="font-size: 150%;">世界である程度流行っているVOXELデザイン </span></p> <p><span style="font-size: 150%;">× </span></p> <p><span style="font-size: 150%;">ラインスタンプにはない新しさ</span></p> <p>という一応市場を意識した感じで作りましてた。</p> <h3> </h3> <h3>作り方</h3> <p>どうやって作ったかというと、以下のツールを使いました。</p> <p><iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Qubicle Voxel Editor for Mobile Game Development, Modding, 3D-Printing" src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fwww.minddesk.com%2F" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="http://www.minddesk.com/">www.minddesk.com</a></cite></p> <p>このQubicleというツールは本当にすごい。<br />簡単にVOXELの3Dモデルが作れます。<br />こんな感じで大量に動物のモデルを作成しました。</p> <p><img class="hatena-fotolife" title="f:id:numa56:20160813215804p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/numa56/20160813/20160813215804.png" alt="f:id:numa56:20160813215804p:plain" /></p> <p>でこのツールの便利なところはFBXなど3Dモデルでも書き出せますが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/png">png</a>もサイズ指定で書き出せるんですね。</p> <p><img class="hatena-fotolife" title="f:id:numa56:20160813220545p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/numa56/20160813/20160813220545.png" alt="f:id:numa56:20160813220545p:plain" /></p> <p>書き出した<a class="keyword" href="http://d.hatena.ne.jp/keyword/Png">Png</a>をそのまま申請すればOKです。<br />上記Qubicleはまとめて書き出す機能はないようで、一つずつ書き出す必要があるので少し大変です。</p> <p> </p> <h3>どの程度売れたか?</h3> <p>結論から言うと、ぜんぜん売れませんでした。<br />理由をなんとなく考えましたが、</p> <ul> <li><span style="line-height: 1.5;">世界である程度流行っているVOXELデザイン<br /></span>→(否)日本ではそんなに流行ってない</li> <li><span style="line-height: 1.5;">ラインスタンプにはない新しさ<br /></span>→<span style="color: #3d3f44; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;">(否)</span>新しいけどLineスタンプ向きじゃない(表情とか作りにくい、豊かな表現しにくい)</li> </ul> <p>結構今回<span style="color: #333333;">は頑張って作りました。2〜3週間ほどかけました。</span>ただ<span style="color: #d32f2f;">全く売れない</span>。辛い辛すぎる。<br />しかし諦めません。また何か作ったらこのブログで報告します。<br />いつか他のブログでやっているような<span style="font-size: 150%; color: #d32f2f;">収益報告</span>的なのをできるように頑張ります。</p> <p>次はゲームを作る予定です!</p> <p> </p> numa56 下手くそだけどLineスタンプ作りました。うまのシェリー。 hatenablog://entry/10328749687176089165 2016-07-26T01:17:15+09:00 2016-07-26T01:17:15+09:00 Lineスタンプを下手くそだけど作ってみました。 私はデザイナーでもなければ、絵をきちんと学んだことすらないのですが、Lineスタンプ作ってみました。完全手書きです。デザインは苦手だけど、Lineスタンプを作ってみたい、という方の励みになればなと! 以下が公開中のスタンプ。 store.line.me 作り方 それでどうやって作ったのかというと、このサイトを参考にしました。 LINEスタンプを作ろう | Adobe Illustrator CC チュートリアル Capture CCというアプリがとにかくすごい! 手書きしたものを、illustratorのパスに変換してくれるツールです。ざっとこ… <p>Lineスタンプを下手くそだけど作ってみました。</p> <p>私はデザイナーでもなければ、絵をきちんと学んだことすらないのですが、Lineスタンプ作ってみました。完全手書きです。デザインは苦手だけど、Lineスタンプを作ってみたい、という方の励みになればなと!</p> <p>以下が公開中のスタンプ。</p> <p><img class="hatena-fotolife" title="f:id:numa56:20160726005540p:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/numa56/20160726/20160726005540.png" alt="f:id:numa56:20160726005540p:plain" /></p> <p><iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="うまのシェリー - クリエイターズスタンプ" src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fstore.line.me%2Fstickershop%2Fproduct%2F1281593%2Fja" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="https://store.line.me/stickershop/product/1281593/ja">store.line.me</a></cite></p> <hr /> <h4>作り方</h4> <p>それでどうやって作ったのかというと、このサイトを参考にしました。 </p> <p><a href="https://helpx.adobe.com/jp/illustrator/how-to/create-line-stamp.html">LINEスタンプを作ろう | Adobe Illustrator CC チュートリアル</a></p> <p>Capture CCというアプリがとにかくすごい! 手書きしたものを、<a class="keyword" href="http://d.hatena.ne.jp/keyword/illustrator">illustrator</a>のパスに変換してくれるツールです。ざっとこんな手順で作りました。</p> <ol> <li><span style="line-height: 1.5;">画用紙にマジックペンで手書き</span></li> <li><span style="color: #3d3f44; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;">Capture CCで<a class="keyword" href="http://d.hatena.ne.jp/keyword/illustrator">illustrator</a>に取り込み</span></li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%E9%A5%B9%A5%C8%A5%EC%A1%BC%A5%BF">イラストレータ</a>ーのライブペイントツールを使って塗り</li> <li>書き出し</li> </ol> <p>これでOK! 期間はだいたい2、3日でできました。</p> <hr /> <h4>どのくらい売れた?</h4> <p>気になる売上ですが、、</p> <p>ほぼ<span style="font-size: 150%; color: #ff5252;">ありません</span>笑。1か月くらい販売してみて500円程度です。しかも売れたのは初日と二日目のみです。おそらくマーケットに公開された日は<strong>NEW</strong>の項目に一時的に出るため、人目に触れるからでしょう。その後は売上に音沙汰なし。</p> <p> </p> <p>しかし全然めげてはいません。厳しい世界なのは重々承知しています。</p> <p>ものづくりはヒットするまでやめません!(キッパリ)次は何作ろう。</p> <p> </p> numa56