開発 - chokmah.jp

Arduboyに興味津々

どうも、キャプテンです。

夏真っ盛りですね、みなさま夏バテなどされてないでしょうか。

最近になって「Arduboy」というゲーム機に興味を持ち始めました。
みんな知ってます？Arduboy。

海外で開発されてて、名刺ぐらいの大きさで、白黒カラーのみの小さなゲーム機です。
で、さっそく買ってみました。

こんなやつ。

なんとなくゲームボーイっぽいですね。厚さは数ミリで本当に名刺入れに入ります。

Arduboy自体は2017年ぐらいクラファン発で登場したみたいで、コミュニティは今でもけっこう活発だったりします。

で、面白いのがこのArduboy、オープンソースで回路図も公開されてるので
試しに電子工作で組んでみました。

こんな感じ。

いやー楽しい！

こうなると当然、自分でも何かゲームを作ってみたくなりますね。

で、さっそく自分で遊ぶ用のゲームを作ってみました。

昔ワンダースワンにあった「グンペイ」のクローン「GUNPY」です。
（怒られるかな…(;’∀’)）

初めて作ったのでバグありそうですが、とりあえず公開しておきます。

このリンク先に行くとエミュレータで遊べます。
↓
https://felipemanga.github.io/ProjectABE/?url=https://chokmah.sakura.ne.jp/arduboy/hex/gunpy/Gunpy091.hex

ソースコードはCodeCommitで管理してるので、GitHubに移したいなーと考え中です。

このArduboy、めちゃくちゃメモリも少ないしゲームを作るのが難しいんですけどね、
なんかね、昔ガラケーのアプリを作ってた頃の気持ちを思い出すんですよ、
制限がある中でどれだけ面白いものが作れるかな、っていうアツい気持ちをね。（ドM）

楽しいので基板でも発注してオリジナルの互換機でも作ってみようかなーと考えたりもしてます。

まぁ時間があれば。

ではまた！

遅れてきた「RPGツクール」ブーム

どうも、キャプテンです。

最近、RPGを簡単に作れるツール(ゲーム？)である
「RPGツクール」というものに興味を持ちました。

「え？今さら！？」
「おそっ！」
と、言われてしまいそうですが、はい今さらです。

きっかけは、最新版のRPGツクール(RPGMakerという名になるそうです)はUnity上で動く、という情報を見て、仕事でときどきUnityを使うので
「どんな物だろう？」
「最近のRPGツクールってどうなってるんだろう？」
と思い調べてみたのがきっかけでした。

思い返せば、私が最初に触ったRPGツクールといえば「Dante98」というPC-9801版のものでした。（古すぎて歳がバレる）
当時は当然ながらスペック的な制約も多く、頑張ってもせいぜいドラクエ１か２が作れる程度だな、という感じでした。
そのため、それ以降ずっとスルーしていたのです。

そこで、ちょうどSteamでRPGツクールMVというものがセールになっていたので購入してみました。（これでももう7年も前のソフトなのですね。）
そして触ってみたら…

すごい！

めちゃ進化していますね。
属性という概念が追加されてるし、
顔グラフィックを作るツールのようなものが用意されてるし、
プレイするのにランタイムも要らないし、
スマホやブラウザ向けにビルドできるし…

何より驚いたのが、プログラムを書いてプラグインとして組み込むことで機能を追加できる、という点です。
これがあれば好きな機能が追加できそうですね！？

プラグインの中を覗いてみるとJavaScriptで書かれていたので、私も見様見真似で作ってみました。

モンスターハンターというゲームでは装備品が沢山あり、属性ごとの装備の組み合わせの管理が大変なので、自分が装備した組み合せを保存・呼び出せる「マイセット」という機能があるのですが、ためしにそれっぽいものをプラグインで実装してみました。

↓こんな感じでメニューに項目を追加して

↓こんな感じでウィンドウをぽこぽこ設置してって、機能をカキカキ。

とても簡単に実装できて驚きました。
JavaScriptを触ったことがある人ならすぐに作れるのではないでしょうか。

アイデア次第では面白いプラグインを作れて作品に個性が出せそうですね。
私もさらにいじって遊んでみます。
（もはやブームはとうの昔に終わってそうですが。せめて5年ぐらい前に触っておけばよかったー！）

Unity上で動くという新しいバージョンもリリースを楽しみにしています。

ではまた。

[Cocos creator]リソースに配置した画像を一括でロード

どうも、キャプテンです。

最近、プログラムをいじいじする時間がなかなか取れません。
とりあえず少し前に手こずった事を書き残しておきます。。

お題はコチラ
リソースに配置した画像を一括でロード
です。

前提：
Cocos Creator Ver.1.3.1
Windows 10

前回、prefabを動的に生成（instantiate）して画像を差し替える、という事をしました。
これにより、例えばグラデ■ウスのようなシューティングの開発で、アイテムを実装する場合に「形は似てるけど色だけ違うアイテム」なんかを実装しやすくなりますね。

しかしながら、いちいち画像をComponentに配置してると、画像が多い場合に大変な手間がかかります。
例えばトランプだったり、麻雀だったりのように、画像点数が多いゲームの場合、、、

cocos2d-xであれば、リソースフォルダに画像入れといて
適当に画像名を配列で定義しといて
ぐるぐる回してSpriteBatchNode::createあたりで読み込んで保持しとけばいいだけなのに、
Cocos creatorだとイマイチよく分かりません。

