【ゆっくり解説】誰でも作れるゲームプログラミング講座３シーン制御ですっきり整理

[@読み取り専用]

Formアプリの開発などでC#はそれなに楽しんで学習できたのですが、
JavaScriptは作りたいもの定められず手を出せずにいました。
そんな時にこの動画に出会えてまたやってみようという気になれました。
ありがとうございます。

[@浅野小豆]

霊夢が血しぶきあげるの笑った🤣

[@tasshich]

すみません　動画の通りにやったら動かなくなったのでテンプレート書き写しました
比べてみたらここの部分の説明がなかったように感じます
function keydown(e) {
// ゲームプレイ中
if (scene == Scenes.GameMain) {
if (speed == 0) {
speed = -20;
acceleration = 1.5;
}
// ゲームオーバー中
} else if (scene == Scenes.GameOver) {
if (frameCount > 60) {
init();
}
}
}

[@nobutanaka4434]

とても勉強になります!!素晴らしい動画ありがとうございます。
コードを書いていてわからないところがあるのですが、
GameOver時のキャラクター描画で
g.drawImage{
characterImage,
-characterImage.width/2,
-characterImage.height/2,
‥‥
}
となっている描画開始位置パラメータの
-characterImage.width/2などの数値は、どのような計算で出る数値なのでしょうか？
translateでcharacterPosX,characterPosYを真ん中に設定したのに
characterPosXなどのパラメータを無くしてもうまく動いていることがよくわからないです。
よろしければぜひ教えていただけると嬉しいです。

[@yukkuriCS]

translateは座標系の原点の位置を決める命令ですね。実行するとそれ以降の描画命令の位置がずれることになります。
今回の例だとcharacterPosX, characterPosYの位置が、座標系の原点に設定されます。
その状態で、例えばg.drawImage(img, 0, 0)のように本来原点に描画するような命令を実行すると、実際はcharacterPosX, characterPosYの位置に描画されるということになります👍

[@nobutanaka4434]

@@yukkuriCS なるほど、translateの時点で座標系の原点が決まっていて、そこから見た相対的な位置をg.drawimageで指定していたんですね、わかりやすい説明本当にありがとうございます！ちなみにゲーム作り終えました、たくさんの要素を動画に織り込んでいただいて、とても勉強になりました。自分でオリジナル要素を追加してゲーム作ってみようと思います！