ゲームエンジンのkaboom.jsの良いところ3点

2DゲームエンジンをGitHubで探すのが日課なのですが、たまたま見つけた「kaboom.js」が良かったので紹介します。 kaboom.jsはJavaScript用の2Dゲームエンジンです。概要として公式サイトには次のように書いてあります。 "fast and fun"とあるとおり、実際に触ってみると、一瞬でスーパーマリオのようなアクションゲームが作れる気がしました。 今回は私が「これはゲームが簡単に早く作れる！」と感じたポイントを３点紹介します。 ・アクションゲーム

Grid.jsを使う方法

データをテーブル表示するライブラリ『Grid.js』を使ってみたので共有します。 テーブルタグを使って自前で実装すると面倒なソート機能や検索機能や大量データへの対応がカンタンに実装できます。「テーブル表示をするならとりあえず使っとけ」くらいの気持ちで使ってみるのもアリだと思います。 今回はテーブルを表示して行毎に編集ボタンを表示するまでの手順を説明します。 この手順で、用意するファイルはHTMLファイル1だけ、操作はコピペだけでカンタンに使えるので良かったら試してみてくださ

Node-REDがsplitでとまってしまう問題の対処法

最近、自宅サーバーでNode-REDを動かして遊んです。遊んでる中で、splitのタイミングで処理が止まってしまう問題が発生しました。今回はこの現象の原因と対処法を共有します。わりとみんなハマるのではないかと思える現象だったので、もしよかったら最後まで読んでみてください。 問題が発生したプログラムはこちらです。割とよくあるforループのような処理です。 最初にリストを取得し、リストをsplitで分割し、各要素に対して「hello {{要素}}」とテキスト出力します。すべて

【漫画】中年の不眠

ビジュアルプログラミングの時代は来るの？

こんにちは。なおしむです。 最近Node-REDというビジュアルプログラミングツールを見つけました。 ブラウザ上で処理を線で結ぶことで視覚的にソフトウェアが作れます。 実行環境としては自分のサーバが必要ですが、現時点ではとりあえず自分のPCにインストールして遊んでいます。これまでテキストによるプログラミングを行ってきましたが、UI上でコーディングをするのは新鮮で楽しい体験です。しかし、今後のコーディングがこのスタイルになるのか？と考えるといくつか疑問もあります。 今回はビジュ

もうすぐ年末ですが、今年の目標は達成しそう？

早いもので今年ももう12月です。 1月に「今年はxxするぞ！」と目標を立てた人も多いと思いますが、いかがでしょうか？ 今回は今年の目標とその進捗報告をします。 結論は「ギリギリだけど、、なんとか達成したい。。」です。 2023年の目標は「毎週アウトプットする」私の今年の目標は「毎週アウトプットする」です。 具体的には、ブログ、podcast、YouTubeへの投稿を年間52件することです。 去年の目標も似たようなもので「アウトプットをたくさんする」でした。件数の目標は決めず

【p5.js】ブロック崩しゲームでプログラミングの魅力を体感しよう

こんにちは！ 今回はp5.jsを利用して、お手軽にブロック崩しゲームを作る方法を紹介します。 初級者にとって身近なゲームを通じたプログラミング学習は、理解を深める大きなステップとなります。 今回紹介するコードは、クラシックゲームの1つである「ブロック崩し」を実装したものです。壁やボール、プレイヤーのパドル、そして自機が当たるべきブロックをオブジェクトとして作成しています。 最終的にはこんなゲームが完成します。 このコードでは、p5.jsだけでなく、p5.play.jsという

p5play.jsでゲームが動かなくなる？物理演算の罠とその対策

こんにちは。なおしむです。 p5.jsとp5play.jsを使えば、容易に物理演算を活用したアプリを作成することができます。私自身もこれを利用してよく遊んでいます。しかしながら、Spriteの動きが突如止まってしまう現象に遭遇したことがあります。 私が体験したのは、ボールを操作するゲームを作っていた際、正常に動いているはずのボールが突如止まってしまった事態でした。最初は一過性の問題かな、と軽く考えていましたが、ゲームを公開した後、他のユーザーからも同様の報告が上がり、この現象

未来の修正を最小限にするプログラムとは？

コードレビューをするとき、「プログラムにバグはないか？」をもちろん見るのですが、それ以外にも「未来のバグを防げるか？」という観点も見るようにしています。 プログラムは日々修正されていくものなので、現在だけでなく未来も見据える必要があります。未来のバグを防ぐための方法の一つは、「未来の修正を最小限にすること」です。修正がなければバグが入りません。今回はプログラミングの初級者向けに「未来の修正を最小限にすること」について、実例をあげながら解説します。この内容が「良いプログラムとは

【FFmpeg】動画の音声を削除する方法

動画ファイルはサイズが大きいイメージがありますが実際のところは大きいのは映像よりも音声だったりします。 なので、音声が不要な動画では、音声を削除することでファイルサイズを小さくできます。 私の場合、PC画面の操作風景をスクリーンキャストで録画する際には、音声が不要なことが多いため、頻繁に削除しています。 この際に使用するコマンドを備忘録として残しておきます。 ffmpeg -i 入力ファイル -vcodec copy -an 出力ファイル なお、このコマンドを使用して手元

JavaScriptをtsconfigを使って書くと快適だった

最近、JavaScriptでテトリスを作ってます。 テトリスくらいならAIにお願いすれば一瞬で完成しますが、自分でアルゴリズムを考えながら、「あーでもない、こーでもない」と言いながら作るのは楽しいものです。 テトリスは趣味で作っているので、ブラウザで簡単に実行できるJavaScriptで書いてますが、JavaScriptは型チェックがないため、バグを埋め込みやすいところが難点です。かといってTypeScriptで書いてバンドラーでビルドするのも、趣味レベルではやりすぎかなぁ

【p5.js】テトリスのブロックを描く

なんとなくテトリスがやりたくなってきたので、自作することにしました。 テトリスのスマホアプリを検索するとたくさんヒットしますが、どれも広告が表示されてうざかったので。。 対戦もなく、難易度が上がることもなく、まったりとプレイできるテトリスがやりたかったので、自作します。 開発環境は、JavaScript + p5.jsです。 ゲームを作るときはPhaser.jsを使うことが多いですが、今回はp5.jsを使います。p5.jsはゲームエンジンではないので機能不足ではありますが、