そして、暗中模索してググりまくること数十分・・・
loadResAll
なるいかにもそれっぽいメソッドを発見しました！

とりあえずよく分からないのでassetsフォルダの中にimgsというフォルダを作り、その中に麻雀牌の画像をたくさん配置して、
onLoadの最後あたりでloadResAllを呼び出し。
引数にはフォルダ名と型と完了時のcallbackらしきメソッドを指定して

cc.loader.loadResAll("imgs", cc.SpriteFrame, this.resReadCallback );

1	cc.loader.loadResAll("imgs", cc.SpriteFrame, this.resReadCallback );

callbackのfunctionを適当に書いて、
いざ！
ウキウキしながら試してみると、、、

：
：
画像が表示されず！
デバッグでcallbackの中を見てみると、、、

画像が読み込まれてない(‘A`)DAYONE

と、いうわけで、仕方が無いのでcocosの中のloadResAllのソースコードを読んでみると、
メソッドコメントの冒頭にこんな一文が！！！
Load all assets in a folder inside the “assets/resources” folder of your project.

よく分からんけど、とりあえずコメント通りにassetsの中にresourcesフォルダを作り、そこに
さっきのimgsフォルダをぶち込んで、
（↓こんなカンジ）

もう一度実行してみると、、、

画像がぜんぶ読み込まれた！＼(^o^)／ﾔｯﾀｰ

あとはこれをクラスの変数に持っておけば、いつでも好きな時に使えますね！
連想配列で持っておくと便利そう。
（もちろん、callbackの中でthisを使う場合は定義の際にbindしておきましょう。）

これでprefabを生成したり、好きな画像をセットしたり、
あんなことやこんなことをやり放題ですね！~~ドラえも■みたいに！~~

loadResAll自体はCocos2d-JSのあたりの名残なのかな？（たぶん。）

分かりづらくてハマった事案でした。

ではまた～

[Cocos Creator]prefabを生成して画像を変更して設置する

どうも。
最近趣味でCocos Creatorをいじることがありまして四苦八苦しながら開発を進めているのですが、Cocos Creatorの情報を検索しても
cocos2d-x(HTML5)
とか
cocos2d-JS
とか
Cocos Studio
の情報が多い！
Cocos Creator自体がこれらの系譜なのだとは思いますが、とりあえず自分への備忘も兼ねて書き残していきます。

で、まず最初は
prefabを生成して画像を変更して設置する
です。

前提：
Cocos Creator Ver.1.3.1
Windows 10

とりあえず、メインとなるシーンをCanvasなりにセットして、そこにスクリプトをComponentとしてくっつけてると思います。
（ここでは、そのスクリプトをMainSceneとします。）

まずは差し替え元の画像をCanvas上にD&Dしておき、それをNode TreeペインからAssetsペインにD&Dしてprefab化しときます。
このprefabをソースコード内で動的に生成し、かつ、別の画像に切り替える、というのが目的です。
（シューティングゲームなんかで、敵を動的に生成・出現させる時、prefabは同じだけど見た目だけ変える、など。）

MainSceneをエディタで開き、propertiesの中に下記を記述します。

// 量産するprefab
imgPrefab: {
	default: null,
	type: cc.Prefab
},
// 新しい画像
newSprite: {
	default: null,
	type: cc.Sprite
},

// 量産するprefab

imgPrefab: {

default: null,

type: cc.Prefab

// 新しい画像

newSprite: {

default: null,

type: cc.Sprite

そうすると、Node TreeペインでCanvasを選択するとPropertiesペインの下の方にComponentとして
imgPrefab
と
newSprite
が設定できるようになってますので～
↓こんなカンジ

Assetsペインから
imgPrefab　には　作成したprefab
newSprite　には　新しく設定したい画像
をD&Dしてセットしておきましょう。
ここまではよくやると思います。

あとはソースコード上の任意の箇所で、下記手順で実装します。

instantiateでprefabを生成
getComponentでprefabのSpriteを取る
取ったSpriteのspriteFrameに、新しい画像のspriteFrameをセット
上記をaddChild

です。
具体的にソースコードにすると、下記のようにします。

var img = cc.instantiate( this.imgPrefab );
var srcSprite = img.getComponent(cc.Sprite);
srcSprite.spriteFrame = this.newSprite.spriteFrame;
img.setPosition( 100, 100 ); // (任意)座標をセット
this.node.addChild( img );

var img = cc.instantiate( this.imgPrefab );

var srcSprite = img.getComponent(cc.Sprite);

srcSprite.spriteFrame = this.newSprite.spriteFrame;

img.setPosition( 100, 100 ); // (任意)座標をセット

this.node.addChild( img );

要するに、prefabのspriteFrameに新しいspriteFrameをセットしてあげれば良いのですね。
いちいちgetComponent(cc.Sprite)しなきゃいけないのが面倒ですね。

ただこの例だと、新しい画像をnewSpriteにセットしておかなきゃなりません。
もし敵の画像が100種類あったら、
newSprite1
newSprite2
newSprite3
：
みたいに、100個もComponentを作らないといけないのかって話になりますね。
画像の一括ロードは次回にでも書きます。

ではまた～。

進捗状況（上忍）

上忍 for iPhone の進捗状況です。

おおよそ95％といったところで、ひたすら動作確認中です。

まもなく申請できそうです。