cocos2d-x javascript no.2 タッチイベントの追加

イベントはシーンまたはレイヤー、スプライトに追加することができる。イベントを定義し、addListnerにてそのイベントと対象オブジェクトを設定することでタッチイベントを受けることができるようになる。

スプライトにイベントを追加

window.onload = function(){
cc.game.onStart = function(){

var MyScene = cc.Scene.extend({
onEnter:function () {
this._super();
var size = cc.director.getWinSize();

var sprite = cc.Sprite.create(“ball.png”);
sprite.setPosition(size.width / 2, size.height / 2);
sprite.setScale(0.8);
sprite.name = “sprite1”;
this.addChild(sprite, 0);

var sprite2 = cc.Sprite.create(“ball.png”);
sprite2.setPosition(size.width / 2.5, size.height / 2.5);
sprite2.setScale(0.8);
sprite2.name = “sprite2”;
this.addChild(sprite2, 0);

var sprite3 = cc.Sprite.create(“ball.png”);
sprite3.setPosition(size.width / 1.5, size.height / 1.5);
sprite3.setScale(0.8);
sprite3.name = “sprite3”;
this.addChild(sprite3, 0);

cc.eventManager.addListener(listener, sprite);
cc.eventManager.addListener(listener.clone(), sprite2);
cc.eventManager.addListener(listener.clone(), sprite3);

}
});
cc.director.runScene(new MyScene());

};
cc.game.run(“gameCanvas”);
};

var listener = cc.EventListener.create({
event: cc.EventListener.TOUCH_ONE_BY_ONE,

onTouchBegan: function (touch, event) {

var target = event.getCurrentTarget();
var location = target.convertToNodeSpace(touch.getLocation());
var spriteSize = target.getContentSize();
var spriteRect = cc.rect(0, 0, spriteSize.width, spriteSize.height);

if (cc.rectContainsPoint(spriteRect, location)) {
cc.log(target.name + ” touched.”);
return true;
}

return false;
},

onTouchMoved: function (touch, event) {
cc.log(“onTouchMoved”);

var target = event.getCurrentTarget();
var delta = touch.getDelta();
target.setPosition(cc.pAdd(target.getPosition(), delta));
}

return false;
}

});

解説

シーンに対してスプライト3つを追加。(sprite1,sprite2,sprite3)
スプライトのイメージは適当なボールの画像とした。(ball.png)
スプライトを定義・追加したあとそれぞにイベントを追加。(cc.eventManager.addListener)
イベントの種類はタッチとムーブ。
スプライトが複数ある場合は、どのスプライトがタッチされたのかを識別する必要があるため、スプライトごとにイベントを設定する。イベント追加時にlistener.clone()とすることでスプライトごとのイベントを受け取れるようになる。
イベントの設定では単にイベントを定義しただけではゲーム画面全体のどこでもタッチするとイベントが受け取れるようになってしまっているため、スプライトのサイズに合わせてイベントを受け取れるように設定する必要がある。その判定がevent.getCurrentTarget()以下の記述である。

cocos2d-x javascript no.0 基本

cocos2dの構成。cocos2d-jsは下記のような構成要素を持つ。

  • Director
  • シーン
  • レイヤー
  • スプライト

Director

実行環境やシーンの制御など、ゲームを構成するすべてを管理するオブジェクト。

シーン

ゲームの画面を構成する。

レイヤー

シーン上に配置されるオブジェクト。

スプライト

シーンまたはレイヤーに配置されるオブジェクト。ノード。

ゲームの起動

ゲームの起動は、ゲームの画面サイズ(キャンバス)を定義して実行する。単純にはキャンバスを定義、シーンを作成、ディレクターにシーンを設定、実行という流れになる。

<canvas id=”gameCanvas” width=”800″ height=”450″></canvas>
<script type=”text/javascript”>
cc.game.onStart = function(){
cc.director.runScene(new MyScene());
};
cc.game.run();
</script>

cocos2d-x javascript no.1 原型

チュートリアルコード

