micro:bitの加速度計の値を取得

micro:bitの「bluetooth」という拡張機能にある

  • Bluetooth 加速度計サービス
  • Bluetooth ボタンサービス
  • Bluetooth 磁力計サービス

のブロックを使用した時に、micro:bitから送られてくる値を、Unityで取得し利用するプログラムを作成しました。

micro:bitのプログラム

micro:bitの加速度計サービスから取得した値を、micro:bitの傾きとしてUnityの画面に表示します。

micro:bitをコントローラにして遊ぶゲームなどを作ってみたいと思います。


このプロジェクトのソースファイルは、こちらにあります。Macをお使いの方で、micro:bitをお持ちの方、もしかしたら動くかもしれません。
https://github.com/coderdojo-todakoen/Accelerometer

折り鶴

Unityで、折り鶴を折ってみました。

思ったよりかなり難しく、手を抜きながらなんとか完成させました。

画面が表示されたら、何かキーを押すか、マウスをクリックしてください。勝手に折り鶴を折ります。それだけです。

アニメーションや、オブジェクトの回転で実現できると考えていましたが、折り紙の裏表や厚さ、重なりのためにどんどん難しくなり、思ったようにできませんでした。勝手な解釈ですが、Unityは折り紙向きではないかもしれません。

最終的に、メッシュの頂点座標を移動させる力技を使用してしまいました。このページの最後でソースファイルも公開していますが、あまり参考になるところもない気がします。

もっとうまい方法があればどなたか教えてください。

Unity WebGLはスマートフォンのブラウザをサポートしていないため、動作しない場合はPCで表示してください。

使用したベクトルの計算を、参考までに書いておきます。

三角形OABがある時、
OからAに向かうベクトルをa、
OからBに向かうベクトルをbとします。

点Aと点Bの中点を表すベクトルc

Vector3 c = (a + b) / 2;

点Aから点Bへ向かうベクトルc

Vector3 c = b – a;

ベクトルaとベクトルbの二等分線が、辺ABと交差する点を表すベクトルc

Vector3 c = a + (b – a) * a.magnitude / (a.magnitude + b.magnitude);

ベクトルa上に、点Bから下ろした垂線の足を表すベクトルc

Vector3 c = Vector3.Project(b, a);


このプロジェクトのソースファイルは、こちらにあります。
https://github.com/coderdojo-todakoen/Orizuru

ネコ逃げ

CoderDojo参加者なら、みんなが知ってる、みんな大好きな「ネコから逃げろ!」ゲームのUnityバージョンを作りました。

Unity Asset Storeに無料でいい感じのネコのアセットCartoon Catがあったので使わせていただきました。

画面が表示されたら、何かキーを押すとゲームスタートです。ネコがこちらに向かって歩いてくるので、左右矢印キーで向きを変え、上下矢印キーで前後に移動して、ネコにぶつからないように逃げてください。(キー操作が必要なため、スマートフォンでは操作できません)

ネコにぶつかったらゲームオーバーです。

Unity WebGLはスマートフォンのブラウザをサポートしていないため、動作しない場合はPCで表示してください。

ゲームとしての完成度が低く、申し訳ない気持ちでいっぱいです。すみません。


このプロジェクトのソースファイルは、こちらにあります。
https://github.com/coderdojo-todakoen/NekoNige

ドミノ倒し

Unityでドミノ倒しをやってみました。ドミノを並べるのも倒すのもUnityです。

[スペース]キーを押すと、先頭のドミノに力を加えて倒します。後はドミノが倒れるのをただ見守るだけの作品です。

かなり動きが重いので、環境によってはうまく動作しないかもしれません。

Resourcesフォルダの画像ファイルを開いて、ロゴ部分のドミノを着色しています。画像ファイルを差し替えると、好きなイメージを表示できるようになっています。(大きいサイズの画像は無理かと思いますが)

Unity WebGLはスマートフォンのブラウザをサポートしていないため、動作しない場合はPCで表示してください。


このプロジェクトのソースファイルは、こちらにあります。
https://github.com/coderdojo-todakoen/Dominoes

第7回開催レポート

2月1日(土)に、第7回 CoderDojo戸田公園を開催いたしました。
8名のニンジャと、5名のメンターにご参加いただきました。ありがとうございました。

