読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

paiza(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

初心者でもJavaScriptでゲーム開発から公開まで可能!「WoofJS」エディタの完全チュートリアル!

f:id:paiza:20170407114125j:plain
どうも、まさとらん(@0310lan)です。

みなさんは、ビジュアルプログラミング言語の「Scratch(スクラッチ)」を触ってみたことはあるでしょうか?

ブロックを組み合わせるだけなので、視覚的にもプログラムが理解しやすいのですが、できることに限界があるため、ある程度慣れてきたら本格的なプログラム言語を学習する人も多いでしょう。

そこで、「Scratch(スクラッチ)」の次のステップとして、今回ご紹介する「WoofJS」を使ったJavaScriptプログラミングが非常にオススメです!

WoofJS

f:id:paiza:20170407114929j:plain

■基本的な使い方!

まずは、「WoofJS」エディタの使い方から見ていきましょう!

サイトにアクセスすると、すぐに利用できるWebエディタが起動するので、最初に無料のユーザー登録を済ませておきましょう!
f:id:paiza:20170407114953j:plain
画面上部の「Login / Sign Up」ボタンをクリックすれば、メルアドなどを登録するだけですぐに完了できます。

ユーザー登録をしなくても利用できるのですが、ログインしていれば作成したプロジェクトを保存したり、そのまま公開することも可能になるので便利です。


Webエディタの基本的な画面構成は「プレビュー」「ドキュメント」「コードエディタ」となっています!
f:id:paiza:20170407115030j:plain
それぞれの画面は折りたたむことも可能なので、画面を広く使うこともできます。


ドキュメントはかなり充実しており、これだけで「WoofJS」を存分に楽しめるようになるはずです!

例えば、ドキュメントのカテゴリにある「Control」をクリックすれば、プログラムを制御するためのJavaScriptスニペットが一覧表示されます。
f:id:paiza:20170407115043j:plain
面白いのは、「Scratch(スクラッチ)」のブロックも一緒に表示されており、それに対応したJavaScriptコードが分かるようになっている点です。


また、コードの右側には「①Copy」ボタンが設置されており、クリック一発でコピーできるので「②コードエディタ」に貼り付けるのも簡単です!
f:id:paiza:20170407115054j:plain


さらに、「ドキュメント」のすぐ右に「Tutorials」タブが配置されており、それをクリックすると多数のサンプルプロジェクトを表示することが出来ます。
f:id:paiza:20170407115103j:plain
これらのサンプルは実際に遊ぶこともできるうえ、作り方と共にソースコードのリンクも設置されているので、「WoofJS」を使ったゲーム開発の勉強にも役立ちます。

■簡単なゲームを作ってみよう!

それでは、実際にサンプルゲームを作りながら、「WoofJS」での開発手順を詳しく見ていきましょう!


今回は、簡単に作れるサンプル例として、次のような「クリック/タップ」ゲームを作ってみます。
f:id:paiza:20170407115246g:plain
ランダムに出現する「円」を、制限時間内にどれだけ多く消せるかという単純なものです。


まず最初に、背景色を設定するところから始めていきましょう!

背景色をどのように設定するのかは、ドキュメントから「Sprites&Backgrounds」→「Background」と辿っていきます。
f:id:paiza:20170407115405j:plain


すると、背景色を設定するには「setBackdropColor()」を使えば良いのが分かりますね!
f:id:paiza:20170407115412j:plain
あとは、このコードをエディタへ「コピペ」して、カラーを自分の好きな色に変更しておきましょう。

このように、「やりたいこと」を決めてドキュメントのカテゴリからコードを探して利用する...という流れが「WoofJS」の基本になります。


ちなみに「カラー」の設定ですが、ドキュメントの「Looks」カテゴリを開くと、カラー情報を取得できるエディタを利用することも可能です。
f:id:paiza:20170407115425j:plain


次に、今回作るサンプルに必要な「要素」を抽出してみましょう。

  • スコアのテキスト
  • タイマーのテキスト

の3つになりますね。

WoofJS」では、これらの「要素」を手軽に構築できるように、専用のオブジェクトが用意されています。


例えば、「円」を作りたければ「Circle」オブジェクトを使って作ることができます!

var circle = new Circle({




    radius: 30,   // 半径


    color: "#aaff00",    // カラー


    x: 0,    // X座標


    y: 0     // Y座標




});


このように記述すれば、「プレビュー」に「円」が表示されるはず!
f:id:paiza:20170407115539j:plain


ただし、今回のゲームでは最初からランダムな「場所」「色」「サイズ」で表示して欲しいので、次のような「ランダム値」を設定しておくといいでしょう。

var circle = new Circle({




  radius: random(20, 80),  // 20〜80のランダム値


  color: randomColor(),  // ランダムなカラー


  x: randomX(),  // ランダムなX座標


  y: randomY()  // ランダムなY座標




});

これで、プログラムを起動する度に、ランダムな「場所」「色」「サイズ」で表示されるようになります。


同じ要領で、「タイマー」と「スコア」の文字に関しても、「Text」オブジェクトを使って作ることができます!

// タイマーテキストの例


var timer = 10;  // タイマーの初期値


var timerText = new Text({




    text: () => timer,  // 表示する文字を変数「timer」の値に設定


    size: 62,  // テキストのサイズ


    color: "#ffffff",  // テキストのカラー


    textAlign: "center",  // テキストの位置


    x: 0,  // テキストのX座標


    y: maxY - 40  // テキストのY座標




});


最終的に、こんな感じの画面になります!
f:id:paiza:20170407115621j:plain
これで、画面の表示はだいたいOKなので、あとはゲーム部分の処理を作っていきましょう。


まずは、タイマーが「10秒」からカウントダウンしていく処理を作ります。

ドキュメントを見ると、一定時間毎に処理させたい場合は「every()」を使うと実現できると分かります。そこで次のように書いてみましょう。

// 1秒毎に処理を行う
every(1, "second", () => {




    if( timer === 0 ) {


        // 「timer」の値が0になったらゲームを停止
        freeze();


    }
    else {


        // 「timer」の値を1ずつ減らしていく
        timer--;


    }




})

「every()」を利用すると、指定した間隔で処理を実行させることが出来るようになるので便利です。

あとは、このタイミングで変数「timer」の値を1つずつ減らしていけば、自動的に画面のタイマーも1秒毎にカウントダウンしていくようになるわけです。


最後に、表示された「円」を「クリック/タップ」した時の処理を作りましょう!

これは、「onMouseDown()」を使うと実現できそうですね。

// 「円」をクリック/タップしたら行う処理
circle.onMouseDown(() => {




    circle.x = randomX();  // ランダムなX座標


    circle.y = randomY();  // ランダムなY座標


    circle.color = randomColor();  // ランダムなカラー


    circle.radius = random(20, 80);  // 20〜80までのランダムな値


    score++;  // スコアを加算




})

内容的には、最初に「Circle」オブジェクトを作ったモノとほとんど同じです。

「円」を「クリック/タップ」する毎に、ランダムな「場所」「色」「サイズ」を再設定しているだけです。

このタイミングで「スコア」の値も加算しておきましょう。


簡単なプログラムですが、見事にサンプルゲームが完成しましたね!
f:id:paiza:20170407115711g:plain

■公開

WoofJS」では、作成したゲームなどをネット上に公開することも簡単です!

まずは、画面右上にある「Save」ボタンをクリックして、プロジェクトを保存しておきます。
f:id:paiza:20170407115728j:plain



すると、「プロジェクト名」を入力するポップアップ表示が出てくるので、好きな名称を設定しましょう。
f:id:paiza:20170407132213j:plain
(ここに入力した英数字が公開用のURLに利用されます)


あとは、「プレビュー」画面上部にある「新規タブ」ボタンをクリックしてみましょう。
f:id:paiza:20170407132230j:plain
先ほど作ったゲームが、別タブで全画面表示されているはずです。

これでもうネット上に公開されているので、表示されているURLを友人・知人にシェアすればOKというわけです!

もちろん、スマホのブラウザからでも操作できますので、ぜひ試してみてください!


今回、作成したサンプルゲームの全ソースコードは以下のリンクから確認できます。

サンプルゲームのソースコード|GitHub

■まとめ

今回は「WoofJS」の簡単な使い方をご紹介しましたが、慣れてくるとアクション、シューティング、RPG…など、音楽やエフェクトも使って本格的なゲーム制作も行えます

また、今回使用したWebエディタを使わずに、「woof.js」ライブラリを使うことで単体での利用も可能なので、自分の好きなエディタを使って開発することもできます!

大人はもちろん、プログラミングを学んでいるお子さんでも楽しめますので、ぜひみなさんもオリジナル作品を作ってみてはいかがでしょうか!

JavaScript・HTML/CSS講座も好評公開中「paizaラーニング


paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数用意しております。

もちろん今回の記事で使用したJavaScriptやHTMLなど、言語ごとに基礎を学べる入門講座も好評公開中です!

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編