デフォーマの追加2

 こんにちは、インターン生の逸見です。第7回目の今回は、デフォーマの追加2という内容で紹介を行っていきます。

 前回の第6回目では2種類あるデフォーマのうちの回転デフォーマについて紹介しました。第7回目ではワープデフォーマについて紹介していきます。

 前回紹介した通り、デフォーマはアートメッシュを入れることで、それに動きをつけることができます。ワープデフォーマは、中にあるアートメッシュを変形させて動きをつけることができるデフォーマです。ここでは髪とリボンに揺れの動きがつくように、ワープデフォーマを設定していきます。

 まず、髪の揺れの動きをつけていきます。今回の髪のパーツは前髪と横髪、後ろ髪の3つに分けられており、最初は前髪から動きをつけていきます。選択するパラメータは、髪揺れ前という名前のパラメータです。前回と同様に前髪の揺れの動きをつけるため、前髪以外のパーツには鍵をかけておきます。

 前髪のアートメッシュを選択した状態で、画面の上の方にある[ワープデフォーマの作成]を選びます。

 回転デフォーマの作成時のようにワープデフォーマを作成というダイアログ出てきます。任意の名前をつけ、挿入先のパーツと追加先を選びます。名前は前髪の揺れにしておきます。挿入先のパーツは前髪にし、追加先は[選択オブジェクトの親に設定]を選択します。
 ワープデフォーマでは前回の内容に加え、ベジェの分割数と変換の分割数という部分があります。今回は、ベジェの分割数を2×2、変換の分割数を5×5にしておきます。このように設定ができたら[作成]を選択してワープデフォーマを作ります。

 ワープデフォーマは、四角いデフォーマを変形することで、中のアートメッシュの変形を行うことができます。パラメータ設定は、パラメータ編集の時と同じように設定します。画面の上にある編集レベルという部分は、今回はレベル2にしておきます。パラメータでは、最初の髪の位置と左右に揺れた状態の位置の3点分のキーを設定します。

 揺れの動きをつけるためのデフォーマの変形については、デフォーマの下の部分を動かすことで揺れの動きがつけられます。デフォーマの下を横に動かして左右それぞれに、揺れた状態に変形させます。

横髪と後ろ髪は、前髪よりも少し大きく動きをつけました。

リボンの動きについても同様のやり方で行います。

これで揺れの動きをつけることができました!

 以上がデフォーマの追加2の内容になります。よろしければ作業の参考にしてみてください!

 次回はアニメーショ制作1という内容で紹介を行っていきます。次回もよろしくお願いいたします!

興味を持たれた方はお気軽にお問い合わせください。

デフォーマの追加1

 こんにちは、インターン生の逸見です。第6回目の今回は、デフォーマの追加1という内容で紹介を行っていきます。

 まず、デフォーマについて説明していきます。デフォーマとは、アートメッシュを入れることで、それに動きをつけることができます。デフォーマには、回転デフォーマとワープデフォーマの2種類があります。今回のデフォーマの追加1では、そのうちの1つである回転デフォーマについて紹介していきます。

 今回行う回転デフォーマとは、名前の通り回転の動きをつけることができるデフォーマです。回転は角度を設定することでつけることができます。ここでは顔と腕に回転の動きがつくように、回転デフォーマを使用します。

 まず、顔の回転の動きをつけていきます。選択するパラメータは、角度Zという名前のパラメータです。顔の回転の動きをつけるため、顔のパーツと一緒に動くパーツ以外に鍵をかけておきます。動かす必要のないパーツを動かさないようにするためです。

 顔の回転では、顔と一緒に髪や目なども回転する必要があります。ここで顔のパーツだけにデフォーマで動きをつけると、髪や目などのパーツは一緒に動いてくれないため、一緒に動くパーツを全て選択して回転デフォーマに挿入します。顔と一緒に動くパーツを全て選択した状態で、上の方にある[回転デフォーマの作成]を選びます。

出てきた回転デフォーマを作成というダイアログでは、任意の名前と挿入先のパーツ、追加先を選びます。今回の名前は顔の回転にしておきます。挿入先のパーツは顔にし、追加先は[選択オブジェクトの親に設定]を選択します。このように設定ができたら[作成]を選択して回転デフォーマを作ります。

 回転デフォーマは、赤い円の中心を軸に回転します。回転させたい位置とできた回転デフォーマがずれている場合は、[Ctrl+マウスドラッグ]で位置の調整を行うことができます。

