パラメータの編集

 こんにちは、インターン生の逸見です。第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

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

Live2D用イラスト制作

 こんにちは、インターン生の逸見です。第2回目の今回は、Live2Dで動かすイラストの制作方法について紹介させていただきます。

 Live2Dでアニメーションを作っていく上で、元となるイラストは動かすことを想定して作っていく必要があります。それを想定しなければ、動かそうとしたときに思うようにいかなくなってしまいます。そこで、今回は動かすところで失敗しないような、Live2D用のイラストの制作方法のコツをご紹介します。

 今回こちらの正面を向いているイラストを使用して紹介を行っていきます。正面を向いている場合、顔の半分を作成しておき、それを複製して反転することで左右対称なイラストにすることができます。作成時間の短縮やこの後にあるアートメッシュの編集がやりやすいといった利点があります。

 一見、Live2D用にどう作ったかわかりませんが、イラストのパーツを分解していくと通常のイラスト作成との違いがわかります。

 まず、髪の毛についてです。髪の毛は、このイラストでは3パーツで構成されています。アニメーションで別々に動かしたい部分はパーツ分けをしておきます。ここでは顔パーツの後ろに配置するための後ろ髪、前髪とは別に動かすために横の髪を分けました。

 次に、顔パーツです。今回は単純にするため髪の毛の影が同じパーツになっていますが、髪の毛の影を別にすることでアニメーションのクオリティを上げることができます。顔パーツは、その上にある髪の毛が動いたときに見える部分がどこまでになるか考えながら作ることが必要です。また、鼻パーツはキャラクターの顔が上下や左右を向く動きをする場合は分けておきます。

 続いて、目のパーツですが、こちらについては第5回目で詳しく説明をするためそちらをご覧ください。

 口パーツについてです。口は上唇と下唇、口の中の3パーツで構成されています。唇のパーツが小さいと口を閉じた時に口の中のパーツが見えてしまうため、上唇と下唇で隠れるように作っていきます。

 眉毛のパーツについてです。こちらは片側を作り、反対側はそれを複製し反転させています。

 首パーツについてです。首パーツは顔が動いた時に終わりが見えないように少しながめに作っておきます。

 胸部のパーツについてです。首が動くことを想定し、前の部分に加え首の後ろの襟部分を別に作り、首パーツをはさむようなレイヤーの構成にします。また、動きに合わせてリボンも動くように分けておきます。

 最後に、腕パーツについてです。腕パーツは可動域を考え、動かしたときに胸部のパーツと離れてしまわないように見えていない部分も作ります。

 以上が今回使用するLive2D用イラストのパーツ構成になります。今回使用したイラストは単純でわかりやすいものでしたが、パーツ分けを細かくして部品を増やすことでより複雑なものを作ることができます。しかし、パーツを増やしていくことでアニメーション作成が難しくなり、うまく制御することができなくなってしまします。そのため、初めは単純な構成のイラストを作ってアニメーションをつけていき、慣れてきたらだんだんと複雑な構成のイラストでアニメーションの作成を行っていくことをお勧めします。よろしければイラスト作成時の参考にしてみてください!

 次回は、メッシュの編集について紹介していきます。次回もよろしくお願いいたします!

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

AIと絵について。

AIと絵について。

皆さん、こんにちは。 インターン生のエフゲーニーです。 読者の皆様におかれましては益々ご健勝のことと存じます。今日はニューラルネットワークと絵についてあるニュースを見たので伝えたいと思います。 絵を作成できるニューラルネットワークが存在しているを知っている私もびっくりしました。 まず、ニュースは:
オークションで売っていたAIによって作られた絵は推定が約7000-10000ドルだったが販売価格 は432,500 になりました。 

絵のリンクはこちらです:https://www.christies.com/lotfinder/prints-multiples/edmond-de-belamy-from-la-famille-de-6166184-details.aspx?from=salesummery&intObjectID=6166184

