はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【GoogleBuilder】はじめてのJavaScriptによるカード作り

はじめに

今回はJavaScriptを使ったカード作りについての記事になります!

GameBuilderではスライムや木などのアクター*1に振る舞いを持たせているのがロジックツールに表示されているカードです。

例を使うと、アクターであるスライムは基本じっとしているのですが、カードにより振る舞いを持たせることで、そこらへんを歩き出すということになります。

つまりGameBuilderではアクターに様々なカードを付けることで振る舞いを決める、カードプログラミングが重要な考え方といってもいいかもしれません。

f:id:hanaaaaaachiru:20190617231331p:plain

このカードについて少し掘り下げていきましょう。

カードとは

GameBuilderでとても重要な要素であるカードはJavaScriptによって構成されています

先程の画像は、スライムをクリエイトツールから作成すると自動で付けられているカード・パネルたちです。

そこのWander AroundカードのJavaScriptのコードを実際にみてましょう。

f:id:hanaaaaaachiru:20190617233531p:plain

Wander Aroundカードのコード

やや見にくいかもしれませんが、Wander Aroundカードの右側にある歯車マークを押して、詳細を開いてください。

f:id:hanaaaaaachiru:20190617232220p:plain

上にあるREPLACE WITH COPY AND EDIT JAVASCRIPTをクリック。

f:id:hanaaaaaachiru:20190617232308p:plain

するとこのような画面が出てくるはずです。

f:id:hanaaaaaachiru:20190617232516p:plain

これがWander Aroundカードを構成しているコードになります。たくさんコードが書いてあってややビックリかもしれませんが、とりあえずこの方法でコードが見れることが分かれば大丈夫です。

また今回ははじめてのカード作りということで、こんな複雑なコードは書かないのでご安心を。

実際に自分のカードを作ってみる

あらかじめ用意されているカードとは別に、自分でいちから作成するカードをカスタムカードといいます。

これの練習をするためにまずは今回使わないカードを削除しちゃいましょう。

パネルの右上にあるXボタンを押すことで、パネルとその中に含まれる全てのカードを削除することができます。

f:id:hanaaaaaachiru:20190617233950p:plain

f:id:hanaaaaaachiru:20190617234024p:plain

次にAdd Custom Cardをクリック。

f:id:hanaaaaaachiru:20190617234132p:plain

続けてNEW CARDをクリックします。

f:id:hanaaaaaachiru:20190617234221p:plain

するとNEW CARDが新しく作成されています。これではじめてのカードの作成をすることができました!

f:id:hanaaaaaachiru:20190618002440p:plain

簡単なコードを打ち込んでみる

NEW CARDのJavaScriptのコードを前回の要領でひらいてみてください。

f:id:hanaaaaaachiru:20190617234558p:plain

するとあらかじめサンプルとして書き込んであるのですが、今回は真っ白な状態からプログラミングしたいので全て削除してOKです。

まずはGameBuilderでのはじめてのプログラミングとして、以下のコードに書き換えてみてください。

export function onTick(){
  spin(2);
}

f:id:hanaaaaaachiru:20190617235039p:plain

ちなみにカードの名前と概要も自分で書き換えてみました。

ここでのonTickは、UnityでいうUpdateメソッドとほぼ同じ意味、つまり毎フレーム呼ばれる処理を書きます。

またspinメソッドはGame Builder APIのことで、アクターを2rad/sec(1秒間に2ラジアン)で回転させます

簡単にいうと、毎フレーム回転させる処理を書いたということです。

ちゃんとコードをセーブした後、実際にスライムにカードを付けてみましょう。

f:id:hanaaaaaachiru:20190618000438g:plain

さいごに

とりあえず自分で自作カードを作ることに成功できました。

JavaScriptによるプログラミングでより表現の幅が広がり、より面白いことができるはずです。

またもっとロジック系やGameBuilderでのJavaScriptの書き方についても書いてみたいと思っているので、よければお付き合いください!

*1:GameBuilderでは全てのオブジェクトをアクターとテラインに分けることができます 【GameBuilder】初心者がロジックを扱うときにまず覚えるべきterrainとactorの違い - はなちるのマイノート