円をつなぐ線 p5.js

数日前にTwitteerでopenFrameworks/C++ベースのシンプルで面白いプログラムを見つけました。junkiyoshiさんの「円をつなぐ線 openFrameworks」。ブログではソースコードも公開されているのでp5.jsで実装してみました。

円の頂点を繋げただけなのに、面白い動き!

通常のプログラミング

準備中

関数型プログラミングのように書いたもの

最近C#Linqや関数型プログラミングを勉強しているのでzip関数や参照透過性を考えながら書いたコードです。

 

PivotalCloudFoundryでMySQLのデータソースを設定する方法

結論からいうと、ClearDBサービス(MySQL)を用意してアプリにバインドすると自動でユーザー、マスワード、JDBC-URLを用意してくれました。

このデータソース情報を使うために、src/main/resourcesにapplication-cloud.propertiesを用意します。ローカル環境では、application.propertiesを使い、クラウド環境ではapplication-cloud.propertiesを使うようになるそうです。

中身は、以下のように、spring.jpa.hibernate.ddl-auto=updateで、テーブルがなかったらエンティティクラス情報から作るという指定でよいです。

https://docs.spring.io/spring-boot/docs/current/reference/html/howto-database-initialization.html

cf envでデータソースの確認

コマンドラインから、cf env アプリ名でユーザ、パスワード、jdbcUrlが確認できます。(*以下は、ユーザー名などをxyzなどのようにダミーにしてます。)

 

その他・参考にしたチュートリアル

TAGVOTE「タグボート」の SpringBoot入門 Spring公式のチュートリアルである Accessing data with MySQL や Building an Application with Spring Boot

まとめ

ローカルにMySQLとSTSを用意したので、PCFでMySQLを設定する方法が分からずいろいろ調べましたが簡単でした。

 

docfxをいろいろ調べてみる

Microsoft公式サイトは、docfxをもとに作られています。https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/

またオープンソースでgithubに公開もしています。https://github.com/aspnet/Docs.ja-jp

docfxを使うとMicrosoft公式サイトのように、APIドキュメントと、Markdownで記事を用意できます。docfxの場合は、Markdownの拡張がありプロジェクトのソースコードのリンクなどが簡単にできます。

docfxのインストール

Windowの場合は、chocolateryでインストールするのが簡単。

https://dotnet.github.io/docfx/tutorial/docfx_getting_started.html#2-use-docfx-as-a-command-line-tool

ワークスルー(チュートリアル)

https://dotnet.github.io/docfx/tutorial/walkthrough/walkthrough_overview.html

このワークスルーで、通常のMarkdown記事とAPIドキュメントの作成方法と組み込みサーバーを起動してブラウザで確認する方法がわかります。

ソースコードと画像を追加した記事

 

srcディレクトリーに配置したC#プロジェクトのAPIドキュメントを表示

作業の流れ

上記のサイトを試しに作ってみて一通り作業の流れが分かりました。

最初にdocfx init -qを実行し、必要なディレクトリーを生成します。srcフォルダーが作られるのでここにC#プロジェクトを作ります。docfx.jsonで、metadataのところにsrc/**.csprojと書かれているため配下の*.csファイルがすべてAPIドキュメントの対象になります。

次に、APIドキュメントを作るためdocfx metadaを実行します。C#ソースコードの変更などがあったら作り直す必要があります。

Markdownを書いたらbuildして、serveコマンド後にブラウザーで動作確認です。デフォルトでは、http://localhost:8080/です。

 

UnityのTilemap機能のGameObjectBrushの使い方

Unity2017.3では、githubから2d-extrasを取得して2d-extras/Tilemapフォルダーを自分のプロジェクトにコピーするといろんなブラシやタイル機能が追加されます。この中に、GameObjectBrushがあります。以下訳してみましたが、ちょっとわかりづらいので実際に使ってみます。

GameObject: This Brush instances, places and manipulates GameObjects onto the scene. Use this as an example to create brushes which targets objects other than tiles for manipulation.

GameObject: このブラシは、シーン上のオブジェクトのインスタンス化、配置、操作をします。タイル以外のオブジェクトを操作対象とするブラシを作成します。

