本記事で学べるもの
- processingでのキャラクターの描画
- キー入力によるキャラクターの動作
アクションゲームをつくりたい
突然ですが「ゲーム」と聞いてまず思い浮かべるのは何でしょうか。
私の場合はスーパーマリオが思い浮かびます。私はゲームボーイ、ゲームボーイアドバンス、DSとやり込んできた世代です。
何百回クッパを倒したかわかりません。
あまり操作が上手いほうではなかったので、難しいステージは本当に苦労しました。
壁にすぐ挟まれるステージは特に苦手でした。
ゲームボーイアドバンスの時のマリオが壁に挟まれたときの表情と声が軽く私のトラウマになっています。
上手くいかないときが続くと精神が乱れやすいのか、ゲームが悪いんじゃないかと思ってしまうこともよくありました。
そんなときは、自分でゲームを自由自在に作れたらと憧れたものでした。
時は流れてプログラミングというアイテムを入手した今なら、自由自在にゲームをつくれるのではないかと思いつきました。
というわけで、デザインソフトのProcessingで横スクロールゲームをつくってみます。
いきなりマリオは作れないので、まずは「キャラクターが走る」ことと、「キャラクターに合わせて画面が動く」を実装したいと思います。
ゲームキャラクターの作成
PNGファイルで作成します。背景は透過しておきます。
ちょこちょこ足を動かして走ってもらいたかったので、移動時には足を少し動かした画像と交互に表示させていきます。
移動に関しては左右のキーを使います。
次のように変位xxと姿勢ppを変えています。
void keyPressed() {
println(x);
if (key == CODED) {
if (keyCode == RIGHT) {
if(x<max-wid/2){
x = x+5;
posi = 0;
}
} else if (keyCode == LEFT) {
if(x>min){
x = x-5;
posi = 1;
}
}
}
}Processingゲームの作成
キャラクターの動きに合わせて背景を動かします。
フリー素材を活用して背景を作成。
一気にアクションゲームらしくなりました。
『その１』はこれで完成。次回に続きます。
Processingのコードはこちら。
PImage hari1;
PImage hari2;
PImage hari3;
PImage hari4;
PImage stage;
int x = 100; //x position
int[] a = {0,0}; //x coefficient
int min = 0; //stage limit
int max = 3700; //stage limit
int posi = 0; //0:right,1:left
int wid = 800; //window size
int hig = 370; //sindow size
void setup() {
size(800, 370);
background(255, 255, 255, 255);
stage = loadImage("longstage1.png");
hari1 = loadImage("hari01.png");
hari2 = loadImage("hari02.png");
hari3 = loadImage("hari03.png");
hari4 = loadImage("hari04.png");
}
void draw() {
//draw stage
if(x<min+wid/2){
a[0] = 1;
a[1] = 0;
image(stage, 0, 0);
}
else if(x>max-wid/2){
a[0] = 1;
a[1] = 0;
image(stage, 2900, 0);
}
else{
a[0] = 0;
a[1] = 1;
image(stage, -x+400, 0);
}
//draw haribo
if(posi==0){
if(x%2==0){
image(hari1, x*a[0]+400*a[1], 231);
}else{
image(hari2, x*a[0]+400*a[1], 230);
}
}
else{
if(x%2==0){
image(hari3, x*a[0]+400*a[1], 231);
}else{
image(hari4, x*a[0]+400*a[1], 230);
}
}
}
void keyPressed() {
println(x);
if (key == CODED) {
if (keyCode == RIGHT) {
if(x<max-wid/2){
x = x+5;
posi = 0;
}
} else if (keyCode == LEFT) {
if(x>min){
x = x-5;
posi = 1;
}
}
}
}やはりゲームはつくっている最中が楽しいです。
次は「ビルや奈落の底などの複雑な地形」に進んでみようと思います。
続きます。
第2弾はこちら。