この作品は、フランスの起業家のグループによってオークションにかけられました。 ロットはフランスからの電話でオークションに参加した匿名のバイヤーに行きました。
ニューラルネットワークが画像を生成するの方法はちょっと複雑とお思います。 ニューラルネットワークが二つあります。 一つ目はGenerator です。 Generatorは、画像のセットに基づいて新しい画像を作成しています。 他のニューラルネットワークはDiscriminator と呼ばれています。 Discriminatorは、人間が作成した画像とGeneratorによって生成された画像との間の差異を検出しようとしています。 このシステムを動かし続けるとGeneratorによって生成された画像と人間が作成された画像の違いがだんだん少なくなります。
 
販売価格は高すぎだったと思いませんか? ニューラルネットワークは有名な画家ではなくて、ソフトウェアであり同じような画像を何千枚を生成出来るじゃないでしょうか。 でも、価格はこんなに高い理由があるかどうかと考えると考えられる理由が二つあると思います。 一番目の理由はこの絵はAIによって作成された絵の間にオークションで売っていた最初のものです。 二番目のは匿名の買い手は売り手との関係を持って、この絵を再販予定があるかも知れません。

これで以上になります。
いつもお読み頂きありがとうございました。

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

プログラムを動かしてみよう

こんにちは、インターン生の鶴田です。
GameMaker Studio(以下GMS)について紹介していく記事、第6回テーマは「キーボードで動かせるオブジェクトを作ろう」です。
前回の第5回ではボールが一定のパターンで動き回るプログラムを組みましたが、今回はプレイヤーの操作に合わせて動くプログラムを作っていきます。

・右に動く(?)キャラ
それでは早速やっていきましょう。
今回はこんな感じのオブジェクトとスプライトを作ってみました。

私は絵が描けないのでヘンテコなキャラになってしまいましたが、スプライトには好きな絵や画像を使ってももちろん大丈夫です。(あまり大きい画像はおすすめしません)
作ったオブジェクトは早速ルームに置いておきましょう。

では作ったオブジェクトにプログラムを組み込んでみましょう。
前回の要領で、キャラオブジェクトの編集画面に行きEventsのAdd Eventボタンをクリック。
イベント一覧の中から、「Key Pressed」→「Right」 を選びます。

画像のようにイベントが追加されていればOKです。

このイベントはキーボードの右矢印キー(→キー)を押した時のイベントです。
この中にキャラが右に動く処理を作れば、「右にキーを入れると右に動く」という動きができそうですね。やってみましょう。
今回のような操作に合わせてキャラが動く処理には、Movementカテゴリの「Jump To Point」ブロックがおすすめです。

XとYという欄がありますが、Xの欄は横軸(左右)の移動、Yの欄は縦軸(上下)の移動に使います。
今回は右に動かしたいので、Xの欄にだけ10と入れましょう。(横のRelativeにチェックを入れるのを忘れずに!)

ここまでできたら、一度Runしてみましょう。

ここまでできたら、一度Runしてみましょう。

…右を押すとちょっと動くけど、すぐ止まっちゃって連打しないと動かない!となりませんでしたか?
実は、今説明したとおりのプログラムだとそういう動きになってしまいます。
仮にアクションゲームを作るなら、右を押している間は右に動き続けるようになっていたほうが絶対にいいですよね。
次の項でどうすればいいかを説明します。

・イベントを変更する -KeyPressイベントとKeyDownイベント-
一度テスト画面を閉じて、キャラのイベント編集に戻りましょう。
前の項で「KeyPressイベントはキーを押した時のイベント」と説明しましたが、実は正確には「キーを押した瞬間だけ発生するイベント」なんです。
そのため、右を押している間は右に動き続けるプログラムを作りたい場合はこれとは別のイベントを使わないといけません。

というわけで、KeyPressイベントを別のイベントに変えてみましょう。一度イベントを消して作り直して~でもいいんですが、もっと早い方法があります。
イベント一覧で別のイベントに変えたい項目(今回はKey Downイベント)を右クリック→Change Eventをクリック。
Change Eventを選ぶとイベントを作るときと同じように一覧が出てくるので、「Key Down」→「Right」を選びましょう。