回転の動きは、棒の部分を傾けて動かし、パラメータ編集と同じように設定します。パラメータでは、最初の顔が真っ直ぐの位置と左右に傾けた状態の位置の3点分のキーを設定します。これで顔の回転の動きをつけることができました!

 腕の動きについても同様に行います。

 以上がデフォーマの追加1の内容になります。よろしければ作業の参考にしてみてください!

 次回のデフォーマーの追加2ではワープデフォーマについて紹介を行っていきます。次回もよろしくお願いいたします!

興味を持たれた方はお気軽にお問い合わせください。

変数でライフやスコアを作ろう(後編)

こんにちは、インターン生の鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、最終回となる第10回のテーマは変数でライフとスコアを作ろう(後編)」です。

前回はライフの変数を作って敵キャラに耐久力を持たせてみましたが、
今回は前回の最後に作ったオブジェクトを使って、
・スコア用の変数を作る
・作った変数をスコアとして表示する
・敵キャラを倒した時にスコアが増えるプログラムを作る
の3段階に分けて説明していきます。
細かいところまで説明すると本当に複雑なので、「とりあえず説明を読んで同じ事をすれば実行はできる!」という最低限の説明に留めました。

・スコアの変数を作る-グローバル変数の定義-
ではスコアの変数を作ります。前回でライフの変数を作ったし、今回も同じように…ではありません。
さっき作ったライフはキャラがそれぞれ持つ変数ですが、スコアは1個あればいいし、何より敵を倒した時にスコアが増えるようにしたいですよね。
そういう「他のオブジェクトの動きと連動させたい変数(今回のスコアもこれ)」や「ゲーム全体の動きにかかわる変数(制限時間などです)には、グローバル変数を使いましょう。
グローバル変数は簡単に言うと「プログラム全体のどこからでも中身を出し入れできる変数」です。他にも色々意味はあるんですが難しいので省略します。

ではやっていきます。前回の最後に作ったtokutenオブジェクトのCreateイベントにCommonカテゴリの「Set Global Variable」ブロックを置きます。

Nameをtensuに、Valueを0にします。この辺はライフの変数を作った時と同じです。
これでスコア用の変数ができました。

・スコアを表示する -Drawイベント-
次にDrawイベントに移ってスコアを表示する処理を作りましょう。
ブロック一覧のDrawingカテゴリにある「Draw Value」ブロックを置いてみましょう。

ブロックを置いたら、上から
Caption欄に「”score:”」
Value欄に「grobal.tensu」
XとYには100を入れてRelativeのチェックは外します。

これでスコアの変数を画面に表示する処理ができました。一度Runしてみて画面に「score:0」という文字列が出るか確認してみてください。
これで、グローバル変数tensuの中身をスコアとして表示するプログラムができました!

・フォントを設定する
「スコアが出たはいいけど文字が小さい!」とか「文字のフォントを変えたい!」という声もあると思います。
そこで、GMS上で使うテキストのフォント設定の方法を紹介します。
画面右のリソースツリーの中に「Fonts」という項目があります。ここにフォントの設定データを作ることができます。

オブジェクトやスプライトを作るときと同じように、Fontsを右クリック→Create Fontを選択。

フォントデータの設定画面が出てきます。

とりあえず今使うのはSizeです。わかりやすく大きくしたいので25にします。

これで大きい文字の設定ができました。実際に使うには、描画をする処理の前にフォントを指定してあげないといけません。
tokutenオブジェクトのDrawイベントに戻ります。Drawingカテゴリの「Set font」ブロックを『Draw Valueブロックの上に』出しましょう。

これがフォントを設定する処理です。Font欄の右にあるボタンを押すとフォントの一覧が出るのでさっき作ったフォントデータを指定します。

フォントの設定ができていたらもう一度Runしてみましょう。「score:0」の文字列が大きくなっていれば成功です!

・スコアを変化させる
最後に、敵キャラを倒した時に得点が増えるプログラムを作ります。
敵キャラに関するイベントなので…そう。enemyオブジェクトですね。
敵キャラが消える時にスコアが増えればちょうどいいタイミングになりそうです。
なので、shotオブジェクトとの衝突イベント内、Destroy Instanceブロックの直前にスコアが増える処理を入れてみます。
Set Global Variableブロックを画像のような並びになるようにドラッグします。Destroy Instanceブロックの真上に持っていくとうまくいくはず。

Name欄にtensu,
Value欄に100と入れ、Relativeにチェックを入れます。
これで、敵キャラが倒される際にグローバル変数tensuが100増えるようになりました。
Runしてみましょう。敵が倒された時にスコア表示が100増えていれば成功です!

さっきtokutenオブジェクトでtensuの中身をscoreとして表示するようにしたので、他のイベントでtensuの数値が変わると表示にダイレクトに反映されます。
このように、グローバル変数は複数のオブジェクトをまたにかけて処理する時に使うと便利です。