<canvas id=”gameCanvas” width=”800″ height=”450″></canvas>
<script type=”text/javascript” src=”cocos2d-js-v3.13.js” charset=”UTF-8″></script>
<script type=”text/javascript”>
window.onload = function(){
cc.game.onStart = function(){
//load resources
cc.LoaderScene.preload([“HelloWorld.png”], function () {
var MyScene = cc.Scene.extend({
onEnter:function () {
this._super();
var size = cc.director.getWinSize();
var sprite = cc.Sprite.create(“HelloWorld.png”);
sprite.setPosition(size.width / 2, size.height / 2);
sprite.setScale(0.8);
this.addChild(sprite, 0);

var label = cc.LabelTTF.create(“Hello World”, “Arial”, 40);
label.setPosition(size.width / 2, size.height / 2);
this.addChild(label, 1);
}
});
cc.director.runScene(new MyScene());
}, this);
};
cc.game.run(“gameCanvas”);
};
</script>

Windowsに古いバージョンのPHPをインストールする方法

Windowsでphpの実行環境を構築する時の話。筆者はPHP初心者なので詳しいことはよくわからない。PHPはバージョンがいくつか存在していて、バージョンによっては使えるライブラリがなかったりしてローカルでは動いたのにサーバでは動かないということが起こりうる。サーバのPHPのバージョンにローカルのPHPを合わすことができればいいのだけれど、サーバのPHPのバージョンが古くてローカルでの環境構築に手間がかかる場合がある(というか手間がかかった。apacheのバージョンによってはphpのモジュールがロードできなかったりとか色々ありすぎて)。サーバとローカルのPHPのバージョンを常にセキュリティホールがない最新にしておくような環境が理想だが、まあ、そうはいかないのが普通だろう。私の場合はサーバではPHP5.2がインストールされていたのでそれに合わせてローカルも環境構築することにした。PHP5.2でも動くようなライブラリを使ってコーディングを・・・とかも考えたがローカルにもPHP5.2をインストールして開発するのがより確実だろうと思ったのでそうすることに。

普通、WindowsでPHPの実行環境を構築するときはXAMPPをインストールするのが手っ取り早いのでそれがベストだろうと思う。だが簡単に実行環境を構築できるがそれぞれのインストールされるソフトウェアのバージョンは選択できない。とりあえずインストールして、PHPだけ5.2にダウングレードをするとかも考えたが、参照を変更してとか色々面倒なのでギブアップ。XAMPP無しでapacheとphpそれぞれインストールすればいいかとトライしてみたもののsyntax errorのcan not load module とかいうわけのわからないエラーが発生してまたギブアップ。どうしたものかとググっていたら、PHP5.2がインストールされた古いバージョンのXAMPPをインストールすればいいことに気づいた。(なぜ気づかなかったのか・・・)

前置きはこれくらいで。PHP5.2がインストールされていたXAMPPのバージョンをこのサイトとかで確認する。すると、PHP5.2がインストールされたXAMPPはバージョン1.7以前ということがわかったのでサーバと同じPHPのバージョンである1.6.8のXAMPPをダウンロードすればいいということになる。
次にこのサイトで該当するバージョンのXAMPMMが、すぐに見つかった。はじめからこうすればよかった。疲れているとろくな考えが浮かばない。

ファーバーカステルのエモーションが壊れたでござる

ファーバーカステルというメーカーのエモーションという名前のボールペンが壊れた。ヤフオクで手に入れて喜んだのも束の間、リフィルを確認したあと首軸を締めようとしたら力加減がわからないままやったらそのまま首軸のネジをねじ切ってしまった。

009これがその壊れた状態。文房具歴は結構長い私だが、こんな壊れ方をしたのは初めてだ。ファーバーカステルというメーカーの文房具を扱うのも初めてだったが。ボールペンや万年筆のこの部分は大抵は頑丈にできているからそのつもりでしっかり回そうとしたらこの有様である。経年劣化・・・・もあるだろうが、この軸に使われているプラスチックの材質の印象がやわらかそうというか安っぽそうというか明らかに強度不足に思える。ドイツ製だぜ?3000円以上するボールペンだぜ?という慢心があったのかもしれない。100均で売ってるボールペンでもこんな壊れ方はしない。
胴体の木軸が修理ついでに外れてしまって中のプラスチック軸を見てみたが、これはあのガンプラのハイパーバズーカの素材とよく似ている。うん、そりゃ折れるわ。

嘆いていても始まらないのでとりあえず治すことを考えてみる。10年以上使った上でこの壊れ方なら今までご苦労様と言うことをできるかもしれないが、配達されてきた初日にこれなのでさすがに諦めきれない。もしかして不良品を掴まされたのかも・・・と思ったりしてみたが完全に自業自得の結果で、しかも壊れる前には一応筆記してみて「このペン使いやすいわー」とか言ったりしてたので被害妄想はみっともない。もうブログのネタにするぐらいしか私には救いがない。

