KANA ピクセルウサギの弓使い

Prompt

ログインしてコピー

ネイティブ JavaScript と Canvas 2D を使い、ピクセルアートのウサギの弓使いをアニメーション表示する、単体で動作する HTML ファイルを作成してください。 添付の KANA のウサギキャラクターを見た目の参考にしてください。 - 白いウサギ - 大きく直立した耳。内側にシアン／青の発光ディテール - 通常の青い目が一つ - 赤いサイバネティックな機械の目が一つ - 「KANA」と書かれた黄色いパーカー - 濃い青の手袋とズボン - 黄色と青の SF 風の機械式脚部装甲 - かわいいちびキャラ体型 - 未来的な弓矢 - 背中の小さな矢筒 外部アセット、ライブラリ、画像、フォント、ネットワークリクエストを使用しないでください。すべてコードで手続き的に描画してください。 レンダリング - まず固定論理解像度 160x120 のオフスクリーンキャンバスにすべてを描画します。 - ブラウザーのウィンドウに収まる最大の整数倍率で、全画面表示用キャンバスに拡大します。 - キャンバスを中央に配置します。 - imageSmoothingEnabled = false を設定します。 - CSS の image-rendering: pixelated を使います。 - すべての座標を整数に揃えます。 - グラデーション、ぼかし、アンチエイリアス、shadowBlur、サブピクセル描画は禁止です。 - 約 28 色の固定パレットを使います。背景用の暗い紺、毛の白／灰色、パーカーの黄色、服の青、機械の目の赤、耳の光のシアン、弓矢のエフェクトの黄／オレンジを含めます。 キャラクター ピクセル単位の長方形、多角形のように並べたピクセル、ピクセルで近似した円、単純なブロック形状でウサギを手続き的に作ります。 大きさは幅 28〜34 ピクセル、高さ 40〜48 ピクセル程度です。 大きな耳、丸くふわふわした頭、小さな体、赤い機械の目、黄色いパーカー、機械の脚、弓、矢、矢筒が、シルエットでもはっきり分かるようにします。 耳、頭、腕、脚、パーカー、弓、矢、胴体を別々にアニメーションさせます。 ポーズを量子化し、メインループは 60fps で描画しながら、見た目は洗練された 8〜12fps のスプライトアニメーションになるようにします。 アクション 次の 8 つの動作をループするデモを作成します。 1. 待機（IDLE） - ウサギが構えて立つ - 体がわずかに上下する - 耳が微妙に動く - パーカーと矢筒が揺れる - 機械の目が柔らかく明滅する - 弓は体の横で力を抜いて持つ 2. 走る（RUN） - 素早く前へ走る - 両脚が力強く交互に動く - 腕でバランスを取る - 片手に弓を持つ - 矢筒が跳ねる - 耳が少し後ろになびく - 足元に小さな土ぼこりのピクセルが出る 3. 狙う（AIM） - 足をしっかり踏ん張る - 弓を上げる - 矢筒から矢を抜く - 矢をつがえる - 弦を後ろに引く - 片目で標的に集中する - 機械の目が明るくなる - 射撃方向へ体をわずかに傾ける 4. 射る（SHOOT） - 弦を放す - 矢が画面を素早く横切る - 弓が少し反動で動く - 腕が自然に振り抜かれる - 矢に明るい黄色のエネルギーの軌跡が続く - 画面が 1〜2 ピクセルだけ揺れる - 機械の目が赤く光る - 弓から発砲光のような光が一瞬弾ける 5. ジャンプ（JUMP） - しゃがむ - 上へ跳ぶ - 脚を体の下に引き寄せる - 耳が遅れて反応する - 弓を体に近づけて持つ - 踏み切りで少量の土ぼこりが弾ける - ピクセルを崩さない整数変換で軽いスクワッシュ＆ストレッチを付ける 6. 回避／ローリング（DODGE） - 素早く身をかがめる - 横に転がる - 弓を体に近づけたままにする - 耳を後ろに伏せる - 小さなほこりと動きを示すピクセルを出す - 低い戦闘準備姿勢で終える 7. ダメージ／被弾（HURT） - 少し後ろへ吹き飛ばされる - 頭が勢いよく後ろに動く - 耳が大きく反応する - 機械の目がちらつく - 小さなピクセルの星や衝撃の火花が出る - 弓を下げるか、落としそうになる - 少し間を置いて立ち直る 8. 勝利（VICTORY） - 弓を頭上に掲げる - 嬉しそうな表情 - 片耳が遊び心のある角度に傾く - 機械の目が明るく輝く - 小さな黄色いお祝いの粒子が出る - 短い勝利のジャンプをする - 最後はかわいく勇ましいポーズにする ステートマシン IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE の順でループさせます。 各動作は、見てはっきり理解できる長さを確保します。 ポーズの遷移にイージング関数を使います。 状態の間に短い遷移アニメーションを入れ、突然ポーズを切り替えず、連続したループにします。 弓矢 - 未来的な湾曲した弓 - 白／暗い紺の本体 - 黄色く光る機械式の関節 - 細く明るい弦 - 矢じりは明るい黄色 - SHOOT 中の矢の軌跡は短時間だけ残す - 矢筒には複数の矢が見える パーティクル 実行時の割り当てが不要なプール方式を実装します。すべての粒子をアニメーションループの前に確保します。 種類は足元の土ぼこり、矢の軌跡、弓のエネルギーの火花、機械の目の火花、被弾時の星、勝利の粒子です。 各粒子は時間経過に応じてパレット内の色を変えます。 メインループ内で新しいオブジェクトを割り当てないでください。 シーン 暗い夜空、少数の 1 ピクセルの星、大きな月、簡単な石または未来的な足場、ごく控えめな遠景のシルエットで、最小限のピクセルアート環境を作ります。 ウサギの輪郭が常に読み取れるよう背景を簡潔に保ちます。 AIM と SHOOT では、機械の目からシアン／赤の控えめなリムライト、弓から黄色いリムライトを加えます。 技術要件 - 単一の HTML ファイル - ネイティブ JavaScript のみ - Canvas 2D のみ - ライブラリ、SVG、外部画像、アセット、ネットワークリクエストなし - 固定 60Hz のタイムステップ - 描画は requestAnimationFrame - メインアニメーションループ内のオブジェクト割り当てはゼロ - 安定した 60fps - レスポンシブな全画面スケーリング - 鮮明な整数倍拡大のピクセル 品質基準 完成度の高い 16 ビットアクションゲームの主人公のスプライトアニメーションに見えるようにします。単純な幾何学図形を並べただけの見た目は避けてください。 ウサギは表情豊かで、かわいく、素早く、戦える存在にしてください。 8 つの動作はすべて明確に異なるシルエットを持つ必要があります。 すべてのアニメーション状態でキャラクターデザインを統一します。 実際のピクセルアートのアクションゲームに使える仕上がりにしてください。