this is in the making
"Milk, milk and more milk!"
©2018, 2019 Maeda Mameo

制作中。
グラフィックはこれでほぼ完成です。
ねこじゃらしはちょっと直します。
効果音はこれから付けます。
タイトル画面に音の on/off ボタンを付けます。
あと Google がプライバシーポリシーにうるさいので付けます。
グローバルなハイスコアも付けたいです。

Monkey Circus ← author's web site 作者のホームページへ


ねこにミルクをあげるゲームです。
『魔法のねこじゃらし』で、マスの中のミルクを入換えて、右側の3匹のねこにミルクをあげましょう。 いちばん左の青いねこにあげてはいけません。一滴でも青いねこが飲んだ時点でゲームオーバーです。

画面をタッチしたままで、ねこじゃらしを動かします。 すると、少し遅れて妖精がついて来ます。 タッチを離した瞬間に、ねこじゃらしの位置にあるミルクと、妖精の位置にあるミルクが入換わります。 マウス操作の場合は、クリックで入換わります。



このゲームは、YUKI♡ さんの MSX 版 の "LOT LOT LOT" をリメイクしたものです。 YUKI♡ さんにリスペクトの気持ちをこめて制作しております。
ゲームの下にあるボタンを押すと、原作の MSX 風の画面に切替えることができます。

ひとまず5000点ぐらい出るまでやってみてください。 もうすこし慣れて10000点ぐらい出せるようになるまで遊んでいただけたら幸いです。 ちなみに、作者のハイスコアは25000点ぐらいです。
色玉はミルク10滴分、ラバーダックはミルク100滴分の得点が入ります。



2019/03/17
矩形波と正弦波にしてみました。

2019/03/11
PSG みたいにリアルタイムに音をジェネレート。
最高記録、73000点。

2019/03/01
アプリ上にマウスカーソルがある時に、トラックパッドの2本指スクロールを禁止することが、Firefox でもできました。
妖精。

2019/02/27
"LOT LOT LOT" の掲載誌をスキャンしました。

2019/02/25
妖精。

2019/02/24
カーソルを動かした時の音は、シンセサイザーの無限音階。 マスの中身を入換える時の音は、オーケストラヒット。 得点が入る時の音は、ポチャポチャした水やあぶくのような音。 ……に、すべきだろうと思いました。

2019/02/23
ねこじゃらしと妖精。

2019/02/19
ねこじゃらしと妖精。

2019/02/16
ねこじゃらしと妖精。

2019/02/15
PHP の書き方を思い出すために過去のソースを見て復習しました。

2019/02/14
効果音素材をいろいろ聴いて選びました。
最高記録、64000点。

2019/02/13
ねこのデザインを少し直しました。
スタートボタンのホイップクリームをプルプルゆらしました。


2019/02/12
タイトル画面のデザインが、ほぼ考えていたとおりになりました。


2019/02/11
写真素材を Illustrator で自動トレースして白黒にしてペン画風にして、タイトル画面に乗算ブレンドで表示しました。

参考画像: エキュート品川・エキュート品川サウス パンフレット

2019/02/10
ビットマップの写真素材を選びました。
何もしていない時のねこたちの頭と腕が少しゆれるようにしました。

2019/02/09
タイトル画面のねこたちが仲良く楽しそうにゆれるようにしました。

2019/02/08
3ヶ月ぐらい前からほぼ毎日、薬局でシャンプー・ソープ・洗剤などのパッケージデザインを見ています。 継続が大事。

2019/02/07
キラキラが正しく表示できるようになりました。 キラキラは THREE.Points で表示しています。 各キラキラのz座標は全部0にして、それをまとめた THREE.Points のz座標だけを指定するとうまくいきました。

2019/02/06
キラキラを追加しました。 でもなぜか各キラキラの周囲に四角が出てしまいます。

2019/02/05
PANTONE の2019年の色は、
Living Coral です。RGBで表すと #ff6f61 です。
カーソルは、THREE.Sprite で表示するのをあきらめて、THREE.PlaneGeometry の THREE.Mesh にしました。
ねこじゃらしと妖精がアニメーションするようにしました。

2019/02/04
レンガの壁は、THREE.Sprite で表示するのをあきらめて、THREE.PlaneGeometry の THREE.Mesh にしました。

2019/02/03
レンガの壁のため、複数の THREE.Sprite を用意して、ぜんぶ同一のテクスチャを使いながら uv はそれぞれ変える、 ということをやろうと試行錯誤しました。 結局できるみたいですが、ハック的になってしまうようなのでやめました。

2019/02/02
THREE.Sprite で、テクスチャの offset と repeat を調整して、 ねこじゃらしカーソルとハンドカーソルを切替えられるようにしました。


2019/02/01
カーソルをねこじゃらしにしました。

2019/01/31
4匹のねこをそれぞれ別の色にしました。

2019/01/30
チューリップを canvas ではなく THREE.PlaneGeometry の THREE.Mesh にしました。

2019/01/29
MSX 風の表示への切替えボタンを付けました。 その時の部屋を区切る壁をレンガにしました。

2019/01/28
タイトル画面全体に半透明をかぶせて乳白ぽくしました。
デバグドローの線表示の on/off ボタンを付けました。

2019/01/27
参考画像: 株式会社 マイナビ マイナビ転職
レッド 100 % から白へ振ったような色と、ブルー 100 % から白へ振ったような色を使うのが、 最近流行っているようなので真似したいと思います。

スマホで1本指で遊べるように、タッチを離した時に入換えするようにしました。

2019/01/26
アプリ上にマウスカーソルがある時は、トラックパッドの2本指スクロールを禁止しました。 (Firefox では禁止できませんでした。)

