KUMAGATA-DENKYU

つくるのがすきなくまによる開発ブログ

動画に簡単にVFXがつけられるHitFlim Express $149が期間限定で無料だぞ


Compositing concepts - getting started with Express ...


↓ダウンロードはここから
https://hitfilm.com/express/free


中身はシンプルなAfter Effectsという感じ。
モーショントラッキングや平面トラッキング機能がついてて、超能力ごっことかサイバーごっこによさげです。

ニコニコ動画に上げるのにWindowsムービーメーカーしか持って無い・・・みたいな人はダウンロードしとくと幸せになれそう。

無料期間は2/4まで。



2D motion tracking basics - YouTube

プレイヤーがレベルアップすると周囲の敵も強くなるゲームについて

発端

@snapwithさんの話がTLに回ってきた。
自動難易度調整について色々思うところがあるので、ここらで考えをまとめとこ。

基本的に出題者側のチート

テストに例えると、「おまえらー!ここが試験に出るからなー!」と言われたからちゃんと勉強してきたというのに別の難しい問題を出されたら嫌な気分になるという感じ。

それはプレイヤーの期待を裏切っているということ。

基本的には問題を作る側の事情でしかなく、やむを得ない事情がない限り使わない方がよいと考える。
工数的な観点で自動で難易度調整したいという場合も、事前に固定の設定値をプログラムやらエクセルやらで作るべき。

では、そのやむを得ない事情とは。先人の知恵をまとめてみる。

やむを得ない事情と具体例

永パ/長時間プレイ防止

・じゃじゃまるくんの火の玉とか
永パ防止方法は往年のアーケードゲームでいっぱいあるよね。
早くなったり敵が増えたりヤバイのが出たり。

・シューティングのランクシステム
スコアや残機で難しくなる。わざとやられるという攻略まである。
バトルガレッガとかアイテム取ったりボタンを連射するだけで難しくなるので、ZENの精神での安全運転プレイスタイルが要求される。謎。

マルチシナリオなので手で難易度設定できない

ロマサガ
戦闘回数=敵の強さ≒ストーリー進行

オブリビオン
プレイヤーメイン能力の高さ=敵の強さ

中だるみ防止

タクティクスオウガ
敵は一番強い味方のレベルに合わさる。
だから味方のレベルを均一にしましょう、ってそんなの知るか!

FF8
自分のレベルで自動で敵が強くなる。
馬の首に釣り竿つけてぶら下げるニンジン感ある。

ペイアウト調整

エターナルナイツ
コインが出すぎると難易度が上がるぞ。運営の懐とプレイヤーとの熾烈な戦い。

別のアプローチとか

・MMOよくある系
相手が弱いと経験値が0クラスまで減る。
見返りがなくなるというアプローチで中だるみを防止。
レベル差があると一緒に遊べないという問題はそのまま。

デススマイルズの打ち返しモード
プレイヤーが上手いと別の固定難易度というか、別ゲーへ遷移するアプローチ。
これぐらいならプレイヤーは認知できるのでアリ。

ディスガイアのアイテム界
最初に選択したアイテムのレアリティでダンジョンの難しさを変えるアプローチ。
選んだのはプレイヤーなので、難易度が難しくても納得できる。
マギノビとかもこれかな。

まとめ

レベルデザインはユーザのゲームへの学習のためにある。

Bダッシュジャンプを使わないと飛び越えられない穴があるレベルでは、誰もが嫌でもBダッシュジャンプを覚えるし、その後のレベルはその技術を発展させたレベルが提供できるというわけ。
何を学習させたいかってのが常にテーマになってくるはずで、繊細に人の手で作るのが基本だよね。

そんな大事なレベルデザインを自動でっていうのは、作る側の事情でしかないので基本的にはやめたほうがいい。でもやむを得ない事情でやるなら、そうなるってことはプレイヤーに明示したほうがよさそう。

自動生成ダンジョンとかたくさんコンテンツを提供するという目的で使うのはとてもよいと思う! でもそれはプレイヤーのレベルではない指標で生成し、最初にプレイヤーに選択させるのがいいと思う。


くまくま

もふくまについて

略歴

にんげんに追われてプルプルする。高校中退。

 ↓

引き篭もりを契機にくま人間になることを決意。ついでに大学進学。

 ↓

引き篭もりつつもなぜか彼女ができる。

 ↓

研究室のゼミとか1回しか出なかったけどなぜか大学卒業。

 ↓

その後も

「微妙な研究開発がなぜか学会で賞をもらう」

「1回しか就職活動していないのになぜかすごいところに受かる」

などの謎の幸運を繰り返しいまに至る

活動

小学校の作文でゲームクリエイターになりたいとか書いてしまったために死ぬまでゲームを開発するハメに