・まとめ
スコアの出し方もわかっていよいよこれから!…というところなのですが、この記事はここで終わります。
この記事で説明するのはあくまで基本操作。ここから先は自分が作りたいゲームのアイデアを元に、色々と試行錯誤をしてみるのが一番です。
この記事を読んでGMSを使ってみた人の中には「もっとこういう機能があればアイデアを実現できるのに!」と思う人もいるかもしれません。
もしそうなったら、ドラッグ&ドロップではなくGMLを使った本格的なゲーム作りに挑戦してみましょう。GMLを使うとドラッグ&ドロップよりも自由度の高いプログラミングができ、様々なゲームを作りやすくなります。
自分がこのインターンの中で作ったゲームもGMLを使って作られています。制作中にに参考にしたサイトをこの記事の最後に載せているので、そちらも見てみる事をおすすめします。

・記事を振り返って
「GMSなら簡単にゲームを作れる!」とか「プログラミング未経験でも大丈夫!」などと言っておきながら半ば投げっぱなしの形で終わってしまいすみません。
自分の記事を振り返って良かったなと思う所は、どういう操作をするか強調して、作業画面の遷移をなるべく図説できるようにまとめた所。
反省点は終盤の内容を詰め込みすぎた所です。

拙い記事でしたが、最後まで読んでいただきありがとうございました。
GameMakerStudioがもっと日本で流行って、Unityに負けないくらい関連書籍やリファレンスが充実しますように。

2018年 鶴田 義直

・参考にしたサイト(敬称略)
チャレンジ!GMS/GameMakerStudio 1.4 Blog
http://prester.org/gms/?page_id=57

Game Maker まとめWiki
https://www.wikihouse.com/GameMaker/

※記事中の画像はすべてGameMaker Studio 2のスクリーンショットを加工したものです。

興味を持たれた方はお気軽にお問い合わせください。

目のパーツについて

 こんにちは、インターン生の逸見です。第5回目の今回は、目のパーツについて紹介させていただきます。

 目は複雑な構成になるため他のパーツよりも少し難しくなります。そのため、他のパーツとは別に目のパーツの動かし方を紹介する回を作りました。目のパーツについては、今回で画像のレイヤーの分け方からパラメータ編集まで紹介していきます。

 まず、レイヤー分けについてです。今回は上瞼、下瞼、白目、虹彩、ハイライトの5つのレイヤーで目が構成されています。レイヤーの順番は上から上瞼、下瞼、ハイライト、虹彩、白目となっています。

 メッシュの編集については第3回で紹介したように、自動生成と手動生成を使い分けて作成します。上下の瞼は手動で行い、それ以外は自動生成で作成しました。

 Live2Dでアニメーションを動かすために、目も前回の口ようにつけたい動きを設定していく必要があります。でもその前に、うまく動かすために虹彩にクリッピング機能を使用します。クリッピング機能をすることの利点は、光彩をその下の白目にクリッピングすることで目の変形がやりやすくなります。
 クリッピングのやり方は、まず、白目を選びそのIDをコピーします。白目のIDはインスペクタパレットという部分の2行目にあります。IDをコピーしたら、次に虹彩を選択します。光彩のインスペクタパレットの5行目のクリッピングとあるところに、先ほどコピーしたIDをペーストします。これを左右の目にそれぞれ行っていきます。こうすることで、虹彩が白目の上にあるときに表示されるようになりました。

 パラメータ設定については、今回は笑顔の目を行います。
 目の笑顔パラメータと上瞼を選択し、目を閉じるときのキーに合わせます。その状態で上瞼を下瞼の位置まで下に移動させます。そして、下瞼の形に合わせます。前回である第4回で紹介した変形パスツールを使い変形させると、目の開閉の動きも作ることができます。このときに、上瞼の横の長さが変化してしまうと笑顔や瞬きをしたときに、目が拡大、縮小しているように見えてしまいます。そのため、横の長さはできるだけ変わらないようにします。
 次に、白目を選択し変形させていきます。白目は目が閉じている状態のときに瞼からはみ出ないようにつぶします。白目をつぶすことで虹彩も表示されなくなります。

 最後に、ハイライトについてです。ハイライトは目を閉じていくときに場所が変化していきます。そのため、目を閉じたときにハイライトもついてくるように設定します。目を閉じるときのキーで瞼と重なる位置に移動させます。こうすることで目を閉じると上瞼と一緒にハイライトの位置も下げることができます。

 これらも左右の目にそれぞれ行います。

 これで、笑顔の目の動きができるようになりました!

 以上が目のパーツについての紹介になります。よろしければ作業の参考にしてみてください!

 次回は、デフォーマの追加1という内容で紹介を行っていきます。次回もよろしくお願いいたします!

