アットウィキロゴ

初心者向けガイドからゲーム作りの基本を学ぶ (part.1)

公式が推奨している初心者向けガイドの動画を参考に、プロジェクトを作る方法をまとめたページです。



セットアップ

Githubからテンプレートをダウンロード
まずは Githubからテンプレートをダウンロードします。
Codeから「Download ZIP」を選んでダウンロード。
VSCodeの設定
VSCodeを開いて、ダウンロードした「playdate-template-main」のフォルダを開きます。

拡張機能が必要なので、"@recommended" で検索して「Playdate Debug」と「Lua」をインストールします。
README.mdを削除
README.mdは不要なので削除しておきます。

テンプレートプロジェクトの概要

sourceフォルダ
sourceフォルダには「main.lua」「pdxinfo」が含まれています。
  • main.lua: エントリポイントとなるプログラムコード
  • pdxinfo: プロジェクトのメタデータの定義
buildsフォルダ
ここには Playdateの実行ファイル「.pdx)が出力されます。
初期状態では "buildsFolder.txt" がありその説明が記載されています。
When you build your game using the build task, the compiled game executable (.pdx) gets placed in this folder.
The game executable is what you share with others so they can play your game.

You can delete this .txt file

ビルドタスクを使用してゲームをビルドすると、コンパイルされたゲーム実行ファイル(.pdx)がこのフォルダに配置されます。
このゲーム実行ファイルは、他のユーザーがゲームをプレイできるように共有するものです。

この.txtファイルは削除しても構いません。
なので「buildsFolder.txt」は削除して問題ありません。
.vscodeフォルダ
VSCodeで実行するための設定が記述されていて基本的には変更不要。
プロジェクトの実行
テンプレートプロジェクトを実行するには、メニューから「実行 > デバッグの開始」を選びます。

サンプルプロジェクトはクランク操作を受け付けます。
シュミレーターでクランクを動かすには以下の方法があります。
  • ホイールを回す
  • キーボードの "[" (左回り) と "]" (右回り) を使う
または以下の部分をマウスのドラッグ操作で回すことも可能です。

初期コードの解説

初期コードに日本語の解説を入れておきました。
+ main.lua
-- =============================================================
-- 以下は、クランクを使って円を動かすことができる簡単なサンプルプログラムです。
-- このファイルの内容はすべて削除しても構いませんが、
-- Playdate.update 関数は必ず追加してください。
-- Playdate ゲームには必ずこの関数が必要です!
-- =============================================================
 
-- drawCircleAtPointとcrankIndicatorで使用されるライブラリをインポートします.
import "CoreLibs/graphics"
import "CoreLibs/ui"
 
-- ライブラリの機能の名前を短くして使いやすくします.
local pd <const> = playdate
local gfx <const> = playdate.graphics
 
-- プレイヤーの変数を定義します.
local playerSize = 10 -- プレイヤーのサイズ
local playerVelocity = 3 -- プレイヤーの速度
local playerX, playerY = 200, 120 -- プレイヤーの初期位置
 
-- プレイヤーの画像を描画します.
local playerImage = gfx.image.new(32, 32)
gfx.pushContext(playerImage)
    -- アウトラインを描画
    gfx.drawRoundRect(4, 3, 24, 26, 1)
    -- 画面を描画
    gfx.drawRect(7, 6, 18, 12)
    -- 目を描画
    gfx.drawLine(10, 12, 12, 10)
    gfx.drawLine(12, 10, 14, 12)
    gfx.drawLine(17, 12, 19, 10)
    gfx.drawLine(19, 10, 21, 12)
    -- クランクを描画
    gfx.drawRect(27, 15, 3, 9)
    -- A/Bボタンを描画
    gfx.drawCircleInRect(16, 20, 4, 4)
    gfx.drawCircleInRect(21, 20, 4, 4)
    -- D-Padを描画
    gfx.drawRect(8, 22, 6, 2)
    gfx.drawRect(10, 20, 2, 6)
 
gfx.popContext()
 
-- valueをmin〜max範囲内でループ.
local function ring(value, min, max)
	if (min > max) then
        -- 最小と最大が逆になっている場合は入れ替えます.
		min, max = max, min
	end
	return min + (value - min) % (max - min)
end
 
-- playdate.update 関数は必ず追加しなければいけません.
function playdate.update()
    -- 画面をクリア
    gfx.clear()
 
    if pd.isCrankDocked() then
        -- クランクがドックされている (収納されている) 場合はクランクインジケーターを描画します.
        pd.ui.crankIndicator:draw()
    else
        -- クランクの角度から速度を計算します.
        -- getCrankPosition()は上始まりの時計回り.
        -- -90で右から開始。時計回りなのでsinにマイナスをかけない.
        local crankPosition = pd.getCrankPosition() - 90
        local xVelocity = math.cos(math.rad(crankPosition)) * playerVelocity
        local yVelocity = math.sin(math.rad(crankPosition)) * playerVelocity
        -- プレイヤーを移動します.
        playerX += xVelocity
        playerY += yVelocity
        -- プレイヤーの位置をループさせます.
        playerX = ring(playerX, -playerSize, 400 + playerSize)
        playerY = ring(playerY, -playerSize, 240 + playerSize)
    end
 
    -- テキストを描画します.
    gfx.drawTextAligned("Template configured!", 200, 30, kTextAlignment.center)
 
    -- プレイヤーを描画します.
    playerImage:drawAnchored(playerX, playerY, 0.5, 0.5)
end
 

使用している関数の概要
使用している関数の概要は以下の通り。
playdate
playdate.graphics
playdate.graphics.image
playdate.ui.crankIndicator
  • draw(): クランクの取り出しを促すUIの描画

次のステップ

スプライトなどの機能を学ぶために次のページに移動します。
初心者向けガイドからゲーム作りの基本を学ぶ (part.2)

参考


関連ページ

最終更新:2026年04月26日 19:16