Canvasの画像表示のやり方やOpen Processing の知識2選。

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

1. 作品やコードのライセンス。

2. 画像を表示させる方法。

作品やコードのライセンス。

Open Processing では、複数の種類からライセンスを選択できます。
デフォルトの設定では Creative Commons Attribution NonCommercial ShareAlike のライセンスを使うことになります。
ライセンスとは、簡単に言ってしまえば「利用規約」のことです。
Creative Commons とは、ライセンス条件の範囲内で再配布やリミックス（改変）などができるライセンスです。
いくつかライセンス条件のパターンがありますが、Attribution NonCommercial ShareAlike は作品の利用用途を非営利活動に限定し、原作者のクレジットを表示し、改変した際も同じライセンスを使わなければいけないという条件がつきます。
Creative Commons とは別に、ソフトウェア業界でよく使われているライセンスとして、MIT License や GNU GENERAL PUBLIC LICENSE(GPL)、Apache License 2.0 などがあります。

画像を表示させる方法。

今回この内容では恐竜の画像を表示させるよう書いていますが、表示する画像に指定はありません。
まず、GitHub リポジトリから Download して画像を用意します。
image/ フォルダを作成してその中に dino.png を入れます。
現在のフォルダ構成は下記のようになります。

📄 dino.html
📄 dinoGame.js
📂 image
┗━ dino.png

それでは、恐竜の画像を表示させるプログラムを書いていきます。
dinoGame.js を下記のように実装します。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const dinoImage = new Image(); // img 要素を作成
dinoImage.src = `image/dino.png`; // 画像のパスを指定
dinoImage.onload = () => {
   ctx.drawImage(dinoImage, 0, 320); // 画像の描画
}

new Image() では、新たな img 要素を作成し、src 属性に画像のパスを設定します。
画像の読み込みに時間がかかり、すぐに描画しようとしても何も表示されません。
そのため onload = () => { } を使用し、画像の読み込みが完了してから描画をするようにする必要があります。
ctx.drawImage(イメージオブジェクト, x座標, y座標) で画像を描画します。
画像の描画の座標も、画像の左上を指定します。
書けたら保存し、ブラウザで HTML をリロードしてみましょう。
左下に自分が指定した画像が表示できていれば成功です。

まとめ

今回は、Canvasの画像を表示させるためにはどうすれば良いかを解説していきました。画像を表示させることができれば後は動かしたりするだけだとゲームを作る前は思っていたのですが、画像を表示させるだけでもフォルダやファイルを多く使い、動かすのはもっと大変なのだろうかと改めてゲームを作るという大変さを知りました、しっかり復習などして抜けがないよう学習していきたいです。