タグ tmlib.js が登録されている動画 : 39 件中 1 - 32 件目
種類:
- タグ
- キーワード
対象:
【JavaScript】GL-Shooter2 PV【弾幕STG】
Webブラウザで動作する本格弾幕STG「GL-Shooter2」の紹介です。
株式会社CAVE様の「怒首領蜂」シリーズへ最大限のリスペクトを込めて、鋭意開発中!
このゲームはJavaScriptで開発されています。
ゲームエンジンとしてtmlib.jsというライブラリを利用しています。
tmlib.js→ http://phi-jp.github.io/tmlib.js/
ステキなBGMはコチラからお借りしました→ nc54073
【JavaScript】戦艦ゲーム作ってみたよ【tmlib.js】
艦これにハマった影響で、戦艦ゲームを作ってみました。
こちらでプレイできます→ http://9leap.net/games/3592
言語はJavaScript。Webブラウザ上で動きます。
ゲームエンジンとしてtmlib.jsを使っています。
俺が作ったゲーム→ mylist/32698857
tmlib.jsでゲームを作ってみよう(1)
その1 自機の表示
今回のポイント
(1)tmlib.jsのインクルード
https://rawgithub.com/phi-jp/tmlib.js/0.1.8/build/tmlib.min.jsをscriptタグで読み込みます。
(2)tm.app.CanvasApp
canvasを使ったアプリケーション。コンストラクタ引数にcanvas要素のidを渡しましょう。
(3)scene
エレメント階層の一番上にいるエレメント。app.currentSceneで取得できます。
(3)tm.app.TriangleShape
三角形のエレメントです。addChildTo()でsceneに追加できます。
(4)update()
毎フレーム呼び出される関数です。
(5)app.keyboard.getKey()
キーボードでキーが押されているかどうかを取得することができます。
次 sm22063641
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう(2)
その2 敵の出現
今回のポイント
(1)tm.createClass()
クラスを作る関数です。
親クラス(superClass)、コンストラクタ(init)などを定義することが出来ます。
(2)TriangleShapeコンストラクタの第3引数
fillStyleで塗りつぶしに使われる色を指定することが出来ます。
(3)tweener
エレメントにアニメーションを設定するためのプロパティです。
指定したプロパティを絶対量として変化させるtoメソッド、相対量として変化させるbyメソッドなどを持ちます。
(4)Math.rand(a, b)
整数aからbまでの範囲から、ランダムな整数を返します。範囲にはa、bともに含まれます。
前 sm22063606
次 sm22160827
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう(3)
その3 自機のショット
今回のポイント
(1)tm.app.CircleShape
円形のエレメントです。tm.app.TriangleShapeの親戚です。
(2)敵とショットの衝突判定
あらかじめenemiesという配列に敵を格納しておき、ショットのupdate関数内で衝突判定をしています。
衝突判定にはisHitElement()関数を使用しています。
(3)配列スキャン中に要素を削除する
concat関数で一旦配列をコピーしてからループ処理を行います。
要素の増減による添字のズレを防ぐことが出来ます。
前 sm22063641
次 sm22206747
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう(4)
その4 敵弾
今回のポイント
(1)敵弾の移動
弾の向かう方向をdとし、X座標にcos(d)、Y座標にsin(d)を足していくことで任意の方向に弾を動かすことが出来ます。
前 sm22160827
次 sm22256498
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう(5)
その5 爆発
今回のポイント
(1)爆発
円形(CircleShape)を爆発として使います。
時間とともに拡大し、透明度(alpha)を0に近づけていきます。
前 sm22206747
次 sm22311216
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう(6)
その6 ゲームオーバー
今回のポイント
(1)ゲームの終了
app.stop()でアプリケーションが停止します。
前 sm22256498
次 sm22357101
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう(7)
その7 スコアの表示
今回のポイント
(1)tm.app.Label
文字列を表示するエレメントです。
setAlign()で左右寄せの指定、setBaseline()で上下寄せの指定を行います。
前 sm22311216
次 公開未定
マイリスト mylist/39031781
【tmlib.js】電ちゃんAAを作ろう【JavaScript】
tmlib.jsで画像をAA化してみます。
tm.asset.Textureクラス
画像データをロードするためのクラスです。
getBitmapメソッドでBitmapオブジェクトを取り出す事ができます。
tm.graphics.Bitmapクラス
編集可能な画像データを表現したクラスです。
ピクセルデータを一つ一つ取り出したり、画像にフィルタをかけたりすることができます。
前 sm22357101
次 sm22504751
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(1)
横スクロールアクション編です。
使用するtmlib.jsはこちら
https://rawgithub.com/daishihmr/tmlib.js/feature/fix-mapsheet/build/tmlib.min.js
tmlib.jsにはTiled Map Editorで作成したマップを表示する機能があるので、これを利用していきます。
前 sm22403990
次 sm22557961
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(2)
自機としてtmlib.jsのマスコットであるひよこちゃんを使用。
tm.geom.Vector2クラスを利用して速度ベクトルを表現していきます。
前 sm22504751
次 sm22561588
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(3)
重力、および床との衝突判定を実装します。
前 sm22557961
次 sm22561649
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(4)
キャラクターの側面・上面と地形との衝突判定を実装します。
あわせてジャンプも実装していきます。
前 sm22561588
次 sm22562013
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(5)
スクロールの実装。穴に落ちた時のゲームオーバー処理 。
前 sm22561649
次 sm22572354
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(6)
今後敵キャラクターを実装するにあたり、自機クラスと共通となるであろう処理を抽出してスーパークラスを作っておきます。
前 sm22562013
次 sm22573815
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(7)
前回作ったGObjectを継承して敵キャラを実装していきます。
前 sm22572354
次 sm22580851
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(8)
敵の思考ルーチンを作りこんでいきます。
前 sm22573815
次 また来週
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(9)
前回作った敵を拡張して、ジャンプする敵を作ります。
前 sm22580851
次 また来週
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(10)
敵に触れると自機がダメージを受けるようにします。
前 sm22587737
次 sm22602367
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(11)
敵に触れた時のノックバックを実装します。
前 sm22593725
次 sm22611151
マイリスト mylist/39031781
tmlib.jsでゲームを作ってみよう〜横スクアクション編(12)
前 sm22602367
次 sm22928803
マイリスト mylist/39031781
ブロック崩さぬ
ブロック崩し…ではなく崩さないゲーム
下記ページでプレイできます。(スマホ・PCブラウザでプレイ可)
⇛http://cachacacha.com/BlockKUZUSAZU/
本動画は(奇跡的に)入れ食いボーナス後の弾幕に耐えたプレイ動画。
うp主はブログやってます!よろしく!
⇛http://www.neo2184.com
ツイッター@neo2184
⇛https://twitter.com/neo2184
tmlib.jsでゲームを作ってみよう〜横スクアクション編(13)
遅くなってゴメンナサイ。
仕事とこれ(http://tmshooter.net)が忙しくてなかなか時間が作れませんでした。
今回は敵を踏んで倒せるようにします。
前 sm22611151
次 sm25738659
マイリスト mylist/39031781
自作ゲーム レイガリ 参考用プレイ動画
http://9leap.net/games/4211
HTML5+JavaScriptで作成しました。
tmlib.jsを使用しています。
音や画像は全てオリジナルです
[ブラウザゲー] DeepStriker [STG]
今回は横シューを作ってます。
まだ1面のみですが、こちらのURLでプレイできます。→ http://daishihmr.github.io/jsstg-cannon/
俺の作ったゲーム mylist/32698857
DeepStriker プレイ動画
しょうもないミスが多いです。
上手い人なら真似するだけで余裕で100万は超えると思います。
http://daishihmr.github.io/jsstg-cannon/
TM-Shooter C-S ALLクリア 1、2面 1兆3046億2139万6272
TM-Shooter
http://tmshooter.net/
HTML5による怒首領蜂再現 をコンセプトとした本格弾幕STG
約1年前に「1兆超え+オールクリアできるようになったら、また上げようと思ってます」
とコメントしてからついに目標を達成しました。
1、2、3面はかなり参考にできると思いますが、3面は撮り忘れてしまいましたw
#0:00 1面
#3:00 2面
4面 sm25398788
他のプレイ動画 mylist/41537568
TM-Shooter C-S ALLクリア 4面 1兆3046億2139万6272
TM-Shooter
http://tmshooter.net/
HTML5による怒首領蜂再現 をコンセプトとした本格弾幕STG
開幕直後に安置あるので覚えて使ってくださいね
ボスでほぼ1機捨てたのと同等な残念なミスをしてしまいましたが、5面でかなり粘ったおかげでクリアできました。
1、2面 sm25398400
5面 sm25399156
他のプレイ動画 mylist/41537568
TM-Shooter C-S ALLクリア 5面 1兆3046億2139万6272
TM-Shooter
http://tmshooter.net/
HTML5による怒首領蜂再現 をコンセプトとした本格弾幕STG
とにかく気合いとボムとハイパーをうまく使う。
初見殺しが非常に多いので結構パターン化しないと厳しいです。
4面 sm25398788
他のプレイ動画 mylist/41537568
TM-Shooter C-S 参考用 3面 rank50(25?)
TM-Shooter
http://tmshooter.net/
HTML5による怒首領蜂再現 をコンセプトとした本格弾幕STG
TM-Shooter C-S ALLクリア 1、2面 1兆3046億2139万6272 sm25398400
で撮り忘れていた3面をそれっぽく再現したつもり。
自機狙いの嵐です。切り返し失敗するともれなくミスります。
ボスより道中が難しい。
他のプレイ動画 mylist/41537568
TM-Shooter CBL A-S 真ボス サカガミ ハイパー手動ボム禁止縛り
TM-Shooter cure black label
http://tmshooter.net/
HTML5による怒首領蜂再現 をコンセプトとした本格弾幕STG
真ボス出現条件はノーコンティニュー2ミス以内でビギナースタイル以外です。
トレーニングモードはビギナー以外で必ず出現します。
この動画はトレーニングモードStage5のrank50で開始。
ハイパーと手動ボム禁止の縛りです。
できるだけ弾幕を覚えられるように撮りました。
他のプレイ動画 mylist/41537568