javascriptでシューティングゲームみたいなものを作る⑤
現在の進歩状況
記事
javascriptでシューティングゲームみたいなものを作る①
javascriptでシューティングゲームみたいなものを作る②
javascriptでシューティングゲームみたいなものを作る③
javascriptでシューティングゲームみたいなものを作る④
今回のソースコード
キャラクターに画像を適用する(エクセルでドット絵を描く)
ハイ、とうとうこのタイトル来ました。キャラクターに画像を適用していきたいと思います。
まずは、ドット絵の書き方からやっていきたいと思います。
今回はExcelで描いていきたいと思います。Excelはmicrosoft excelじゃなくても大丈夫です。(ちなみに、ここではwpsを使っています)
まず、エクセルを開きます。

そして、縦の幅と横の幅を変えます。縦12で横1.5にしてください。
変えたら、上の部分から好きな色を選んでポチポチして行けばキャラクター的なものができます。
ここではあくまでもゲームを作ることが目的なので、ドット絵は深くやらないことにします。(えぇ
まぁこんな感じでドット絵を描けるよと言う紹介です。

これで設定をいじってグリッド線をなくして、windowsペイントにコピーしてpngファイルで保存します。
そうして背景を透明にしてindex.htmlがあるフォルダにコピペします。(完全に説明が適当)
png背景の透明化はこのサイトでできます。
https://www.peko-step.com/tool/alphachannel.html
で、今回使う画像を適当にここに貼っておくので、index.htmlがあるフォルダに置いてください。(丸投げ)
player

enemy
今から適用する(早くしろ)
タイトル通りです。
それ以上でもそれ以下でもない()
ちなみに、今のディレクトリの構造はこんな感じです。
|
├ndex.html
├main.js
├player.png
├enemy.png
はい、とりあえずソースコードです。(口癖:とりあえずソースコードです)
main.js21行目~
//playerを描く関数
function player_draw(){
var player_img = new Image()
player_img.src="./player.png"
ctx.drawImage(player_img,px,py,ps,ps)
}
これはただ単にplayer.pngを読み込んで表示させるだけのプログラムです。
enemyの方も行きます。
main.js37行目~
function e_draw(){
for(var i = 0;i < ex.length;i++){
var enemy_img = new Image()
enemy_img.src = "./enemy.png"
ctx.drawImage(enemy_img,ex[i],ey[i],es,es)
}
}
とりあえずこんな感じ。一気にゲームっぽさが増したかもしれない(?)
今回のソースコード
これで一旦「javascriptでシューティングゲームみたいなものを作る」は終わりです。
お疲れさまでした。
今後ともゲーム開発頑張ってください。
それでは
player.png

enemy.png