ほんのすこしだけこのエモーションというボールペンで筆記することができたが、評判通り書きやすかった。壊れたというレビューもいくつか目にしていたので気にはなっていたがまさか自分が壊すことになるとは思わなかった。折れることを心配しないといけないボールペンなんて有り得ない。このエモーションはデザインと書きやすさは素晴らしいが胴体は設計ミスであると思う。それかコスト削減しすぎたか。この折れた部分は筆記時に負荷がかかるのはもちろん、通常時でも内部のスプリングによるペン先の収容する構造のため負荷がかかるようになっていてこの貧弱なプラスチック素材では素人目にも駄目なのがわかる。硬質なプラスチック素材かステンレスなどの金属素材でないともたない。そこが破損するとペンとして機能しなくなるという急所の部分が強度の足りない素材でできている。この梨の木のモデルは一番安いタイプで上位グレードの製品も存在しているが、この内部構造の欠陥が解消されていない限りこのペンは他人にオススメできない。

だが、治すとはいっても私にできることは限られている。まさかファーバーカステルの本社に高額な修理費用覚悟で修理依頼するわけにもいかないので自分で修理するわけだが、まあ、接着剤でくっつけることしかできない。接着剤といっても色々種類があるので私が入手できそうな範囲での選択肢としてプランは2つ

  • アロンアルファ
  • ダイソーで買った格安の接着剤

普通、壊れた物を直そうとして使う接着材としてはアロンアルファが思い浮かぶだろう。私もまずはそれで直すことを試みようと近所のスーパーで購入してきて接着してみた。だが、結果は失敗。アロンアルファは確かに瞬間で強力にくっつく。作業中に指と指がくっついて焦ったほどだ。しかし、このケースのような壊れたプラスチックをくっつけるのには向いていなかったようだ。アロンアルファに向いている接着方法はある程度の面積があって垂直方向に引張る力に対するという場合に最も適しているらしい。このボールペンの場合はどちらでもなくて接着する面積が小さすぎて、さらに力のかかり方が回転方向であるため接着をキープできなかった。せめて接着面積がもう少し広ければなんとかなったかもしれないが1ミリにみたない首軸のプラスチック部分なのでアロンアルファで接着することは諦めた。

010次に考えたのがダイソーで前に買っておいたG17という接着剤。アロンアルファでだめだったのにそれより安っぽい接着剤で大丈夫なのかとも思ったがとりあえずくっつけてみた。この接着剤の特徴は、黄色いドロっとした液体で時間が経つにつれ徐々に硬化していくという感じ。粘性が強く硬化までに時間がかかる。速乾と思いっきり書いているが嘘である。だが、時間をかけて硬化するのは欠点ではなく、その間に接着位置を微調整して正しい位置に修正できるので個人的には悪くないと思っている。正直扱いやすい接着剤ではない。うまく使うには特徴をつかむまで色々接着して慣れるしかない。私も初めて使ったときはダイソーの接着剤だしなぁ・・・と思ったりしていたが、何回も使っているうちには「まあ、使える接着剤か・・・」と思えるようになっている。一番接着剤に求められる強力に接着できるかどうかという点について、過去に色々接着してみた私の経験上はそれなりに満足できている。で、接着した結果は上の画像のような感じとなっている。見た目は多少汚くなってしまったが、この接着材は微調整がきかなくてドバっと出てしまうので大抵こんな感じになる。このブログ書いている時点ではまだ乾燥中で強く動かそうとするとグラグラする感じだが、それなりに強く接着ができているような気はしている。というかこれが駄目なら他には手がないのでがんばってもらうしかない。成功したなら後日追記する。追記しなかったら失敗したのかもしれない。でもこれが仮に直ったとしてもだよ?今後末永く愛用するというわけにはいかないし、筆記するたびに折れないか心配しながら扱わないといけないということに今気づいた。

追記

