プログラミング

ゲームの作り方を2週間で教えていく!まずはクソゲーから

これまでのあらすじ

ルアは同じ高校、同じ部活の後輩コロナにプログラミングを教えてもらっていた。一方コロナはコロナでルアの事が好きだから別にいい感じみたいな女子高生的思考を巡らせていたが、ルアのあまりの馬鹿さにだんだん腹が立ってきていた。

あわせて読みたい
ゲームの作り方を2週間で教えていく!ルアくん奮闘記ゲームの作り方教えます! ルア奮闘記シリーズではcorona sdkというゲーム開発環境を使いlua言語でプログラミングしていき、ゲー...

なんだこれ。何だこの物語。どうでもいいよ!とりあえずゲーム作るぞ!

とにかくクソゲーを作るぞ!

コロナさん
コロナさん
さて、もうゲームを作る準備は終えましたが、どんなゲーム作りたいですか?
ルアくん
ルアくん
パズ〇ラとかモン〇トとかFG〇みたいなやつだな!
コロナさん
コロナさん
なるほど。最初に言っておきます。まだ無理です!
ルアくん
ルアくん
何ぃ!?!?!?じゃあ俺は一体何を作ればいいんだ!?
コロナさん
コロナさん
それは…クソゲーです!

よくクソゲーと言われている物は単純な仕組みで動いていることが多いです。そのためまずはクソゲー作りから始めるのがゲーム作り上達への近道です!

STEP1:ゲーム作りを始める手順

コロナさん
コロナさん
まずは↑のアイコンをクリックしてください。デスクトップにない場合はPC内を検索してくださいね

https://weeks-game.com/2018/07/06/serchpcfile/

ルアくん
ルアくん
おっけー!うぉ!変な画面になった!
コロナさん
コロナさん
白い画面が出てきた後に黒い画面が出てきたと思います
ルアくん
ルアくん
おぉ、出てきた出てきた!
コロナさん
コロナさん
白い画面は無視してください。今はまだ使いません
ルアくん
ルアくん
なるほど。秘められし力って事か…
コロナさん
コロナさん
そうかもしれませんね!後で説明しますよ!
コロナさん
コロナさん
次に赤い丸に囲われたNew Peojectをクリックしてください
コロナさん
コロナさん
こんな画面が出てきますが「application name」に「balloontaps」と入力してOKを押してください
ルアくん
ルアくん
無理だ!
コロナさん
コロナさん
どうしました!?
ルアくん
ルアくん
英語がわからん!!ってか怖い!!死ぬ!!!
コロナさん
コロナさん
落ち着いてください!別に英語わかんなくても出来ます!!
ルアくん
ルアくん
俺は一体どうすれば…
コロナさん
コロナさん
(ちくしょおお!!またこいつの英語アレルギーかよ!いい加減直せよ!!)

10分後…

ルアくん
ルアくん
終わった…のか…?
コロナさん
コロナさん
(コピペに10分かかる人初めて見た…)
コロナさん
コロナさん
えーnameを変えたら後は右下のOKを押してください!
ルアくん
ルアくん
オッケー!OKだけにな!
コロナさん
コロナさん
(殺すぞ)
ルアくん
ルアくん
うぉ!激デカサムスンが出てきた!!
コロナさん
コロナさん
これでパソコン内で実際のゲーム画面を見ることが出来ます。ただデカすぎるので少し設定をいじりましょう。
コロナさん
コロナさん
これで丁度いい大きさになりましたね
ルアくん
ルアくん
おー色々なスマホで出来るんだな!
コロナさん
コロナさん
そうなんです!今度試してみてください!
コロナさん
コロナさん
次に以前ダウンロードした「sublimetext3」を起動してください
コロナさん
コロナさん
起動したら、↑のようにFileからOpenFileをクリック
コロナさん
コロナさん
色々なファイルが出てきますが PC→ドキュメント→Corona Projects→balloontaps→main.luaの順でクリックしてください
コロナさん
コロナさん
こんな画面になったら成功です!
ルアくん
ルアくん
よっしゃああ!終わったああああああ!
コロナさん
コロナさん
いや、ここから始まるんです…

corona sdkでゲームを作る際に毎回やる作業なので、忘れてしまったらまたこの記事を見に来てください!

STEP2:いよいよプログラミング開始!

