Quintusミニゲーム制作のベータ(二)
4588 ワード
前回はゲーム初期化の設定についてお話ししましたが、本当に画面で何かを見ることはできませんでした.今号はパチンコのブロックを実現します.そして、この内容は本当にゲームの具体的な制作過程に関わっています.
三、精霊を追加
すべてがそろっています.東の風だけが欠けています.私たちの主人公のブロックを追加する時です.
Q.Sprite.exted(name,options)はQuintusの継承方法を利用してSpriteクラスを拡張しています.最初のパラメータnameは拡張クラスの名前です.2番目のパラメータは1セットです.標準関数またはカスタム関数を再定義できます.ここでは、init方法、draw方法、Step方法は、元のデフォルト方法をカバーしています.
init(p)メソッドは、妖精のデフォルトサイズ、位置、速度、加速度などの性質を初期化し、これらの性質は、実用化時にカバーすることができ、また、init方法は、精霊にQuintusコンポーネントを追加することができます.例えば、ここの「2 d」、「tween」は、衝突テストと漸進アニメーションを実現します.
draw(ctx)は、コールバックの対象を受信します.その使い方はcanvasと同じです.ここには白い四角形が描かれています.
step(dt)関数は、一秒に60回呼び出されます.ブロックの移動とキーの判断を実現するために使用できます.ステップモードではコードがあまり複雑にならないように注意してください.そうしないと、ゲームの効率は非常に低くなります.
また、ブロックにカスタムの方法を追加しました.detect関数は、精霊が衝突するたびに呼び出され、衝突検出はコンポーネント'2 d'によって実現され、詳細は無視されてもよい.ブロックが衝突した後に相手が地面かどうかを判断してほしいです.もしそうであれば、再度ジャンプしてもいいです.そうでなければ、死亡方法を実行します.die()関数は、プレイヤーブロックを隠し、0.2秒後に現在のレベルを再読み込みします.Windows()関数は、ユーザー定義の方法loadNextLevelを呼び出します.コードは次の章で説明されます.役割はレベルをロードすることです.
ここではアニメイト法が2回出現し、Quintusの「tween」に属して漸進的なアニメーションを実行しているのを見ることができます.obj.animate(optime,style,calback)optionsパラメータはinitメソッドに対応しています.アニメーション終了時の妖精の性質のため、timeは動画の時間で、デフォルトでは1秒、styleが決定する漸進的な方法です.calbackはアニメーション終了後のコールバック関数です.後の三つのパラメータは使用時は省略できます.
四、シーンを追加する
精霊だけではダメです.精霊の表現には支えが必要です.
私たちはゲームのシーンレイアウトをよく考えなければならないです.通常はゲームを3階に分けるのが好きです.背景層、論理層、UI層.各階は実はQuintusシーンのSceneの例です.以下は、背景レイヤとUI層のコード実装である.
ここではnameパラメータはシーンの名前を作成し、function｛｝はステージパラメータを受け取ります.Quintusの舞台です.シーンはQuintus舞台を通じて現れます.シーンを舞台の上の背景道具と俳優として想像できます.ここの関数はステージパラメータを通して舞台のシーンを教えます.例えば、背景シーンのbackgroundを通過します.
stage.insert関数は平敷き図「background.png」を舞台に追加しました.つまり、Quintus舞台がbackgroundシーンを見せるたびに、「background.png」の画像が画面全体に並べられています.「background.png」の画像は、以前にカスタマイズされたイメージパスから読み込まれます.
同じように、UI層は主に停止ボタンを実現し、Q.UID.ButtonのインスタンスによってButtonを化し、「click」クリックイベントの実行関数を書き換えた.ここでは、QuintusのQ.loopを利用してゲームが実行されているかどうかを判断し、Q.pause Gameを利用してゲームを一時停止し、Q.unpause Gameを利用してゲームを再開します.注意すべきは、ゲームを一時停止しても、ゲームのサウンドをオフにすることはできません.Quintusは、この時点では、サウンドの一時停止と回復については実現されていません.
今はスクリーンにブロックを載せることができます.
今やっとloadReady関数が見えます.
三、精霊を追加
すべてがそろっています.東の風だけが欠けています.私たちの主人公のブロックを追加する時です.
Q.Sprite.extend 'Player',
init: (p) !->
@_super p,
x: 100, y: 400
w: 42, h: 42
vx: 0, vy: 0
ax: 0, ay: 0
gravity: 0.02
jumpable: false
start: false
@add '2d, tween'
@on 'hit', @, @detect
detect: (collision) !->
if collision.obj.isA 'Ground'
@p.vy = 0
@p.jumpable = true
else @die!
pass: !->
loadNextLevel!
die: !->
if [email protected]
@p.hidden = true
@p.vx = 0
@animate { angle: 0 }, 0.2, Q.Easing.Linear, callback: !-> loadNextLevel!
draw: (ctx) !->
ctx.fillStyle = 'white'
ctx.fillRect [email protected], [email protected], @p.w, @p.h
step: (dt) !->
@p.vx = 5.5
@p.x += @p.vx
@p.y += @p.vy
if Q.inputs['up'] and @p.jumpable is true
@p.jumpable = false
@p.vy = -9.2
@animate { angle: 180 + @p.angle }, 0.9
Q.audio.play 'jump.mp3'
if @p.y > groundY - @p.h/2 then @p.y = groundY - @p.h/2 # avoid falling bug
if @p.x > @p.stage.options.w + @p.w / 2 then @pass!Q.Sprite.exted(name,options)はQuintusの継承方法を利用してSpriteクラスを拡張しています.最初のパラメータnameは拡張クラスの名前です.2番目のパラメータは1セットです.標準関数またはカスタム関数を再定義できます.ここでは、init方法、draw方法、Step方法は、元のデフォルト方法をカバーしています.
init(p)メソッドは、妖精のデフォルトサイズ、位置、速度、加速度などの性質を初期化し、これらの性質は、実用化時にカバーすることができ、また、init方法は、精霊にQuintusコンポーネントを追加することができます.例えば、ここの「2 d」、「tween」は、衝突テストと漸進アニメーションを実現します.
draw(ctx)は、コールバックの対象を受信します.その使い方はcanvasと同じです.ここには白い四角形が描かれています.
step(dt)関数は、一秒に60回呼び出されます.ブロックの移動とキーの判断を実現するために使用できます.ステップモードではコードがあまり複雑にならないように注意してください.そうしないと、ゲームの効率は非常に低くなります.
また、ブロックにカスタムの方法を追加しました.detect関数は、精霊が衝突するたびに呼び出され、衝突検出はコンポーネント'2 d'によって実現され、詳細は無視されてもよい.ブロックが衝突した後に相手が地面かどうかを判断してほしいです.もしそうであれば、再度ジャンプしてもいいです.そうでなければ、死亡方法を実行します.die()関数は、プレイヤーブロックを隠し、0.2秒後に現在のレベルを再読み込みします.Windows()関数は、ユーザー定義の方法loadNextLevelを呼び出します.コードは次の章で説明されます.役割はレベルをロードすることです.
ここではアニメイト法が2回出現し、Quintusの「tween」に属して漸進的なアニメーションを実行しているのを見ることができます.obj.animate(optime,style,calback)optionsパラメータはinitメソッドに対応しています.アニメーション終了時の妖精の性質のため、timeは動画の時間で、デフォルトでは1秒、styleが決定する漸進的な方法です.calbackはアニメーション終了後のコールバック関数です.後の三つのパラメータは使用時は省略できます.
四、シーンを追加する
精霊だけではダメです.精霊の表現には支えが必要です.
私たちはゲームのシーンレイアウトをよく考えなければならないです.通常はゲームを3階に分けるのが好きです.背景層、論理層、UI層.各階は実はQuintusシーンのSceneの例です.以下は、背景レイヤとUI層のコード実装である.
Q.scene 'background', (stage) !->
stage.insert new Q.Repeater { asset: 'background.png' }
Q.scene 'UI', (stage) !->
button = new Q.UI.Button { x: stage.options.w/8*7, y: 150, fill: 'white', label: 'Pause', font: '400 24px Pico', fontColor: 'rgb(167,34,243)' }
button.on 'click', !->
if Q.loop isnt null then Q.pauseGame! else Q.unpauseGame!
stage.insert buttonここではnameパラメータはシーンの名前を作成し、function｛｝はステージパラメータを受け取ります.Quintusの舞台です.シーンはQuintus舞台を通じて現れます.シーンを舞台の上の背景道具と俳優として想像できます.ここの関数はステージパラメータを通して舞台のシーンを教えます.例えば、背景シーンのbackgroundを通過します.
stage.insert関数は平敷き図「background.png」を舞台に追加しました.つまり、Quintus舞台がbackgroundシーンを見せるたびに、「background.png」の画像が画面全体に並べられています.「background.png」の画像は、以前にカスタマイズされたイメージパスから読み込まれます.
同じように、UI層は主に停止ボタンを実現し、Q.UID.ButtonのインスタンスによってButtonを化し、「click」クリックイベントの実行関数を書き換えた.ここでは、QuintusのQ.loopを利用してゲームが実行されているかどうかを判断し、Q.pause Gameを利用してゲームを一時停止し、Q.unpause Gameを利用してゲームを再開します.注意すべきは、ゲームを一時停止しても、ゲームのサウンドをオフにすることはできません.Quintusは、この時点では、サウンドの一時停止と回復については実現されていません.
今はスクリーンにブロックを載せることができます.
Q.scene 'level', (stage) !->
stage.insert new Q.Ground { w: stage.options.w, x: stage.options.w/2 }
player = stage.insert new Q.Player { stage: stage }今やっとloadReady関数が見えます.
loadReady = !->
$ '#loading' .hide!
Q.stageScene 'background', 0
Q.stageScene 'UI', 2
loadNextLevel! loadNextLevel = !->
Q.clearStage 1
if currentLevel! > maxLevel!
Q.clearStage 2
Q.stageScene 'win', 1
else
Q.stageScene 'level', 1