今回の仕上がりは、こんな感じ
水色の背景にハートを三つ、下に草地を並べた静止画面です。素材の形・色は変えず、背景と配置を編集部が用意しました。画像を押すと、実際のHTMLを開けます。操作できるゲームや、完成ゲームのプレイ画面ではありません。
使用例を大きく見る · 使用した二枚・ライセンス・出典を保存
今回使用したのはTiles/tile_0001.pngとTiles/tile_0044.pngです。分かりやすいよう配布例ではgrass.pngとheart.pngへ改名しました。別の素材セットまでまとめたZIPではありません。
寄付せず無料で保存できる？
- 公式のPixel Platformerページで、作品名と「Creative Commons CC0」を確認します。「Download」を押すと寄付の案内が開きます。
- 無料で取得する場合は「Continue without donating...」を押します。「Get All-in-1 bundle」は別のまとめ商品への導線なので、今回の操作には使いません。
kenney_pixel-platformer.zipを保存し、新しいフォルダーへ展開します。今回保存した公式ZIPは260,312バイトでした。License.txtを開き、Pixel Platformer 1.2、Kenney、CC0の表記を確かめます。続いてTiles内の二枚のPNGを選びます。- HTMLと同じフォルダーへ画像を置き、下のCSSで表示サイズを指定します。使用例の地面は72×72px、ハートは54×54pxです。
公式ページの「Files 200×」はセット全体の表示です。今回のTilesフォルダーでは180枚のタイルを確認しました。背景・キャラクター用のシートも含まれますが、今回の記事では二枚の配置だけを試しています。
18pxの画像を拡大すると、どうしてぼやける？
小さな画像を通常の拡大で表示すると、ブラウザが中間の色を作って輪郭を滑らかにする場合があります。ドットの四角さを保つため、今回はimage-rendering: pixelatedを指定しました。画像自体を書き換える操作ではなく、ブラウザでの表示方法です。
.ground img {
width: 72px;
height: 72px;
image-rendering: pixelated;
}
.hearts img {
width: 54px;
height: 54px;
image-rendering: pixelated;
}元画像は18×18pxです。地面は4倍、ハートは3倍にしました。画面幅に合わせて中途半端な大きさへ縮めるより、整数倍で並べるとドットの大きさをそろえやすくなります。すべての端末で同じ描画になると保証するものではありません。
ゲームで動かすには、当たり判定や操作のコードが別に必要です。絵を置いただけでゲームにはなりません。開発講座04の試作品では、自作図形で移動と落下を先に確かめています。連載へこの素材を勝手に取り込まず、素材選びは第07回の予定を維持しました。
商用利用と作者表記は？
公式ページと取得ZIP内のLicense.txtはCC0を示し、個人・教育・商用利用を許可しています。作者表記は必須ではないと説明されていますが、この使用例とZIPにはKenney様の名前、作品名、公式URLを残しました。作者への敬意と出典の確認に役立てるためです。
「無料」と「どの素材でも同じ条件」は別です。他のセットを使うときも、その作品ページと同梱ライセンスを確かめてください。この紹介では公式ZIP全体の代わりに、使用した二枚と条件の記録だけを配布しています。
PCでの公式ダウンロード、展開、二枚のPNG表示と作例への配置を確認しました。390px幅でのサイトと作例の表示も確認しました。ゲームエンジンへの導入、キャラクターのアニメーション、全素材、スマホだけでのZIP展開は未検証です。作者のXへリンクしていますが、最近の投稿や人気の規模は確認していません。UIの部品を探す場合はKenney UI Packの使用例もあります。