コロナさん
コロナさん
の前に画像をダウンロードしてきましょう
ルアくん
ルアくん
画像?何の画像だ?
コロナさん
コロナさん
ルア先輩。ゲームのキャラクターってプログラミングで描かれてるわけではないんです。あれは、プログラミングで画像を表示してるだけなんです!
ルアくん
ルアくん
な、なんだってー!
コロナさん
コロナさん
という事で1にも2にも画像をダウンロードしてきましょう
コロナさん
コロナさん
こちらをクリックしてzipファイルをダウンロードしてください
コロナさん
コロナさん
中はこんな感じになってます
コロナさん
コロナさん
この中の「background」「balloon」「platform」を先ほど「sublimetext3」で開いた「balloontaps」のファイルに入れます
ルアくん
ルアくん
あれ、さっきどうやって開いたんだっけ?
コロナさん
コロナさん
PC→ドキュメント→Corona Projects→balloontapsという順番です!
ルアくん
ルアくん
よし!入れられたぞ!

同じファイル内に入れないと画像を読み込めないので気を付けましょう

コロナさん
コロナさん
流石です!先輩!後はコードを打ち込むだけです!
ルアくん
ルアくん
よし任せろ!!
コロナさん
コロナさん
「sublimetext3」の黒画面に文字を打ち込みましょう!まずはこちら!

local background = display.newImageRect( “background.png”, 360, 570)

コロナさん
コロナさん
打ち込んだらCtrl+Sを同時押ししてみてください!
ルアくん
ルアくん
おぉ!微妙に画像が表示された!!
コロナさん
コロナさん
そうなんです!今のはbackgroundという画像を表示してくださいというコードなんです

プログラミング学習のコツ

  • コードの意味を理解しながら学習していくと身につく力が倍増していきます!
  • コピーペーストだけでなく実際に自分でコードを打っていきましょう!
コロナさん
コロナさん
じゃあ次は画面全体に画像が表示されるようにしましょう!

background.x = display.contentCenterX
background.y = display.contentCenterY

コロナさん
コロナさん
打ち終えたらまたCtrl+Sをお願いします!

コードを打ち終えたら「Ctrl+S」習慣化していきましょう!

ルアくん
ルアくん
おぉ!いい感じだ!
コロナさん
コロナさん
今のは画像を真ん中に表示してくださいというコードです!
コロナさん
コロナさん
ではジャンジャン画像を表示させていきましょう!

local platform = display.newImageRect(“platform.png”, 300, 50 )
platform.x = display.contentCenterX
platform.y = display.contentHeight-25

ルアくん
ルアくん
打ち込んだらCtrl+Sだな!
ルアくん
ルアくん
変な足場キタアアアアアアアアアア!!
コロナさん
コロナさん
良い感じです!ちなみに画像の名前の横にある数字(300,50)というのが画像をどれくらいの大きさで表示するかという数値です。
コロナさん
コロナさん
足場と背景の空の横幅が違うのはこの数値が違うからなんです! 最初が横幅、次に縦幅と覚えましょう!

基本的にプログラミングではX=横 Y=縦 という意味です。

暇なときに数字をいじって遊んでみましょう!

ルアくん
ルアくん
なるほどな!だんだんわかってきたぜ!
コロナさん
コロナさん
次はこれで!

local balloon = display.newImageRect(“balloon.png”, 112, 112 )
balloon.x = display.contentCenterX
balloon.y = display.contentCenterY

ルアくん
ルアくん
風船浮いたあああああああああ!!
コロナさん
コロナさん
はい!じゃあこんな感じで終わります!
ルアくん
ルアくん
え?ここでおしまい?
コロナさん
コロナさん
はい。おしまいです。また次回です。
ルアくん
ルアくん
俺のこの昂ぶりはどうすれば…
コロナさん
コロナさん
数字いじって遊んでてください!!
ルアくん
ルアくん
風船膨らんだああああああああ!!
コロナさん
コロナさん
ではまた!

次回予告

どうでしょうか?大体プログラミングはこんな感じかな~と掴めてきましたか?次回はなんとなんと!物理エンジンを組み込みます!と聞くと難しく聞こえますが、コードでいうなら1行だけで済みます。

実際に重力や風船の弾む力などを設定していき、動くようにしていきますのでお楽しみに!

二人の進展?なにそれ?

ではまた!

あわせて読みたい
ゲームの作り方を2週間で教えていく!まずはクソゲーからこれまでのあらすじ ルアは同じ高校、同じ部活の後輩コロナにプログラミングを教えてもらっていた。一方コロナはコロナでルアの事が好きだから...