これを使うと中身のプログラムを残したままイベントの条件を変えられます。

イベントが画像のように変わっていて、イベント内に右に動くプログラムが残っていれば成功です。もう一度Runしてみましょう。
うまくいっていれば、キャラが右キーを押している間なめらかに動いてくれるはずです!

・キャラを回転させてみよう
ついでにキャラが動きながらぐるぐる回転するようにしてみましょう。
今作ったKey Downイベントのプログラム画面に移って、キャラを回転させるための処理を探します。
回転処理が楽にできるのは、Instancesカテゴリ(ブロック一覧の上の方にあります)の「Set Instance Rotation」ブロック。
見つけたらドラッグしてプログラムに追加しましょう(今回は順番は関係ないので移動処理のブロックの上でも下でもOKです)

Angleの横に-10と入れ、忘れずにRelativeにチェック。Runしてみましょう。
動きに合わせてコロコロ転がっているような感じになれば成功です!

・左にも動かそう -イベントのコピー-
いい加減右にばっかり動かすのも飽きてきた!ということで左にも動けるようにしてみます。
でも、右キーのイベントと同じように左キーのイベントを作って、プログラムを組んで……とするのはちょっと面倒です。
そこで、既にあるイベントを中のプログラムごとコピーして複製する方法があります。
イベントを変更したときと同じ要領で、コピーしたいイベント(今回はKey Downイベント)を右クリック→Duplicate Eventをクリック。
Change Eventの時のようにイベントの一覧が出るので、複製した後のイベントの条件を選びます。

今作りたいのは左矢印キー(←キー)を押している間のイベント。つまりKey Down→Leftです。

イベントが増えていれば成功です。

でも、このままRunすると右を押しても左を押してもキャラは右に動いてしまいます。(興味があったらRunしてみてください)
そこでちゃんと左を押したら左に動くようにプログラムを直します。
複製で増えたLeftイベントをダブルクリックで選択して、プログラムを編集します。編集画面の上のタブで今どのイベントのプログラムをいじっているのか確認するのがおすすめです。

画像2枚目のように、移動処理ブロックのX欄を-10に、回転処理ブロックの角度を10に書き換えてみましょう。
これで修正は完了です。実際にRunしてみて、右を押せば右に、左を押せば左にキャラが転がっていれば成功です!

・まとめ
今回はキーボード入力に反応するプログラムの作り方と、作ったイベントを変更したりコピーする方法を紹介しました。
ゲームを作る上でプレイヤーの操作に対応した動きは絶対に必要ですし、制作が進んでプログラムが複雑になるとイベント管理がとても重要です。
ここまでの内容がマスターできていれば、GMS初心者から初級者にステップアップしたといってもいいかもしれません。
次回はゲームの演出面でとても大事な「スプライト切り替え機能」を説明します。お楽しみに!

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

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

第8回webのひみつ(divなどの指定)

皆さんこんにちは。
インターン生の明瀬と申します。

今回は前回書いていた、オラクル社のホームページを見て、どのようなデザインがあるかを見たいと思います。
(参考HP)
https://www.oracle.com/jp/index.html

こちらが参考のホームページとなっています。

まず、こちらのサイトは以前書いていた、フレシキブルwebデザインになっており、スマホやPCなどの画面表示に応じてページを変化させることが出来ます。
また、こちらのサイトで良いと感じた点は、その変化をさせる際に@mediaを使い1600px、770px、500px、のようにいろいろなスマホサイズやPCサイズに対応させている点です。

そのほかにも、ページが見やすいように区切りを色々な方法で入れていたり、見てる人が飽きないようにコンテンツの中身をアイコンで表示したり、スライドのように表示したりなど細かな配慮がしてある点がすごくわかりやすく良いと感じました。

