プログラミング未経験だけどゲームつくる - 1 : キャラクターを動かす【LOVE2d】

こんばんは、サトウダイスケです。
言語はHTMLとCSSくらいしかいじれません。
そんな状態でゲーム制作をすることになりました。

取り敢えず目指すカテゴリーとしてはドット絵の2Dゲームです。
念願のゲーム制作ですが、ド素人なので温かく見守ってください！

環境はmacOSです。
使用するソフトは、
ドット絵制作にはAesprite。
コーディングはSublimeで、
言語はLOVE2dです。
選出理由は好きな作家さんが使ってたからです。

さて、インストールから！
と行きたいところですが、
自分の備忘録的な感じでやっていきたいので、
端折れることろは端折ります。
導入は色んな人が書いているので...

あと、あまり時間を掛けて書くと続かないので、
基本的には慣れるまでは殴り書きだと思います。

今日は早速ですが、キャラクターを動かしてみました。
冒頭に書いたとおり全くの初心者だし、
とかいいつつ実践から学びたいタイプなので、
なぜそうなる？はすっ飛ばして、やりながら覚えていきます。
海外のYouTubeのチュートリアルを見ながら、
Asepriteで作った猫ちゃんをアニメーションで動かすことができました。

アニメーションは動作のコマを並べた画像ファイルを使って、
座標で切り抜く場所を適宜ズラして描写するようです。

local character
local character_sprite

local fps = 3
local anim_timer = 1 / fps
local frame = 1
local num_frames = 2
local xoffset

function love.load()
    love.graphics.setBackgroundColor( 256, 256, 256 )
    love.graphics.setDefaultFilter('nearest', 'nearest')
    character = love.graphics.newImage('images/neko_for_sprite.png')
    character_sprite = love.graphics.newQuad(0, 0, 16, 16, character:getDimensions())
end

function love.update(dt)
	if dt > 0.035 then return end
	anim_timer = anim_timer - dt
	if anim_timer <= 0 then
		anim_timer = 1 / fps
		frame = frame + 1
		if frame > num_frames then frame = 1 end
		xoffset = 16 * frame
		character_sprite:setViewport(xoffset-16, 0, 16, 16)
	end
end

function love.draw()
	love.graphics.draw(character, character_sprite, 640/2-6*16/2, 100, 0, 6, 6)
end

作った画像が2コマしかないので、
せっかく16pxずつx軸をズラしてるのにあんま意味ないですね。

fpsの変数をいじるとスピードが変わります。
1秒に3回絵が変わるということです。

あと、

love.graphics.setDefaultFilter('nearest', 'nearest')

これですけど、画像を拡大したときにボケてしまうのを補正してくれるコードみたいです。こういうので躓きそうだからゼロから作るチュートリアル動画マジで助かった...

love.graphics.setBackgroundColor( 256, 256, 256 )

これは背景色の設定です。
引数はred,green,blueの順で、256が一番明るい状態です。
256,256,256は白で、0,0,0は黒。
この辺はrgbのことなのでわかりやすかった。

if dt > 0.035 then return end

これは、処理落ち対策みたいです。
細かいことはまだよくわかってないですが、
dtというのが(微積を思い出す)前回処理してからの経過時間らしいので、
それが0.035秒以上経ってしまっているときはストップ！といった感じなのかな。

こんな感じ。

正直ここからどうやったらゲームになっていくのか、
折れないで頑張れるのか不安ですが...
とりあえずこの猫ちゃんを走らせたりジャンプできるようになるまでがんばります！

では！