2019/01/25
上からパーティクルを注ぐ方向を斜めにしました。
タイトル画像とゲームオーバー画像を canvas ではなく THREE.Sprite にしました。
ミルククラウンを3Dでモデリングしてタイトル画面に使用しました。
と、ここまでで完全に canvas をなくすことができました。


参考画像: カルビー 株式会社 ポテトチップス
くねくねした旗が最近流行っているようなので真似したいと思います。

2019/01/24
skeleton_3.js から skeleton_canvas.js と skeleton_audio.js を分離してクラス化しました。
SCORE と HISCORE という文字を canvas ではなく THREE.Sprite にしました。

2019/01/23
画面の向きを変えた時、数字パーティクルの向きが追従するようにしました。

skeleton_3.js

2019/01/22
SBクリエイティブ 株式会社 斉藤有美
『FLOWER LOVERS COLLECTION 花と雑貨の素材集』

参考画像: 岩手缶詰 株式会社 さば in オリーブオイル (缶詰)
単色のペン画風のイラストに色をさすのが最近流行っているようなので真似したいと思います。

参考画像: カルビー 株式会社 Grand Jagabee (菓子)
ふちどり文字、文字にラインマーカー、斜線、などは3年ぐらい前に気に入っていましたが、 今だにいける感じがします。

skeleton_touch.js をクラス化しました。

2019/01/21
参考画像: ステラシード 株式会社 Amino Maison (シャンプー)
筆記体フォントや、チョーク風フォントや、微妙にくずしたフォントなどを混ぜて使うこと、 ペン画風のイラストを入れること、泡っぽい感じの形状、などを真似したいと思います。

skeleton_2.js から skeleton_touch.js を分離しました。

2019/01/20
パーティクルの大きさを個別に調整可能にしました。

2019/01/19
数字を canvas ではなくパーティクルにしました。

2019/01/18
パーティクルの画像を個別に変えられるようにしました。

2019/01/17
いちばん下のマスに何かある時、ねこがほしがる動きをするようにしました。

2019/01/16
ねこのデザインを調整しました。 ゲームオーバー寸前に、スローモーションになるようにしました。

2019/01/15
のぞき穴マスクを canvas ではなく THREE.RingGeometry の THREE.Mesh にしました。

2019/01/14
ハイスコアを付けました。

ゲームオーバー画面に、のぞき穴マスクを付けました。

ゲームとしてやりたかったことは、これで完成です。

あとは、ねこのモデリングをちゃんとして、canvas をなくして、ハイスコアをグローバルにして、 プライバシーポリシーを入れて、効果音を入れて、演出こまかくしてゆきたいです。


2019/01/12
タイトル画面・ゲーム中・ゲームオーバー画面、の区別をつけました。

2019/01/11
ゲーム画面の外枠も canvas ではなく THREE.PlaneGeometry の THREE.Mesh にしました。


2019/01/10
部屋を区切る壁を canvas ではなく THREE.PlaneGeometry の THREE.Mesh にしました。
最終的には、canvas を無くして、GL のみにしたいと思っています。

2019/01/09
ねこを少しだけねこらしくしました。

2019/01/07
ハンドカーソルをハイレゾ化しました。

2019/01/06
背景の板を荒々しくて味のあるものに変えました。
by AGF81 @ DEVIANT ART

2018/12/30
チューリップを仮デザインのねこに変えました。


2018/12/23
各ラバーダックを見分けて個別に管理できるようにして、ゆらゆらゆれるようにしました。

2018/12/19
チューリップに吸込んだものを、種類ごとに別々にカウントできるようにしました。

LiquidFun の js 版では DestroyParticle() が使えないみたいなので、 Destroy 専用の小部屋にワープさせて、DestroyParticleInShape() で消すことにしました。


2018/12/16
ゲーム内のことではないですが、ページの文章の下地がとろけている感じにしました。

2018/12/14
ラバーダックをいっぱい増やして、楽しげな雰囲気にしました。

2018/12/13
座標バッファを直接書換えることで、 色玉もラバーダックも正しく入換えできるようになりました。

2018/12/12
チューリップの場所を確保するために、画面サイズを 600 x 900 ピクセルに拡げました。 (これまでは 600 x 800 でした。)

チューリップの上に来ると急に吸込まれる感じに見えるように、 ベロシティバッファには加速度を加算するのではなく、いきなり速度を代入することにしました。


2018/12/10
ハンドカーソルがどの部屋を指しているのか分かりやすいように THREE.PlaneGeometry の THREE.Mesh でフォーカスのワクを表示しました。

2018/12/05
パーティクルを入換える際、Destroy して、目的地に Create しています。 Destroy で消えた数は取得できますが、それとぴったり同じ数で Create することができません。 また、その時に色玉がなくなって白いミルクになってしまいます。

2018/11/30
壁の穴の種類を5パターンにしました。
ハンドカーソルの2Dスプライトと、ラバーダックの3Dオブジェクトを追加しました。

2018/11/25
色玉がよく見えるように、色玉はミルクよりも前面へ出しました。

下のプールのパーティクルの数もカウントして、500個より多くなるとドレインするようにしました。


2018/11/23
適当にすきまのあるマスを用意しました。 リジッドボディは THREE.LineSegments で表示しています。

上のプールのパーティクルの数が500個より少くなると、新しいパーティクルを注ぎ込みます。

まだパーティクルのフチがくっきりしていて、重なりが目立っています。


2018/11/20
試作をふまえて、制作開始しました。

すべてのパーティクルに一様に下向きの重力を加えるのではなく、 位置に応じてフォースフィールドを参照してベロシティバッファに加速度を加えています。 パーティクルは THREE.Points で表示しています。