京都町アプリ小路上ル

京都在住のカフェ好きゲームクリエイターが書く、アプリ開発、ゲーム作り、あと京都カフェ情報

オンライン対戦が熱い! お手軽格闘ゲームがパワーアップして帰ってきた!

格闘ゲーム「木拳」 〜暇つぶしにオンライン対戦!無料アプリ〜

格闘ゲーム「木拳」iOS
格闘ゲーム「木拳」Android

Cocos Creatorの実機でドット絵が崩れる問題

Cocos Creatorドット絵のゲームを作っています。

 

開発中はブラウザでゲームが動くので、動作確認がすぐとれてとても便利です。

 

ある時、ブラウザで順調に動作しているので、一旦実機でもテストしてみようと思い、Project→BuildでPlatformをiOSにしてBuildボタンを押します。

 

するとbuildというフォルダが作られるので、中を漁ってXcodeのプロジェクトを見つけ、それを起動します。

 

Code Signを自分のものに変更して、iPhoneを接続し、ビルドして転送します。

 

すると、下記のようにドットが崩れて表示されてしまいました。

 

f:id:coffeebreakin:20170803151351p:plain

なんか変・・・

 

ですが、色々とCocos Creatorをいじった結果、設定で回避できることがわかりました。

 

f:id:coffeebreakin:20170803151536p:plain

 

Spriteの設定のTypeをSIMPLEからSLICEDに変更します。

 

f:id:coffeebreakin:20170803151630p:plain

 

これだけです。

 

これでもう一度Cocos Creatorでビルド、そしてXcodeでもビルドして実機に転送すればオッケーです。

 

f:id:coffeebreakin:20170803151739p:plain

とりあえずこれで開発を進めていきます!

 

小さなゲーム機「Tiny Arcade」の開発環境を整える

Tiny Arcadeは自分で書いたプログラムを動かせるみたいなので、まずは作る環境を整えたいと思います。

 

やり方は公式サイトに書いてあります。(もちろん英語!)

Tiny Arcadeでゲームを開発する方法

 

うちはMacでやります。Windowsも可みたいです。

 

f:id:coffeebreakin:20170427215114p:plain

 

さっきの公式サイトに行って、「SETUP」という項目まで下へスクロールします。そこの「this tutorial」というリンクをクリックします。

 

f:id:coffeebreakin:20170427215558p:plain

 

すると上のようなページが出ると思うんですが、そこの「Arduino website」というリンクをクリックします。どうもArduinoという名前の統合開発環境をインストールすればいいみたいですね。初めて聞いたなArduinoって。なんて読むんだろ?

 

f:id:coffeebreakin:20170427220128p:plain

 

自分のパソコン用のをダウンロードしましょう。クリックすると寄付を求められますが、無慈悲に「JUST DOWNLOAD」ボタンを押すと無料でダウンロードが始まります。ちゃんと寄付してあげようね!

 

f:id:coffeebreakin:20170427220538p:plain

 

zipを解凍すると「Arduino.app」が出てきますね(Macの場合です)。これを起動しましょう。

 

f:id:coffeebreakin:20170427220831p:plain

 

起動中の画面。

 

f:id:coffeebreakin:20170427221820p:plain

 

ソフトが起動したら、まずは初期設定をします。上のほうの「Arduino」→「Preferences...」をクリックします。

 

f:id:coffeebreakin:20170427221942p:plain

 

上の画像の部分に以下のURLを入力して一番したのOKボタンを押します。

http://files.tinycircuits.com/ArduinoBoards/package_tinycircuits_index.json

 

 

 

ここまで書いてなんですがもう説明が面倒になってきたので、あとは公式サイトのやり方を見て頑張ってください!!!ごめんよ!

Arduinoの設定方法

 

補足:

 

途中、ポートを認識するところがあるけど、Tiny ArcadeをUSBでパソコンでつないで、さらに、電源を入れるとポートが表示されるようになるから大丈夫だよ。

 

あと、説明の最後の方でTinyScreenBasicExampleとかいうデモプログラムをアップロードする項目があるけどそのままやると、、、

 

f:id:coffeebreakin:20170427222832j:plain

 

こんな感じで電源入れても黒画面のままになってしまうけど、

 

f:id:coffeebreakin:20170427223145j:plain

 

ボタン二つ押しながら電源ONすると、

 

f:id:coffeebreakin:20170427223215j:plain

 

ちゃんとブートローダーモードで起動してくれるからあわてないでね!

 

f:id:coffeebreakin:20170427223300p:plain

 