使ってみる

以下画像は、パレットやブラシを使わず、Tilemapの子要素に、スプライトを直接配置して、Transformでグリッド上に配置したところです。画像ファイルをHierarchyにドロップして、Transfromのx,yの値を変更しました。

HierarchyでTilemapオブジェクトを選択し、GameObjectBrushを選択します。そうすると、タイルマップで用意されている他のブラシと同様に、このGameObjectBrushで、pickして、ペーストすることが可能です。またGameObject をこのブラシで扱えるようにするためには、グリッドに合わせる必要があります。

まとめ

  • GameObjectBrushで、任意のオブジェクトをブラシ操作できるようになる
  • 任意のオブジェクトはあらかじめグリッド上に合わる必要がある。

UnityでTilemap機能のカスタムブラシ(custom brush)を作成する

Unity 2017.2から2Dのタイルマップ機能が追加されました。スプライトからパレットを作成して、グリッド上で簡単にマップを作れるようになりました。Prefabをタイルマップに塗る場合は、現時点ではブラシを作成するようです。

sokobanパレット作成して、壁と地面をグリッドに塗ったところ

ブラシを一から作成するのは大変ですが、既にgithubにサンプルがあります。

https://github.com/Unity-Technologies/2d-extras

また、2d-extrasを使った簡単な2Dプラットフォームのデモもあります。

https://unity3d.com/jp/learn/tutorials/topics/2d-game-creation/intro-2d-world-building-w-tilemap?playlist=17093

このデモを動作させると、GameObject BrushとPrefab Brushがソースコード付きでありました。GameObjectBrushはグリッド上でゲームオブジェクトを配置したりするようです。またPrefab Brushはプレハブからブラシを作成するようです。

ブラシを作る必要があると思ったのですが、調べていくと2d-extrasを使えばよさそうなのが分かってきました。

ブロック崩しサンプル

https://github.com/Unity-Technologies/2d-techdemos

2d-extrasを使ったタイルベースのブロック崩しサンプルです。ブロックが消える時の衝突判定とタイル座標の求め方などがBallスクリプトから分かります。

ここまで調べて分かったこと

Unity 2017.2でタイルマップ機能がリリースされたので、まだ2d-extrasなど細かい機能はUnity本体に取り込まれてないようです。初めて使う場合は、上記のプロック崩しサンプルと、2d-extrasを用意して、似たようなプロジェクトを作ってみるのがよさそうです。

 

Unity公式2d-techdemo

Prefab custom brush(プレハブカスタムブラシ)の作り方

ダウンロード

https://github.com/Unity-Technologies/2d-extras をgit cloneまたはzipファイルでダウンロードして展開します。2d-extras/Assets/Tilemapフォルダーがあるので、これを自身のプロジェクトにコピーします。

ブラシ作成

コンテキストメニューからCreate->Prefab Brushでブラシを作成します。

ブラシにプレハブを設定

Tile Paletteタブから作成したブラシ(CoinBrush)がを選択します。

Prefabsのsizeを1にして、Element 0にプレハブを設定します。今回は、コインの画像からあらかじめCoinプレハブを作っておいたのでこれをブラシに設定します。

プレハブブラシで塗る

HierarchyでGridにタイルマップを用意して、それを選択します。以下画面中央の、Active Tilemapが選択されたものになります。この場合は、ItemTilemapになります。また、画面右下のブラシがCoinBrushになっていることを確認し、あとは、Sceneタブ画面で通常のブラシと同じように塗ることが可能です。

まとめ

プレハブ用のブラシを作成できるようになりました。プレハブだと、スクリプトで処理ができるので、OnTriggerEnter2Dでコイン取得後に削除などの処理をつくれます。またGameObject用のブラシもあるようです。

現時点では、2d-extrasを別途インストールしないといけませんが、Unityのバージョンが上がれば初期で対応されると思います。

 

ミニゲーム「どうぶつバスケット」を作りました。

バスケットのゴールに可愛いどうぶつボールを投げると得点が入ります。制限時間内にどれだけ得点を稼げるか競うシンプルなゲームです。もう少し、演出やゲーム性を詰めていきますが、ひとまずは動かせるのでリリースしました。

 