・ブラウザ、スマートフォン用ゲーム開発

Webサービス開発

・ゲームの曲をつくる

・2匹のこぐま育成

・かわいいけどワガママな嫁の家事手伝い

要するに

は~くまくま

つくったの

スペースくま

https://itunes.apple.com/jp/app/space-kuma-hungry-bear-space/id532903481?mt=8

f:id:mofukuma:20140122015232p:plain

知育アプリ スペースくまABCれっしゃ

https://play.google.com/store/apps/details?id=jp.grrr.kumaden.abc

f:id:mofukuma:20140122022831p:plain

マミ☆まう

http://mofukuma.com/html/mamimau

f:id:mofukuma:20140122014327p:plain

ほむ☆なげ

http://mofukuma.com/html/homunage

f:id:mofukuma:20140407113518p:plain


jQuery.SmartPopover.js

http://mofukuma.github.io/jquery.smartpopover/

f:id:mofukuma:20140407111553p:plain


うた

まめ☆でん

スペースくまのうた

きょく


10日間まったく会話せずひとりお正月ハッカソンして得た教訓まとめ

f:id:mofukuma:20140109225031j:plain

家族は実家に帰ってまったりと過ごす予定の中、くまは作りたいものがあったので、一人自宅に残り正月ハッカソンしてたのです。

10日間、人とまったく会話せずに部屋に篭って・・・。


ここまで声を発しない生活が続くとなにが起こるかというと、本日久々の知り合いとの会話で、 「わあ、こんなに人との会話って嬉しいものなんだ!」って感動するレベル。人間は社会性をもつ生き物なのだと遺伝子レベルで思い知らされます。

ではでは今回の成果報告と、この偏った生活を送る上で勉強になったことをまとめます。

結論からいくと、今回は設定した目標まで完成させられませんでした。無念だくまー。


つくってたの

ブラウザ上で簡単にiPhoneアプリやゲームが作れるWebサービス「くまじん(仮)」を作っています。いわゆるjsdo.itやcodepen.ioなどのオンブラウザ開発系のサービスです。

f:id:mofukuma:20140108232121p:plain

作ったシーン・書いたコードのリアルタイムプレビューとか。


いまあるブラウザ開発系サービスの機能に加えて、新しく開発したオープンソースKmagine.jsを使うことによって、画像のD&Dでの配置やシーン管理などのリソース重視の機能を提供します。

Kmagine.js



f:id:mofukuma:20140109225045j:plain

ドラッグドロップでアップロード・お手軽配置、シーン管理はUnityっぽいツリー構造。既存のウェブに重ねて表示できるのが面白いところ


また、HTML5 Canvas不使用というコンセプトにより既存サイトとの相性がよく、モバイルファーストなフラッシュレスティザーサイトにおいて現在主流の実装方法( CSS3 transform )で作れます。

フラッシュレスティザーサイトの一例: ファミコンリミックス ※外部サイトです


さらに、コードを変えずにそのままiOSアプリとして動かす技術を提供します。 これは以前に実験的に作った「スペースくま」というiOSゲームの技術をさらに発展させたものです。 ネイティブ並のアニメーションが期待できます。

スペースくま


残作業

もうすこしだったのですが、 残り作業、TOPページデザインとシナリオテストが残ってます。ぐふ・・・。

というわけで反省会として、なぜ目標を達成できなかったかを考えてみます。


教訓① ちゃんと使えIDE

今回のWebサービスではGoogle Apps Engineを採用してます。理由は以下のとおり。

  • 画像ストレージの取り回しがとても楽で、維持コストも安い。
  • PythonPython萌え。
  • DataStore+memcache調教。遅い。結果整合性。うまく作れば早い。楽しい

で、いつもSublime Textのviモードで開発しているし、Google Apps Engine用に便利に使えるIDEってよく知らなかったし、調べたりセットアップするのも時間かかると思ってIDEを使わずにやってたのですが、さすがにデバッグとかリファクタリングで限界を感じて最後のほうでPyCharmを導入しました。

1年99ドルってちょっと高いけど、最初から金で買える効率は率先して買うべきでした。

そりゃやっぱり有料かつ高機能なIDEを全力で活用したほうがいいよね。


教訓② ちゃんと寝よう夜

あまり寝ないで作業するとプログラムはまあまだいいですけど、レイアウトとか絵をイメージする能力はがくっと落ちる気がします。

予定していた作業なのに、全然レイアウトが思いつかなくて困りました。

やっぱり寝ないとダメだとわかっていながらプログラムしてると寝付けなくなるんですよね。気をつける。


教訓③ 認証から用意せよ

認証の仕組みは仮でつくっておいて、もっとも大事なコア部分から作っていたのですが、あとで認証の仕組みを変えた時にセッションとかユーザデータの持ち方を変えたくなっちゃって、それで結構色々変えるところが多かったりして時間を取られちゃった。