今回も、micro:bitに取り組むニンジャと、Scratchに取り組むニンジャであっという間の2時間でした。

前々回参加した小2のニンジャは、micro:bitのロボットカーを使って、ライントレーサーを作りたいということで来てくれました。メンターから簡単な説明を聞いただけで、自分で実装したみたいです。最初は同じ場所をクルクル回ったりしていましたが、最後にはしっかり動いていました。

さまざまな動作チェックがおこなわれた…?

初参加で自分のmicro:bitを持ってきてくれたニンジャは、ボタンを押したり、傾けたりすると、名前や文字を表示するプログラムを作っていましたが、最後には、振ると乱数で目が変わるサイコロを見せてくれました。このサイコロ、なんと1から10までの目があるそうです。

「10」かな?

もうひとり自分のmicro:bitを持ってきたニンジャは、前回参加してくれた後、micro:bitを2台買ったそうです。で、さらにもう1台のmicro:bitをメンターから借りて、なんと3台のmicro:bitを使う「早押しボタン」を作って見せてくれました。

2人の解答者がmicro:bitのボタンを押すと、先に押した方の解答者の名前が、もう1台のmicro:bitに表示されます。そしてmicro:bitに接続したスピーカーから正解音、不正解音も鳴らせます。3台のmicro:bitを使って遊ぶのは、はじめて見ました。他のニンジャも先に押した方をどうやって判断しているのかとかたくさん質問していました。

Scratchの作品も力作ぞろいでした。

RPGを見せてくれたニンジャは、先週のCoderDojoさいたまから続けて取り組んでいるそうです。移動や攻撃の時のキャラクタの動きがとてもよくできていました。

ドラゴンが出現!!

シューティングゲームは敵キャラや、攻撃パターンを数種類ずつ作ってあるとても手の込んだ作品です。そういえばいつもシューティングゲームを見せてくれますが、シューティングゲームに関するこだわりというか愛を感じますね。

こちらの小4のニンジャ作品は、ペンを使ったお絵かきです。学校で少しやったことの続きがやってみたかったようです。色や角度を変えながら模様が描かれるのを見るのは楽しいですね。

学校でプログラミングに興味を持って、CoderDojoに参加してくれる人がもっと増えるといいと思いました。


次回は3/7(土)の予定です。次回もよろしくお願いします。

ブロック崩し

Unity 2Dで作ったブロック崩しです。

Unity WebGLはスマートフォンのブラウザをサポートしていないため、うまく動作しない場合はPCで表示してみてください。

ボールにRigidbody2Dを追加して、最初にAddForce()を呼び出すだけでボールを動かしています。

クリアの判定はしていませんので、初めから遊ぶときはブラウザをリロードしてください。


このプロジェクトのソースファイルは、こちらにあります。
https://github.com/coderdojo-todakoen/BlockKuzushi

自転する地球

Unity+OpenStreetMapで自転する地球を書きました。

Unity WebGLはスマートフォンのブラウザをサポートしていないため、うまく動作しない場合はPCで表示してみてください。

OpenStreetMapから取得したタイル地図を、Unityの球面上に貼り付けてみました。(全て表示するまでに少し時間がかかります)


このプロジェクトのソースファイルは、こちらにあります。
https://github.com/coderdojo-todakoen/Earth

はしに当たったらいけにゃいゲーム(Unityバージョン)

Scratchを卒業して、別のことに挑戦してみたいニンジャの中に、Unityをやってみたいというニンジャが少なからずいるのですが、どこから手をつけたらいいのかわからないことが多いので、既存のScratchの作品をUnityへ書き換えたらどんな感じになるのか試してみました。