興味を持たれた方はお気軽にお問い合わせください。

変数でライフやスコアを作ろう(前編)

こんにちは、インターン生の鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、第9回のテーマは「変数でライフとスコアを作ろう(前編)」です。
最終回に向けて、2回にわたって変数を使った処理をやっていきます。

プログラミングを勉強していれば絶対に扱う変数ですが、そうでない人にとっては数学で聞いたことあるかも?くらいのものだと思います。
でも実は、得点(スコア)やプレイヤーや敵キャラの体力(ライフ)をはじめ、ゲームに出てくる数字はほとんど変数を使って管理されています。
変数についてのお勉強…は、ここでは時間が足りないので省略!
今回はGMSのドラッグ&ドロッププログラミングで変数を扱う方法を紹介します。
第8回で作ったプロジェクトに付け足す形で作っていきますから、前回作ったプロジェクトを開いてから記事を読んでいってください。
(間違えてやり直したくなった時のために、Fileタブの「Save Project As」から別の名前でプロジェクトを保存して第8回の内容を残しておくことをおすすめします)

・キャラのライフを設定しよう-変数の初期化-
前回、「キーを押すとキャラから弾が出て、当たった敵が倒される(消える)」というプログラムを作りました。
これをちょっと改造して、敵に弾を3発当てないと倒せないように設定を変えてみます。つまり、敵キャラにライフを設定するわけです。

早速やっていきましょう。敵キャラを改造するので、敵キャラのオブジェクトをいじっていくことになります。
enemyオブジェクトのイベント一覧にCreateイベントを追加して、その中にCommonカテゴリの「Assign Variable」ブロックを出します。

このブロックは単純な数値型の変数を扱うときに使います。定義も代入もこれ1つでできます。(プログラミング経験者向けの説明)
ブロックを出したらName(変数名)欄にlifeと、Value(変更後の数値)欄に3と入れましょう。Relativeにチェックはしません。
これで、「lifeという名前の新しい変数を作って、初期値に3を代入する」というプログラムができました。

このlifeという変数を文字通り敵キャラのライフとして使っていくのですが、そのためには
・キャラが弾に当たったとき、そのキャラのライフを減らす
・ライフが0になった敵キャラが消える
という二つの処理が必要になります。順番に作り方を説明していきますね。

・弾に当たるたびライフが減る-変数の代入
変数は作って終わりではなく、プログラムによって数値を変えたり参照・代入したりできます。
今回は「キャラが弾に当たったとき、キャラのライフが減る」という処理を使って解説していきます。
enemyオブジェクトには前回作った「弾に当たったときこのインスタンスを消す」というプログラムが残っているはずなので、
これを改造してライフが減るようにしてみましょう。
shotとの衝突イベントの中にあるDestroy Instanceブロックを消します。(本当に消すか警告が出るのでOKを押しましょう)
ブロックが消えたのを確認して、さっきと同じAssign Variableブロックを出します。

同じブロックですが、今回は新しく変数を作るのではなくすでに作ってある変数の中身を代入する(書き換える)のに使います。
Name(代入する変数名)にさっき作った変数の名前(例だとlife)を、Value(変更後の数値)に-1を入れ、Relativeにチェックを入れましょう。
これで「shotオブジェクトのインスタンスにぶつかった時、変数lifeの値を-1する」という処理ができました。
つまり、弾に当たるたびにキャラのライフが1減るわけです。

・ライフが0になったことを判断する-If Variableブロック-
ライフを減らす処理が完成したので、次は「ライフが0になったキャラが消える」処理を作ります。
ライフが0、つまり変数lifeの値が0になったことをプログラム上で判断するには、いわゆるif文が必要です。
GMSのブロックプログラミングではif文に対応するブロックがいくつかありますが、今回は基本的な使い方だけ紹介します。
さっきのAssign Variableブロックの下に、Commonカテゴリの「If Variable」ブロックを出します。

このブロックを使うと変数の値によってプログラムを分岐させることができます。
if文を知っている人なら見ればわかるでしょうし、知らない人は習うより慣れよ…ということで実際にやってみましょう。
Variable(判定する変数)の欄を最初に作った変数(例では「life」)に、
Notのチェックボックスはチェックを入れずにスルー、
Is(条件)は「Less or Equal(以下)」、
Value(条件の基準値)は「0」に
それぞれ設定しましょう。