006ボンドで接着してみた結果は、失敗。強度が足りなかった。仕方がないので別のプランで修理をする。意地でも直す。プラスチックの破損を修理する方法として有力な方法にプラリペアで修理というのが知られているらしい。接着ではなくてプラスチックの破損箇所を補修するというのが正しい表現の模様。プラスチックの破損をプラスチックに似た素材で折れた部分を覆って補強するという感じ。プラリペアを盛って硬化したあとは強度を失わない程度にサンドペーパーかリューターかなんかでヤスリがけしてサイズ調整する必要がある。

010これがプラリペアによって補修した状態。2種の材料を混ぜ合わせたものを溶接箇所に塗布して数分すると硬化する。硬化した状態はなかなか固くてプラスチックそのものといってもいい。商品説明には溶接とか溶着という表現が使われているが土台となるプラスチックに対しては化学的な作用はしない。だから失敗してもリトライすることが可能。(何回か失敗した)

011で、なんとかこの状態まで復帰することができた。当然筆記することはできる。ただ、修理の完成度は60%ぐらい。破損した箇所がペンの急所なのでプラリペアで溶着させたとしても無理な力を入れるとやはり折れる。

プラリペアについて、評判の通りなかなか使える道具だと思った。今回のペンの修理のケースの場合、しかしプラリペアが使えるといってもそれでもただプラリペアを使っただけでは強度が足りない。なので、溶接箇所を補強するために別のプラスチック素材をブリッジとして使うことで強度を確保した。具体的には溶接箇所にストローを短く切ったものを入れてその上にプラリペアで固めるという方法(ストローはコンビニで1Lパックのお茶を買ったときにもらったストローがなんとサイズ的にビッタリだった)。

追記

001出来が気に入らなかったので硬化したプラリペアを外してもう一回リトライ。そもそもこの首軸の部分が折れた原因は、製品の設計ミスなのかどうかわからないが締めたときにテンションがかかりすぎることによるものなので、そこを調節しない限りはまた首軸を締め過ぎたら折れてしまう。さらに折れた箇所をプラリペアで溶接したことにより首軸のネジのマージンが少なくなって以前にもましてこの首軸部分にストレスがかかるようになってしまった。なので、折れた根本部分、つまり本体部分を1~2ミリほど切り詰めることにした。それによって首軸を回しすぎて折れる確率を減らすことができストレスもかからないようになった、と思う。切り詰めすぎてたら今度は首軸を締めることができなくなるが、プラリペアなら硬化すればプラスチック同等になるので短い分には多少微調整が効く。そういう方針で再度修理してみたところ、今度は完璧に近い状態にまで直すことができた。直すまでにかかった時間は3日以上、費用は3000円ぐらい(プラリペア、アロンアルファ、ダイソー接着剤、プラリペアを削ってサイズ調整するためのリューターなど)。今から思えば修理なんかしないでこの費用で新品を買うのがベストだと思う。メリットは、多分使ってるとまた壊れると思うが、その都度プラリペアがなくなるまで修理することが可能ということ。その煩わしさを許容できればの話だが。

ファーバーカステル エモーションというボールペンについて

実にいいボールペンだと思う(故障しなければ)。サイズは小ぶりだが非常に書きやすく、梨の木の木目も美しい。木軸のボールペンを所有するのは初めてだったが所有欲を満たしてくれる逸品と言っても過言ではない。

海外通販で注文したラズベリーパイゼロが届いた

pimoroniというラズベリーパイを中心に売っている海外の通信販売サイトで注文したラズパイゼロが届いた。注文から到着まで約1周間強といったところ。普通の通販と違って海外からなので最悪届かないんじゃないかと思っていたが無事に配達された。

rp_1注文したものはラズベリーパイのスターターセットとマグカップ。マグカップは想像していたよりちょっとデカかった。外人仕様だからだろうか。ラズベリーパイゼロのセットが10英ポンド、マグカップが約6英ポンド、送料とか手数料が5.5英ポンドで合計約22英ポンド。日本円で約3000円のお買い物となった。

rp_2こんな感じで梱包されてきてちょっとワロタ。ラズベリーパイゼロの小ささが実によくわかる。

rp_3あらかじめ注文する前から覚悟していたが、このラズベリーパイゼロはGPIOが標準で取り付けられていなくて、必要なら自分でピンヘッダーをはんだ付けしなければならない。そのためにピンヘッダー付きのスターターセットを注文したのだけれども。

rp_4で、はんだ付けしてみた。ほぼはんだ付け未経験の私だったが、初めてにしてはまあまあの出来ではないだろうか。