ブラウザでどうぶつバスケットをやる

https://dev001hajipro.github.io/AnimalBasket/

ソースコード

Unityのプロジェクト一式も公開しています。

https://github.com/dev001hajipro/AnimalBasket

 

UnityのFlappyBirdStyleチュートリアルをやってみた感想。

Unity5.5ベースでFlappyBirdを作るチュートリアルが公式であったのでやってみました。FlappyBirdは仕組みが簡単で同じようなプログラムを作ったことがあるのですが、復習もかねてやってみました。以下のような感じでした。

  • 初心者向けなので丁寧。
  • 動画が小さく分かれているので自分のペースで進められる。
  • 移動する壁や床にKinematicなRigidbody2Dを使う方法が分かる
  • 土管はオブジェクトプーリングで管理する
  • 簡単なAnimatorも用意する。

FlappyBirdは一定時間で土管が右から左に流れますが、こういう仕組みはUnityの場合はコルーチンで簡単に実装できますが、このチュートリアルでは使っていませんでした。

ソースコード

https://github.com/dev001hajipro/FlappyBirdLive

デモ

http://hajimete-program.com/Unity/FlappyBirdLive/

Androidのミニゲーム「Bean Clicker」を作りました。(ソースコード配布あり)

 

 

Bean Clicker(Play store)をAndroidへリリースしました。でてきた豆をタップして得点を稼ぐミニゲームです。豆はどんどん下に落ちていき、右上のライフがなくなったらゲームオーバーです。

作ってみた感想

はじめてAndroid向けにゲームを作ってみました。ミニゲームでゲーム自体のプログラムは難しくないのですが、タイトル画面を用意したり、ハイスコアを保持したり、モバイル入力に対応したりと、ゲームロジック以外のプログラミングがかなり必要でした。

また、Android実機とWindowsでは、フォントがArialファミリーでもかなり異なるので、タイトルロゴなどは画像ファイルを用意したほうが調整がなく簡単そうに感じました。またUnityでは、実機のデプロイ作業に数十秒かかるので、ちょっと修正して動作確認をするようなことが難しかったです。

ソースコードとZIPファイルのダウンロード方法

https://github.com/dev001hajipro/BeanClicker

githubで公開しています。gitをインストールしている場合は、git cloneでダウンロードできます。zipファイルがほしい場合は、上記のgithubへ行くと、右上付近に、「Clone or download」の緑ボタンがあるので、これをクリックすると、以下のような吹き出しで、「Download ZIP」が表示されるので、ここからZIPファイルがダウンロードできます。

 

cocos2d-xは環境構築回りがあまり追随できていない模様

ここ数日Cocos2d-x 3.16をインストールして開発環境構築やシーンを作成したりしました。環境回りでいくつか問題が見えてきたので書いておきます。

インストールにPython2.7が必要

下位互換性のためかPython3に移行しないようです。

AndroidStudio更新に追いついていない。

次のCocos2d-xで警告は解消されるようですが、Gradle、AndroidSDKのバージョンに追い付いていないです。AndroidStudioで開発を始めると警告が消えないままになります。

静的ライブラリーが生成できない。

cocos2d-x 3.16をインストールした初期設定ではgen-libsコマンドが実行できませんでした。githubからcloneしたりすると出来るかもしれません。

VisualStudio2017に対応していない。

cocos2d-xは、VisualStudio2017でソリューションを開いて、その中にある各プロジェクトを右クリックして「再ターゲット」をすると、プロジェクトを2017に対応できます。これでひとまず開発できますが、上記のような静的ライブラリーはわかりませんでした。

AndroidStudioで実機確認すると重い

ゲーム開発中はちょっと修正して動作確認したいと思いますが、ビルドとapkファイル更新に数十秒かかるので、かなりのストレスになります。

cocosコマンドとテキストエディターで開発

AndroidStudioでスマートフォン実機で開発し始めましたが、win32用にVisualStudioまたは、cocosコマンドとテキストエディターである程度開発するのが効率がよさそうでした。