これで、変数lifeの値が0以下になっていた時だけ分岐するよ!という処理ができました。
後は分岐したときの処理にインスタンスを消すブロックを入れれば、「ライフが0になった時にこのインスタンスを消す」プログラムが完成します。
早速やってみましょう。第8回でやった通り、インスタンスを消す処理はDestroy Instanceブロックです。
ifブロックから分岐する処理(いわゆるtrue)は、ifブロックの右側につけるようにドラッグします。(If Variableブロックの下からうにょーんと緑色の線が伸びていればOKです)

これで準備ができました。Runしてみましょう。
敵キャラが弾を2発まで耐えて、3発目で倒せていれば成功です!

・スコアの表示(準備編)
次にスコアを作っていくのですが、区切りの都合で本格的な処理は次回に回します。
今回は次回に向けての下準備を先にやっておくことにしました。

さっき作った敵キャラのライフと違って、スコアは画面に表示されていたほうがいいですよね。
なので、スコアを表示するためのオブジェクトを新しく用意します。例ではtokutenにしました。
(ちなみにオブジェクトや変数などの名前に「score」を使うとGMSの機能と競合して不具合が起きるので別の名前を使いましょう)

忘れないうちにルームに置きます。キャラとして登場させるのではなく中のプログラムだけを使うので、スプライトは必要ありません。
置く場所もどこでもいいですが見失わない場所にしましょう。

ルームに配置できたらプログラムを作っていきます。必要なのはCreateイベントと、新しくDrawというイベントを使います。
Add EventからDraw→Drawと選んで追加してみましょう。

Drawイベントはインスタンスが消えるまでずっと処理が続き、同じタイミングの他の処理が終わった後に処理が始まるという特徴があります。
そのため、Drawという名前の通り何かを表示する処理の為だけに使うイベントとして用意されています。
注意事項としてDrawイベントで処理をするオブジェクトは画面上に表示されなくなります。
なので、キャラクターや障害物のような画面に登場するオブジェクトにはDrawイベントを使わないようにしましょう。

今回はCreateイベントでスコアの変数を作って、それをDrawイベントで表示する、という流れでやっていきます。

・まとめ
どうだったでしょうか。
最終回間近ということで説明が駆け足になってしまってすみません。
なるべくシンプルな説明でゲームを作る体験をしてもらおうと思い必要最低限の説明に留めていますが、
もともと説明が上手ではないのでわかりにくいところもあると思います。
それでも、変数の使い方を知れば自作ゲームを作りたい!という夢へ大きな一歩を踏み出すことができます。
この記事が少しでも、その一歩を後押しする原動力になれば幸いです。

さて、改まった挨拶の後ですが、最終回となる次回は今回よりさらに複雑な内容になります。
ここまで読んできて「余裕!」な人も「もうヘトヘト…!」な人も、もう少しだけお付き合いください!

※記事中の画像はすべてGameMaker Studio 2のスクリーンショットを加工したものです。

興味を持たれた方はお気軽にお問い合わせください。

パラメータの編集

 こんにちは、インターン生の逸見です。第4回目の今回は、パラメータの編集方法について紹介させていただきます。

Live2Dダウンロードページ:https://www.live2d.com/ja/download

 Live2Dでアニメーションを動かすためには、つけたい動きを設定していく必要があります。

 まず始める前に、パーツ分けを行っておきます。パーツ分けでは、フォルダのようなアイコンの中に画像を分けていきます。例えば、口パーツには上唇と下唇、口の中の画像を入れておきます。パラメータを編集するときは、間違えて編集しないはずのパーツを選択してしまう可能性があります。そのため、編集しないパーツについてはそれの鍵アイコンの列の「〇」をクリックして鍵をかけておくことをお勧めします。今回は口パーツの変形のパラメータを編集するため、口パーツの鍵は外しておきます。

 動かすパーツを全て選択し、その状態でつける動きに合った名前のパラメータを選びます。アニメーションをつけていくときのために、どのパラメータを動かすことでどの部分が変化するのかがすぐわかるようにしておきます。今回の場合は口変形というパラメータです。もし、つけたい動きに合う名前のパラメータがなければ、新たにパラメータを追加します。パラメータを選択した状態で、パラメータの文字の下にある[キーの2点追加]を選んでキーを追加します。

キーをさらに追加したい場合は、パラメータの横に出るプラスのついたキーアイコンを選択して追加を行ってください。

追加した2つのキーのうち片方は現在の口の形にしておくため、そのキーをパラメータのメニューの[デフォルトのフォームをロック]で固定します。

 固定していないキーを選択し、パーツの変形を行っていきます。ここでは口を開いた状態に変形させるのですが、変形をしやすくするために画面上の[変形パスツール]を使用します。[変形パスツール]を選択し、口の両端とその中間に点を追加します。

点が追加できたら矢印ツールに戻し、点を動かしていきます。主に中間の点を動かし、両端は少し調整を行いました。