rp_5画像の上の列右から2番めのピンのはんだ付けだけちょっと明らかに失敗してしまったが。ランドとピンをハンダで温める時間が長すぎてしまってピンヘッダのプラスチックの土台が溶けてしまった。温めないとうまくハンダが流れないし、温めすぎるとピンヘッダを傷めるしでなかなかタイミングが難しい。多すぎるよりかはということでハンダの量は少なめに必要最低限にということを目指してみた。

GPIOを使った実験はまた今度の機会に。

Pythonのメリット・デメリット

ラズベリーパイで遊んでいると避けては通れないプログラミング言語のPythonについて思ったことを記してみる。

メリット

低スペックマシンでも動く
ラズベリーパイでも
開発がやりやすい
コンパイルしなくていいってストレスフリー
linux系だと大体インストールされてる
うん
情報がたくさん

デメリット

遅い
for文とかループ処理だと時間がやたらかかる印象。特にループと再起を組み合わせたら遅さが実感できる。マシンスペックではどうにもならない。多分PHPより遅い。
玄人向け
とっつきやすいけどパフォーマンスを出すには工夫がいる。あと用途も専門的な雰囲気。

まだ触り始めたばかりであまりよくわかっていない。だが、コーディングはしやすいと思った。ウェブとか高速処理が必要な用途とかには向いていないというのもなんとなくわかった。そういうのはPHPとJAVAでいい。

更新プログラムを確認しています・・・が終わらない問題

またこの問題で嵌まってしまう。前にも苦しんだが、今日OSを再インストールしてみたところやはり苦しんでる。いろいろググって調べてみたんだがどうにも進まなかったが、なんとか先に進むことができたので誰かの役に立つかもしれないので記しておく。最低限やることだけ。

まずやること

  • 更新プログラムの自動確認を切る
  • インストールした直後の状態ではWindows Updateの更新を起動時に自動実行するように設定されている。これがまずい。タスクマネージャーのプロセスを確認すると見つかるwusa.exeというプロセスがそれである。Windows Updateに問題があるのに、それが起動時に勝手に実行されてしまうのがさらに問題というわけ。コントロールパネルのシステムとセキュリティのWindows Updateから更新プログラムの確認でその設定ができるので、何もしないように設定する。設定したら一度再起動するといいと思われる。

    次にやること

    更新プログラムの問題をググっていると個別に更新プログラムをインストールしたらいいとかそういう情報があるが、その場合は自分のOSにあった更新プログラムをインストールするように気をつける。つまり32bitなら32bit用の更新プログラム、64bitなら以下略。当たり前のことだが、どうにもならなくてパニくってるとうっかり間違えることがあるので。64bitなら更新プログラムのファイル名に64bitと書いてるけれど32bitならx86と書いてあるのがちょっと紛らわしい。

    上記はごくごく基本的な事項だけれど、どうにも更新プログラムの確認が終わらないという人は試してみてもらいたい。

    ラズベリーパイ3に無線でssh接続できなくてハマった

    ラズベリーパイでサーバーを構築して見た時の話。無線lanの設定で固定ipを割り当てて外部からssh接続しようとしたらホストが見つかりませんとエラーが表示される。有線ケーブルを接続するとなぜか無線lanに割り当てたipに対して接続できる(それじゃ無線の意味がないけれども)。

    で、原因は、電源にあった模様。コマンドラインでiwconfigを実行すると

              Power Management:on
    

    という項目がある。これをoffにしてみたところ、無線の状態でもssh接続が可能になった。設定方法は、/etc/network/interfacesを編集して、

    #auto eth0
    iface eth0 inet manual
    
    allow-hotplug wlan0
    iface wlan0 inet manual
    wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
    wireless-power off 
    

    上記のような感じに付け加える。そして再起動。これでssh接続できるようになった。

    importerror: No module named cryptography.hazmat.backends paramiko

    備忘録。paramikoをインストールしてpythonで実行してみようとしたらimporterror: No module named cryptography.hazmat.backendsというエラーが発生したのでその解決方法をメモ。だが、色々やりすぎてわからなくなったので関係ありそうなのをざっと羅列する。

    • apt-get install python-dev
    • apt-get install libssl-dev
    • apt-get install libffi-dev
    • pip install paramiko
    • pip install cryptography –force-reinstall ←これ重要

    ざっとこんなコマンドを実行してたらparamikoが動くようになった。