「ツール」→「Build Option」→「TinyArcade Menu」っていうふうに設定して、もう一度デモプログラムをアップロードしてあげると大丈夫です。

 

f:id:coffeebreakin:20170427224629j:plain

 

こんな感じでデモ画面がパラパラと表示されればOKです。

 

小さなゲーム機「Tiny Arcade」の組み立て方法

f:id:coffeebreakin:20170426154317j:plain

 

Tiny Arcadeの組み立てについて載せて行きます。

 

f:id:coffeebreakin:20170426154417j:plain

 

一応説明書はついているんですけど、説明が少なめだし、英語だし、ちょっとわかりにくかったです。公式サイトには詳しい組み立て方が載っているので、英語がわかる方はそちらをおすすめします。

 

公式サイトの組み立て方

 

f:id:coffeebreakin:20170426154900j:plain

 

はじめに、基盤とバッテリーをつなぎます。基盤に小さく「BATT」って書かれているところにバッテリーの端子を差し込みます。

 

f:id:coffeebreakin:20170426155016j:plain

 

次に基盤とスピーカーをつなぎます。基盤の「SPKR」と書かれているところにスピーカーの端子を差し込みます。

 

f:id:coffeebreakin:20170426155113j:plain

 

それから、液晶パネルを差し込みます。差し込む向きに注意ですね。

 

f:id:coffeebreakin:20170426155216j:plain

 

基盤に付いているスライドスイッチを横にカチッと動かして、電源を入れます。全部きちんとつながっていれば、この時点でゲームがプレイ可能です。これでゲーム基盤は完成です!

 

f:id:coffeebreakin:20170426155430j:plain

 

お次はゲーム機の外側を組み立てて行きます。

 

f:id:coffeebreakin:20170426155616j:plain

 

アクリル板の表面に保護シートが貼られているので、全てはがします。

 

f:id:coffeebreakin:20170426155705j:plain

 

こんな感じです。透明はなんかわくわくしますね。

 

f:id:coffeebreakin:20170426155740j:plain

 

丸い穴に棒を取り付けます。アクリル板を挟んでプラスチックネジで留めましょう。注:この写真では棒とネジが左右反対になっているので、実際には棒が右側(手前側)にくるように取り付けてください

 

f:id:coffeebreakin:20170426160027j:plain

 

それから、この両面テープをハサミで適当にカットします。

 

f:id:coffeebreakin:20170426160046j:plain

 

上の写真のように、この形のアクリル板に両面テープでバッテリーをくっつけます。

 

f:id:coffeebreakin:20170426160619j:plain

 

基盤をうまいこと差し込みます。(この辺から一気に説明が適当になるよ)

 

f:id:coffeebreakin:20170426160722j:plain

 

今の段階で上から見るとこうなります。

 

f:id:coffeebreakin:20170426161126j:plain

 

バッテリーを貼り付けたアクリル板を差し込みます。

 

f:id:coffeebreakin:20170426161449j:plain

 

それから、アレをこうしてアレをああして・・・

 

 

 

 

完成!!!

 

 

 

 

すみません、作るのに夢中になりすぎて途中の写真を撮り忘れてました。よいこのみんなはこの公式サイトの組み立て方を見ながら頑張ってください。

 

f:id:coffeebreakin:20170426161605j:plain

 

あれ、バッテリーが取れている・・・もう分解するのイヤだわ。

 

裏面には、

 

・電源スイッチ

microSDカードスロット

・音量ボリューム

・microUSB端子

 

がありますね。

 

f:id:coffeebreakin:20170426162030j:plain

 

底にスピーカーが付いてます。

 

f:id:coffeebreakin:20170426162105j:plain

 

通電するとこんな感じ。ほんとにアーケードゲーム機みたいだ!

 

f:id:coffeebreakin:20170426162155j:plain

 

シールも付いているけど、透明アクリル筐体の方がかっこいいと思ったので貼らないでおきました。

 

Tiny Arcadeは公式サイトかアマゾンとかで買えますぞ。アマゾンは割高になっているので公式サイトから直接買った方がいいかもですね(買ったことないけど、日本へも発送してくれるのかな?)。なぞ。自分はどっかのネットショップで書いました。

 

microSDカードから他のゲームを起動できるのでその記事

小さなゲーム機「Tiny Arcade」でサンプルゲームを起動する方法 - 京都町アプリ小路上ル

 

自分で作ったゲームも起動できるみたいなので、みんなこれでゲーム作ろうよ!