目や眉も同様に変形させて動きをつけていきます。目に関しては、次回である第5回目でやり方について紹介していくのでそちらをご覧ください。

 パラメータを動かすことで口の動きを変化させることができるようになりました!

 以上がパラメータの編集方法になります。よろしければパラメータ編集の参考にしてみてください!

 次回は、目のパーツについて紹介していきます。次回もよろしくお願いいたします!

興味を持たれた方はお気軽にお問い合わせください。

インスタンスを出したり消したりしよう

こんにちは、インターン生の鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、第8回テーマは「インスタンスを出したり消したりしよう」です。
シンプルなゲームを作るのに必要な「操作キャラから弾を撃たせて、弾が当たった敵が消える」という一連の流れを作ってみたいと思います。

・インスタンスのおさらい
第3回,第4回でちらっと登場したインスタンス。
オブジェクトとごっちゃにしやすいのですが、
「プログラムをやスプライトの設定を組み込む設計図がオブジェクト、設計図を元に実際にゲーム上で動いているのがインスタンス」
という関係にあります。これだけ聞かされても何のことだかピンと来ないと思いますが、頭の片隅に置いたまま説明を読んでいってください。

・その引き金で弾を撃て-Create Instanceブロック-
まずは操作キャラに弾を撃たせる方法から紹介。
いつも通り、オブジェクトとスプライトを作るところから始まります。
今回必要なのは
・キャラクターのオブジェクト(chara)
・弾のオブジェクト(shot)
・キャラクター用のスプライト(charasp)
・弾用のスプライト(shotsp)
の4つ。こんな感じにしてみました。

例によって適当ですが、弾のスプライトはキャラのスプライトより一回り小さくすると若干それっぽく見えると思います。
今回はcharaオブジェクトだけをルームに置いてください。

次に、キャラクターのオブジェクトが弾を撃つようにイベントを作っていきます。
charaオブジェクトにKeyPressedイベントを作りましょう。ここで割り当てたキーが弾を撃つ時に押すボタンになります。
イベントを作ったら、Instancesカテゴリの「Create Instance」ブロックを出します。

Object欄ではどのオブジェクトからインスタンスを作るかを指定します。ここでは弾のオブジェクトを出したいのでshotを選びます。
X,Yは移動処理の時と同じで座標です。キャラのいる場所よりちょっと右に出したいので、Xを30、Yを0にして両方のRelativeにチェックを入れます。
下2つの欄は初期値のままでいいです。

とりあえずこの時点で、「ボタンを押すとキャラの横に弾が出る」という処理はできました。
ただこれだと本当に出てくるだけなので、出てきた弾がビューンと右に飛んでいくようにしましょう。
必要なのは「shotオブジェクトのインスタンスが作られた瞬間から右に動く」ようなプログラム。
つまり、shotオブジェクト内にCreateイベントを作って、向きと速度を設定してやればいいわけです。
実はこれ、第5回でやったのとまったく同じです。Set Direction fixedで向きを、Set Speedで速度を設定してあげましょう。

これで準備は万端。ルームにcharaオブジェクトだけが置かれているのを確認してからRunしてみましょう。

ボタンを押すたびにキャラから弾が出て右に飛んで行っていれば成功です。
Set Speedの数値をいじって弾速を変えたり、Set Direction fixedで向きを変えて変な方向に弾を飛ばしたりしてみるのもいいですね。

・邪魔なモノを吹き飛ばせ-Destroy Instanceブロック-
キャラが弾を撃つ処理ができたので、今度は弾が当たったら消えるオブジェクトを作ってみましょう。
・敵キャラオブジェクト(enemy)
・敵キャラ用スプライト(enemysp)
を用意します。

enemyオブジェクトにイベントを仕込みます。弾とぶつかったときのイベントなので、Collision→shotですね。
このイベント内にインスタンスを消す処理を入れます。Instancesカテゴリの「Destroy Instance」ブロックをドラッグ。
このブロックの処理が発動した瞬間、自身のインスタンスがルームから消滅します。

これで敵オブジェクトの設定は終了ですが、shotオブジェクトにもひと手間加えましょう。
shotオブジェクトに敵オブジェクトとの衝突イベントを作り(Collision→enemy)、こっちにも同じようにDestroy Instanceブロックをドラッグしましょう。

さて、これでプログラムが完成しました。Runの前にenemyオブジェクトをルームに置く必要がありますが、
ここは試しにcharaオブジェクトの真右に2体、その上下に1体ずつ置いてみましょう。

Runして、割り当てたキーで弾を撃ってみましょう。

画像のように、撃った弾と手前の敵がぶつかって両方消えていれば成功です!

