Canvas

2025-07-12 | lain

Webアプリでの動画再生は、単なる<video>タグだけではありません。本記事では、JavaScriptやCanvasを活用した動的な動画再生方法を4つ紹介し、それぞれの特徴や使いどころを比較します。演出・UI・アニメーションと組み合わせたい方におすすめです。

カテゴリ： AI動画制作

タグ： #動画再生#videoタグ#JavaScript#Canvas#UI演出#Webアニメーション#ゲーム開発#HTML5#メディア制御#技術記事

2026-01-11 | lain

Three.jsとWebXR環境で、戦闘・イベント・通知に使い回せるMessageBoxを実装した記録。設計判断と妥協点も含めてまとめた。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#GameUI#Canvas#VR

2026-01-10 | lain

three.jsのSpriteとCanvasTextureを使い、sin波に沿って生成・拡散する軽量なアニメーション演出を試作した過程をまとめる。

カテゴリ： JavaScript

タグ： #three.js#animation#canvas#sprite#math

2026-01-06 | lain

Three.jsでRPG風のコマンドメニューUIを、Plane + CanvasTexture + キー入力でゼロから構築した記録。

カテゴリ： JavaScript

タグ： #Three.js#Canvas#UI設計#ゲーム開発

2026-01-01 | lain

Three.js の WebXR 環境で、CanvasTexture を使いレーザーポインタ操作によるスクロールUIを自作した実装メモ。DOMを使わない空間UIの構成と考え方。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#Canvas#UI#VR

2025-12-28 | lain

GameBoxアーキテクチャの続編として、Three.jsでブロック崩しを実装完了まで仕上げる。ボール・パドル・ブロック衝突、勝利判定、ゲームオーバー表示、UIボタン連携までを整理する。

カテゴリ： JavaScript

タグ： #Three.js#WebXR#GameDev#Architecture#Canvas

2025-12-12 | lain

Breakout→アルカノイドの系譜を踏まえつつ、「オマージュ」と「コピー」の境界を実装者目線で整理。テトリスが揉めやすい理由も含めて、ブロック崩しを安心して作るための指針をまとめる。

カテゴリ： JavaScript

タグ： #GameDev#Canvas#IndieGame#GameDesign#Copyright

2025-12-11 | lain

HTML5 CanvasとJavaScriptで、ボスの複合当たり判定・弾幕処理・HPゲージ・撃破演出まで実装した流れをまとめました。楕円当たり判定の公式も解説しています。

カテゴリ： JavaScript

タグ： #canvas#game#hit-detection#boss-battle#bullet-hell

2025-12-05 | lain

[Human x AI] ChatGPT(5.1)との対話録～物理演算とパラダイムシフト～

カテゴリ： Human x AI

タグ： #ChatGPT-5.1#対話ログ#javascript#CANVAS#ゲーム開発#物理演算#パラダイムシフト#数学

カテゴリ：Canvas