また、よくあるフッターの部分に企業の電話番号や公式ツイッターなどの固定しているフッターを作成していることで電話番号などがわからなくても素早く連絡や問い合わせなどができるため、利便性が高いものとなっているところも良いと感じました。

自分もこのようなHPを作成してみたいと感じています。ですが難しいので、一つ一つの要素の作り方をを覚えて作っていくことが大事だと思っています。

次に自分が興味を持った、ホームページのトップにあるスライドの簡単な作り方について書いていきたいと思います。
(参考HP)
http://blog.keisuke11.com/webdesign/css-slider/

今回はこのホームページを参考にして書いていきたいと思います。
こちらのサイトではdivを使用して作成しています。
まずdivを3つ囲むdivを作成しています。
その全体を囲んでいる,css-sliderのdivには表示する箱の大きさなどをしています。そしてこちらにはoverflowを入れてはみ出した分を隠すようにしています。(ここが大事)
そして次に、slide-itemの方を説明します。こちらには画像のサイズをsliderと同じサイズにしています。それをfloatにすることで横並びになるようにしてあり、これで3つの画像のスライダーの画像が用意してあります。

次にwappaerと指定してある部分について説明していきたいと思います。ここが一番大事で、これをwidthのサイズを300%にすることで、通常100%の箱の状態が現在300pxの幅となっているため、900pxの幅に変わっており画像がしっかりと格納されることになります、これをkeyフレームで300pxでの移動幅を加えていくことで、横スライドをする(実際には横移動を繰り返している)スライドの完成となります。

そのほかにも様々な方法で作成することができるため、また調べてみてください。

今回はこの辺で終了にしたいと思います。次回は最後のため、cssのことやhtmlに関することについてまた書けていけたらなと思います。

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

Live2Dの始め方 記事 LIVE2D

初めまして、インターン生の逸見です。
今回からはLive2Dでのアニメーションの作り方についてご紹介させていただきます。

近年、バーチャルユーチューバーの登場やソーシャルゲームでの採用というようにLive2Dの需要が高まっています。Live2D用のイラストやモデルを販売、購入することができる「2次マ」というサービスも存在し、Live2Dはどんどん身近なものになっています。
Live2Dサイト:https://www.live2d.com/ja/
2次マサイト:https://nizima.com/

しかし、Live2Dという名前は知っていても、それがどのようなものなのか詳しく知らない方もいらっしゃると思います。
そこで、第1回目はLive2Dがどんなソフトであるかを紹介していきます。

まず、Live2Dはイラストを動かしてアニメーションを作ることができます。そのため、そのイラストの絵柄を保ったままアニメーションを作ることができます。また、2Dでの立体表現が可能であり、3Dモデルを作る必要がないため、「イラストは描けるけど3Dは難しいかも…」と思っている方にお勧めです。特に、Live2Dでのアニメーションで重要になってくる要素の一つであるレイヤー構成は、普段デジタルでイラストを描かれる方にとってわかりやすいと思います。
また、Live2Dでアニメーションを作るときは、イラストのパーツを変形させて動かしているため、1コマずつイラストを描くわけではありません。そのため、イラスト制作の時に変形させるための準備を行えば、コマごとに何枚も絵を描く必要はありません。(詳しくは第4回で)

Live2D作品だけを見ると難しそう…と思われると思いますが、このようにソフトについて知っていけばLive2Dへ挑戦することのハードルは下がっていきます。そして、そのハードルがより下げ、Live2Dに挑戦される方が増えるようにこの記事を書いていきたいと思います。

次回からは以下のように進んでいきます。
第2回 イラスト制作
第3回 アートメッシュの編集
第4回 パラメータの設定
第5回 目のパーツについて
第6回 デフォーマーの追加1
第7回 デフォーマーの追加2
第8回 アニメーショ制作1
最終回 アニメーショ制作2

次回は、Live2Dで動かすイラストの制作方法について紹介していきます。次回もよろしくお願いいたします!

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