コアなところからやるのはいいと思うんですが、最低限、認証のところは事前用意して変えないほうがよかったです。


教訓④ Jadeはよいものだ

Preprosっていうフリーソフトを愛用してます。

f:id:mofukuma:20140109225435j:plain

これはHTMLを簡単に書けちゃうメタ言語であるJadeやSlim、 CoffeeScript、SCSSなどを監視して自動コンパイルしてくれるすぐれもの。

さらにすごいのは「ダウンロードしてダブルクリックしてインストールするだけ」で動いちゃうところ。 ブラウザのオートリフレッシュとかPNGの最適化とかもできるし最強です。

で、くまはJadeを使っているのですが、これはやはりとっても早く書ける。早く修正できる。 インデントで構文作る系はviモードと非常に相性がいい・・・。 Slimとちがって括弧まで排除してない分、見通しが良いし。

Jade、おすすめです。


教訓⑤ CoffeeScriptも使えばよかった

  • 文法に若干のキモさを感じる(functionが->矢印とか)
  • コンパイル後のデバッグが大変そう、エラー行がどこかわからなさそう
  • 他にも色々なメタ言語でてて目移りする(DirtとかHaxeとか)

などなどの理由でCoffeeScript使うタイミングを逃し続けてやってなかったんですが、 出来上がったイマイチで行の多いコードを見て、やっぱり使うべきだったクマ・・・と後で思いました。

デメリットもありますが、短く簡潔に書けるってのは時短と保守にはいいですよね。 どういう風にJSに展開されるのかもJavaScriptがちゃんと判っていれば明快だし。 Preprosで即時コンパイルされるし。

本当に、これを使ってたら間に合ってたかも。 次からは導入しよう。


教訓⑥ RAMはよいものだ

といっても主記憶装置じゃなくて、Daft Punk のアルバム Random Access Memoriesのことです。


Get Lucky (Official Audio) - YouTube

「One More Time」とか、音楽シーンを作っちゃうくらい影響を与える音作りをすることで有名なロボの人たちです。

今回はつくるのに5年かかったと書いてましたが、一曲一曲がとにかくすごい。 中でもフュージョン+ボコーダーな音が新鮮で気持ちよすぎる。

まったく聴き疲れしないし、懐かしくも新しい音に癒やされます。

作業BGMにオススメ。

ずっと聴いていたので、聴いていない今もずっと頭の中でループしてます・・・・。


教訓⑦ でもラップは聴くな

TLに流れてきたニコニコ動画エミネム先生が教えてくれるシリーズのこの動画を見てしまったのですが、その後、脳内で彼のライムがループして困りました。・・・これは気が散る系の脳内再生だ!やめてくれ!

洗脳されるくま


まとめ

あのときああしていれば・・・最初からこう作っておけば・・・と思うことばかりですが、なんだかんだ集中してほぼ完成まで漕ぎ着けたのでよしとし、次回に活かそう・・・。

そもそもとしてnode.js+MySQLで作っておけばよかったかも、と思いました。でも、よさげなPaaSがどれかわからなくて踏み出せなかった。heroku+AWSの各種サービスAPIかな。

極端な生活をすることによって、やっぱり人に会うことって嬉しいことだなあと再確認できたのはよかったかも。

完成までがんばるくまくま

一部で話題のEテレ亀田音楽専門学校を見たのでまとめ

椎名林檎とかのプロデューサーが JPOPの曲作りテクを教えてくれるEテレ番組をみた。

忘れそうなので自分用メモ。

四七抜き音階編

4(ファ)と7(シ)を抜いた日本の音階。

これでメロディを作ると、覚えやすく、親しみやすくなる。

良い例としてPerfumeのレーザービームが挙げられてた。


[PV] Perfume 「レーザービーム」 2011.5.18発売! - YouTube

ただ、これだけで作るといかにも和風な感じになるので、 全体としては4抜きで作る。

このとき、47抜きから4抜きにスケールが変化すると場面切り替わり感があるのと、7の音に切なさを感じるそうだ。

メロディに4抜きスケールは感覚的に使っていたけれど、47抜き→4抜き変化での効果は知らなかったので参考になった。

メジャーセブンス編

セブンスつかうと、継続感、都会感がでる。

そうなる理由は、メジャーセブンスにはメジャーの構成音とマイナーの構成音が一緒に入っているから。

(個人的には7と1の音が近いコードだからだと思ってた。コード転回するときは気をつけないといけないかも?)

サビでセブンスコードで開始、メロディをその7の音からはじめるとグッとくるテクがあるらしい。

実例としてケツメイシのさくらのサビが紹介されてた。

テンポ編

BPM90以下がバラードな曲

BPM120以上がパワーのある曲