・まとめ
インスタンスを出す、消す処理の使い方はわかりましたか?これを読んでいる人の中には、
「今日やった内容と前にやったキーボード移動を組み合わせればシューティングゲームが作れそうだな」
と思ったカンのいい人もいるかもしれません。

確かに間違ってはいないんですが、今の段階だとシューティングっぽいものはできてもシューティングゲームそのものを作るのは難しいです。
なぜかというと、ライフやスコアをどうやって用意するかをまだ説明していないからです。どちらもゲームを作るなら必要になりますよね。
(ノベルゲームなど例外もありますが、それはそれとして)
というわけで最終回となる次回では、ライフやスコアの基になる「変数」の使い方を紹介したいと思います。お楽しみに!

※記事中の画像はすべてGameMaker Studio 2のスクリーンショットを加工したものです。

メッシュの編集

 こんにちは、インターン生の逸見です。第3回目の今回は、メッシュの編集方法について紹介させていただきます。

Live2Dダウンロードページ:https://www.live2d.com/ja/download

 Live2Dでアニメーションを動かすためには、イラストにメッシュをはっていく必要があります。
 まず、メッシュとは何かについてご紹介していきます。メッシュとは、イラストデータを読み込んだときに画像を囲んでいる点と線のことです。画像を読み込んだときには四角くなっています。このメッシュのはられた画像のことはアートメッシュと呼びます。

 メッシュを編集するためには、イラストデータを読み込む必要があります。Live2D Cubismを起動し、データを読み込みます。使用するデータはあらかじめPSD形式で保存しておいてください。やり方は、[ファイル]⇒[ファイルを開く]から開きたいPSDファイルを選びます。PSDファイルをドラッグアンドドロップすることでも読み込むことは可能です。

 次に、メッシュの自動生成を行います。最初の四角いメッシュではイラストをうまく動かすことができないため、新たにメッシュをはっていきます。手作業ではることもできますが、一つ一つやっていくと時間がかかってしまうため自動生成を利用します。[Ctrl]+[A]でアートメッシュを全て選択し、画面上のメッシュの横にAUTOと書かれている[メッシュの自動生成]を選択します。出てきたダイアログでは、値を変えることでメッシュの大きさなどを変更できます。今回は標準を選択しておきます。

 目や口などの動きをこだわりたい部分には、自動生成ではなく自分でメッシュを書いていきます。編集するアートメッシュを選び、自動生成の横にある[メッシュの手動編集]を選択します。これは[Ctrl]+[E]でも可能です。編集モードに切り替わったら、もとのメッシュを消しゴムツールで消していきます。消しゴムツールは[B]+[マウスドラッグ]で大きさの変更ができます。メッシュは頂点の追加とそれを結んでいくことで作ることができます。頂点の追加はプラスがついたツールで行い、頂点の削除はマイナスがついたツールで行います。追加した点同士を繋ぐときは、[ポリゴンを生成]を選択すると自動で線が引かれます。

 メッシュ作成は、点を画像の端や線を跨ぐように追加していくと良いです。また、頂点を繋いでできた三角形が正三角形になるように気をつけると、動かすときによりきれいに変形させることができます。

 メッシュができたら、黄緑色のチェックボタンを選択することで編集が完了します。このとき、メッシュからはみ出した画像は消えてしまうため注意が必要です。

 以上がメッシュの編集方法になります。よろしければメッシュ編集の参考にしてみてください!

 次回は、パラメータの編集について紹介していきます。次回もよろしくお願いいたします!

興味を持たれた方はお気軽にお問い合わせください。

スプライトを使いこなそう

こんにちは、インターン生の鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、第7回テーマは「スプライトを切り替えよう」です。今回からちょっと本格的な内容になります。
今までスプライトはあらかじめ設定しておくだけでしたが、ゲームの動作中にプログラムでスプライトを切り替えると色々なことができます。
いろいろできすぎて全部は紹介しきれないので(笑)初級者向けにサッと説明していきます。

・スプライトをプログラムで切り替える-Set Spriteブロックの使い方-
色の違うボールのスプライトを3つと、オブジェクトをひとつ用意します。

作ったオブジェクトに、適当なキーのKeyPressedイベントを作ります(例ではzキーにしました)

作ったイベントのプログラム一覧に、Instanceカテゴリの「Set Sprite」ブロックをドラッグ。

このブロックを使うと、イベントを実行しているオブジェクトのスプライトをSprite欄に設定したスプライトに切り替えることができます。
Sprite欄の右のボタンを押すと今あるスプライトの一覧が出るので、切り替えたいスプライトを選びましょう。
Frame欄はスプライトのコマ数を指定しますが今回は無視して大丈夫です。