岡嶋さんのScratchの作品「はしに当たったらいけにゃいゲーム」(https://scratch.mit.edu/projects/182336476)のUnityバージョンを作成してみました。

勝手に歩くネコを、端にぶつからない様に[スペースキー]で方向転換します。ただし[スペースキー]を押すたびにネコがどんどん大きくなっていきます。ネコが端にぶつかったらゲーム終了です。

Unity WebGLはスマートフォンのブラウザをサポートしていないため、うまく動作しない場合はPCで表示してみてください。
効果音が鳴ります。音量にご注意ください。

大きさを50%にする

transform.localScale = Vector3.one * 0.5f;

Cat.cs

x座標を0、y座標を0にする

transform.position = Vector3.zero;

Cat.cs

5歩動かす

transform.Translate(-0.1f, 0, 0);

Cat.cs

もしスペースキーが押されたなら

if (Input.GetKey(KeyCode.Space)) {

}

Cat.cs

15度回す

transform.Rotate(0, 0, 15);

Cat.cs

大きさを1ずつ変える

// 現在のサイズを取得してから

Vector3 scale = transform.localScale;

// サイズを大きくします

scale.x += 0.1f;

scale.y += 0.1f;

transform.localScale = scale;

Cat.cs

このプロジェクトのソースファイルは、こちらにあります。
https://github.com/coderdojo-todakoen/HashiNiAtaruna

第6回開催レポート

2020年最初のCoderDojo戸田公園を、1月11日(土)に開催いたしました。
初参加のニンジャ3名を含む、小2から中1までの4名のニンジャにご参加いただきました。

そして、今回メンターとしてあの高校生のミハシさんにご参加いただきました。
ミハシさんは、2017年のDojoCon Japan(全国のCoderDojo関係者のイベント)でのプログラミングコンテストで最優秀賞を受賞し、その後、アイルランドで開催されたCoderDojo Coolest Projects 2018のGames and Web Games部門でも最優秀賞を受賞されたというすごい方です。
そんな彼女は、現在高一ですが、小学5年生くらいからScratchを始めたそうです。今日参加したニンジャの大きな目標になったことと思います。ありがとうございました。

CoderDojo戸田公園にある本よりも、たくさんの本を持ってきてくださいました!

そして、しっかりメンターもやっていただきました。Scratchで、横スクロールするアクションゲームに挑戦するニンジャと、クローン毎に変数を割り当てる方法や、横スクロールの実現方法を話していました。恐るべし小三ニンジャ vs 高一メンター。

初参加のニンジャ3名は、micro:bitでLEDに図形を表示するところから始めましたが、2つのmicro:bitを無線でつなげたり、micro:bitをふると色々な文字が表示されるおみくじ風やコイントス風のプログラムを作ることができました。

micro:bitにスピーカーをつないで、音楽を鳴らすニンジャもいました。

写真じゃ伝わりませんが、音がなっています…

次回は、2月1日(土)に開催する予定です。


CoderDojo戸田公園の看板ができました。7×7の”園”が!?
次はライントレースやりましょう!

はしに当たったらいけにゃいゲーム(JavaScriptバージョン)

Scratchを卒業して、別のことに挑戦してみたいニンジャの中に、JavaScriptをやってみたいというニンジャが少なからずいるのですが、どこから手をつけたらいいのかわからないことが多いので、既存のScratchの作品をJavaScriptへ書き換えたらどんな感じになるのか試してみました。

岡嶋さんのScratchの作品「はしに当たったらいけにゃいゲーム」(https://scratch.mit.edu/projects/182336476)のJavaScriptバージョンを作成しました。

勝手に歩くネコを、端にぶつからない様に[スペースキー]で方向転換します。ただし[スペースキー]を押すたびにネコがどんどん大きくなっていきます。ネコが端にぶつかったらゲーム終了です。

以下のリンクをクリックして、スタートします。

Play!!!

JavaScriptとCSSの知識が少し必要です。ネコの場所を座標で管理し、移動するには三角関数も使うのでかなり複雑になってしまいました。

大きさを50%にする

this.element.width = this.element.naturalWidth * size / 100;

this.element.height = this.element.naturalHeight * size / 100;

hashiniataruna.js

5歩動かす

// 現在の位置を取得します

let x = parseFloat(this.element.style.left);

let y = parseFloat(this.element.style.top);

// stepで指定された大きさだけ、現在のangleの方向へ移動します

x -= step * Math.cos(deg2rad(this.angle));

y -= step * Math.sin(deg2rad(this.angle));

// 移動後の位置を設定します

this.element.style.left = x + ‘px’;

this.element.style.top = y + ‘px’;

hashiniataruna.js

15度回す

this.angle = (this.angle + angle) % 360;

this.element.style.transform = ‘rotate(‘ + this.angle + ‘deg)’;

hashiniataruna.js

イベントは、document.addEventListener()を呼び出して設定してます。


このプロジェクトのソースファイルは、こちらにあります。
https://github.com/coderdojo-todakoen/HashiNiAtaruna-JS