バラードは1音が長いので感情的な曲が作りやすい。

で、パワー曲でも途中でドラムを半分にすると、同じBPMで一時的にバラード曲が入れられる。

実例としてオフコースのラブストーリーは突然にが紹介されてた。

よくある曲の休憩タイムはこれだったのかー

面白かった

作るときのあるあるテクがユルく紹介されているし、なんとなく理解していたことも再確認できて楽しい。

また見るクマ。

オートシャンプーなるモノを1500円美容院イレブンカットで体験した

f:id:mofukuma:20131004191206j:plain

激安な割に失敗確率が低い美容院は、イレブンカットだと思っている。

11分で終わるスピードもさながら、クオリティもそこそこ高く、値段も安い。 (店によるのかもしれないけど。)

その秘密を中で働いている美容師さんに聞いたらこんな感じでした。


  • 社長が元魚屋さん

  • 美容院ってば時間かかりすぎ、高い、なので安く早くした

  • 高級なシャンプーをお薦めするなどの営業はウザいのでゼロに

  • 荷物とか客が運べ




魚かよ!

ともかく、異業種ならではの発想で徹底的な効率化をしてるらしい。なんかあんまり拘ってないけど、それなりにいい感じにしてほしい人には良さげな立ち位置なお店かも。

その効率化の一環でシャンプーの自動化の導入もしてるらしい。




それがこのオートシャンプーだ!




これがオートシャンプーの勇姿

f:id:mofukuma:20131004190511j:plain

サランラップも写ってますが

こいつが頭に装着されて自動的に頭を洗ってくれるようです。

これをガシャーンと装着する前に・・・、

うまく洗えない耳元と首元を手動で洗ってくれます。


全自動じゃなかった・・・。


そして手動での前準備が終わり、装着!

強さはどうしますかと聞かれたので、迷わず「最強」と告げました。


びゅおおおー!

うおおおお、無数の細い水流が頭に!頭に!!

手の形に似せた水流が太くなったり前後したり、頭がひじょーに気持ちいいです。

この気持ちをたとえるなら、食洗機に入った皿でしょうか・・・。


気持ちいいです

正直こういうメカ大好きなのでもっとやれ!という感じ。

小型化して自宅で出来るようなのほしいなあ。


カット1500円+シャンプー500円で体験できるので是非どうぞ。

JavaScript言語仕様拡張大作戦2 ~ヒアドキュメント編~

ヒアドキュメント

複数行の文字列を埋め込むようなヒアドキュメントって JavaScriptだと構文エラーでできないんですけど、これを実現します。

エラーになる例

var js = "
<html>
<body>
ヘイ提督ゥ!HTML直打ちもいいけどサー、改行と場所をわきまえなヨー。
</body>
</html>
";

これならOKだけど、めんどくさいし読みづらい例

var js = "\
<html>\
<body>\
制御文字?あぁ……ウザい。\
</body>\
</html>\
";

Pythonでのヒアドキュメント例

pyhtml = """
<html>
<body>
Pythonの本気を見るのです!
</body>
</html>
"""

JavaScriptヒアドキュメントのオレ仕様

こんな感じにすることにした。

var jshtml = ""/*
<html>
<body>
俺ヒアドキュメント!
</body>
</html>
*/;

実装

function _h(fn) {
    dat = fn.toString();

    dat = dat.replace(/""\/\*([\s\S]*?)\*\//gm, function(va, v1) {
    v1 = v1.replace(/\n/gm, "\\n").replace(/"/gm, '\\"');
        return '"'+ v1 + '"';
    });
    return eval(["(", dat, ")()"].join(''));
}

$(function(){ //jQueryつかう

    _h(function() { //この中は独自仕様になる

        $("body").append(
""/*
<pre style="font-size:30px; font-family:"MS P明朝">
第壱話
使
徒、襲来
</pre>
*/
        );

    });

});

実行結果

第壱話
使
徒、襲来

まとめ

CoffeeScriptとか使わなくてもヒアドキュメントできた。

注意点としてコメントアウト部分はかなり昔のFireFox限定でtoStringで取得されるプログラムから消えてしまうようです。最新のFireFoxだと問題ないです。

コメントアウトを使うと何を書いてもエラーにならないので、JavaScriptの文法を完全無視できます。

例えばこんな感じで別言語で書いたりできそう。 JavaScriptで他言語を実装すればですが・・・。

//C++で書く
_cpp(function(){/*
 int i;
 for(i=0;i<10;i++){
     printf("hoge");
  }
*/});

こんなのは便利そうなので誰か実装するべき

//吉里吉里のシナリオをそのまま書ける
_kirikiri(function(){/*
[wait time=200]
*start|スタート
[cm]
そんなこと言う人、嫌いです。
*/});

つづく。