見出し画像

5分でできるブロック崩しの作り方

小栗さえ

Vtuber向けのツール開発をしている小栗さえと申します!

今回は誰でも簡単にブロック崩しが作れるブロック崩しメーカーを作りました。画像の用意さえあれば5分程度でブロック崩しゲームが作れます。

操作方法はマウス左クリックで開始、もう一度押すとゲームが中断(ポーズ)します。

準備:画像の用意

ブロックを崩した後のイラスト(body.png)と、ブロック用のイラスト(wear.png)の2枚の画像が必要になります。
ブロック用のイラストは透過pngで用意してください、透過部分はブロックとして判定されません。

画像12

画像の解像度に制限はありませんが、縦800px以内が推奨です。
(横長の画像でも問題なく動くと思います、たぶん)

ブロック崩しの作り方

サンプル作品をブラウザで表示して、右上のフォーク(複製)アイコンからフォークメニューを出し、右下のフォークボタンを押します。

画像1

Open Processing のアカウントが必要なので登録します。

画像2

画像3

フォーク(複製)が実行され、登録したアカウントに紐づく新しいURLができます。URLの作品IDが元の作品ID『1369738』と異なっていれば別の作品として複製できています。

画像4

次に画像の差し替えを行います。作品の編集画面を開き、プロパティメニューを出します。

画像5

画像6

Filesタブから select を押して body.png と wear.png をアップロードします(上書きされます)。

画像7

ファイルがアップロード出来たら実行して動作を確認します。

画像8

必要に応じてソースコード★部分の数値を変えて難易度を調整してください。

画像9

編集が完了したらSaveを押して変更を確定します。

画像10

その他作品情報やサムネイルなどを設定する場合は『i』を押して編集します。

画像11

完成です。URLをコピーして自由にお使いください。
ソースコードの改変は自由(要フォーク)、また作った作品は商用、非商用問わずお使いいただけます。

サンプル作品の素材は以下よりお借りいたしました。

その他制作ツール

昔つくったやつです。



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!