これでスプライト切り替え処理ができました。スプライトが3つあるので、イベントも3つ作ってみましょう。
作ったイベントを右クリックでコピーして、別のキーを押した時に発生するように割り当てます(イベントをコピーする方法は第6回を参照)。
コピーした後、Set SpriteブロックのSprite欄をそれぞれ別のスプライトにしておくのを忘れずに!)

これでプログラムの準備ができました。オブジェクトをドラッグでルームに配置しましょう。
オブジェクトにスプライトを設定していないので?マークが出ると思います。

この状態でRunしてみましょう。
オブジェクトにスプライトがないので、当然最初は何も映っていません。そこで、イベントを設定したキーを押すと…

画面にボールが出てきたら成功です!さらに、他のイベントを割り当てたキーを押してボールの色が変わるか確かめてみましょう。
ボールが出てこない人はルームにオブジェクトを配置し忘れていないか、
ボールは出てくるけど色が変わらない人はイベントをコピーできているか、Set Spriteの切り替え先スプライトがどれも同じになっていないかを確認してみましょう。

・まとめ
今回は内容としてはあっさり目ですが、「見た目を変える」というとても重要な処理について紹介しました。
この処理を使いこなせば、例えば「RPGで調べた後の宝箱の見た目が変わる」とか「アクションゲームでアイテムを取るとキャラの見た目が変わる」といった処理を簡単に作ることができます。
この記事はゲームを作るのに必要な知識が手に入るように書いていますが、
自分でゲームを作るときにはただ知識があればいいということではなく、持っている知識を活かせるアイデアやひらめきがゲームの面白さに直結します。
千里の道も一歩から。ここまで紹介した処理を使って、簡単なミニゲームを作ってみるのもいいと思います!

・おまけ-目当てのブロックを検索する-
記事の中でいろいろなブロックを扱ってきましたが、正直一覧からいちいち目当てのブロックを探すのはちょっと面倒です。
そういうときは、ブロック一覧の上についている検索窓でブロックを検索しましょう。

例えば「move」と入れればmovementカテゴリのブロックだけが抽出されます。

カテゴリ以外にもブロック毎の名前や用途でも検索できるので、「sprite」と入れればスプライトに関するブロックが出てきます。

よく使うブロックをすばやく見つけるために、ぜひ検索機能を活用してみてください。

※記事中の画像はすべてGameMaker Studio 2のスクリーンショットを加工したものです。

興味を持たれた方はお気軽にお問い合わせください。

第9回webのひみつ(相対・絶対パスの書き方)

皆さんこんにちは。
インターン生の明瀬です。

今回は相対パスや絶対パスについて書いていきたいと思います。
まず、これらのパスとは自分が目的としている情報がどこにあるか間でのルートを示しています。

まず絶対パスについて書いていきたいと思います。
こちらのパスに関しては、目標としている情報がどこにあるかを確実に記述する方法です。
例えば現在の位置(カレントディレクトリ)がもし、1個下の階層のaにあったとします。
このときに、目標がiだった場合には、
(フォルダーの構成)
main
↓ ↓ ↓
a    b    c
↓ ↓  ↓ ↓ ↓ ↓
d  e   f  g  h i

この際にiの位置絶対パスで移動したい場合は、
階層などを気にしなくていいため、
main/c/i
といったパスとなります。とてもわかりやすいですので、特に同じパスなのに、ドライブが違うなどの問題がなければ大丈夫です。

次に上の条件のときに相対パスについて見ていきたいと思います。
まず、相対パスはカレントディレクトリから見ていくのが基本的な方法となっており、今回の場合だとaがカレントディレクトリのため、
それをふまえて目標のiにまでの相対パスを書くと、
../c/i
このような、書き方になります。
また、../の部分は一つ上の階層に戻ることを示しており、今回の場合はaからの../なので。mainの階層に戻っていることを示しています。
この戻るという考え方が、相対パスにおいて凄く重要となるポイントなので抑えておくといいと思います。
この方法はもし同じファイルでも、ドライブが違う位置にあったとしても問題なく動くため、凄く便利です。
しかし、こちらの方法には階層の位置がずれてしまうと記述する際に対応させなければいけなくなるので、注意が必要です。
以上が相対・絶対パスの自分の解釈となっています。もし間違っている場合に関しては、自分で調べてみてください。
また以下のサイトにも様々なhtmlやcssなどに関する基本的な情報などを記述してあるため、凄く参考になると思います。なので是非閲覧してみてください。
今回で最後となりますが、閲覧していただきありがとうございました。また機会がありましたら見てください。
(参考URL)
https://techacademy.jp/magazine/5801

興味を持たれた方はお気軽にお問い合わせください。