昨日は時間がなくてひどい浅さだったので、
今日はもう少し頑張ろうと思います。
今日のメニュー
・カウントの場所変更&クラス化
・ツイッターでつぶやく機能
カウントについて
カウントの場所を変更しました。
右側のステータス画面の下側です。
ついでに文字を絵に差し替えました。
数字部分は一桁ずつがSpriteになっていて、
フレームを使って表示する数値を操作しています。
画像の内容は以下の感じ
この並びにしてあるのでframeの数値と画像の数値がちょうど一致します。
同時にクラス化もしたので、ソースコードを貼ります。
かける演算子以降のSpriteのx座標はサンプルからの相対的な座標を指定しています。
このようにすることで、サンプルの要素の座標を変更するだけで、
全体の位置を動かすことができるのです。
表示人数はcountという変数で管理しているので、
countを割ったりあまり出したりして、一桁ずつの人数をもとめます。
var CountSystem=Class.create(Sprite,{
initialize:function(){
this.count=0;
//背景
const w=160;
const h=80;
const y=HEIGHT-h/2-32;
Sprite.call(this,w,h);
this.image=game.assets['./img/countBackground.png'];
this.x=WIDTH;
this.y=HEIGHT-h;
scene.addChild(this);
//サンプル本体
this.sample=new Sprite(64,64);
this.sample.x=WIDTH;
this.sample.y=y;
this.sample.image=game.assets['./img/charTip8dir.png'];
this.sample.frame=42;
scene.addChild(this.sample);
//かける
this.kakeru=new Sprite(32,32);
this.kakeru.x=this.sample.x+64;;
this.kakeru.y=y+32;
this.kakeru.image=game.assets['./img/kakeru.png'];
scene.addChild(this.kakeru);
//10のくらい
this.numOfTen=new Sprite(32,64);
this.numOfTen.x=this.kakeru.x+32;
this.numOfTen.y=y;
this.numOfTen.image=game.assets['./img/number.png'];
scene.addChild(this.numOfTen);
//1のくらい
this.numOfOne=new Sprite(32,64);
this.numOfOne.x=this.numOfTen.x+32;
this.numOfOne.y=y;
this.numOfOne.image=game.assets['./img/number.png'];
scene.addChild(this.numOfOne);
this.onenterframe=function(){
this.numOfTen.frame=this.count/10%10;
this.numOfOne.frame=this.count%10;
}
},
countUp:function(){
this.count++;
}
});
ツイッターでつぶやく
ツイートボタンをenchant.jsの画面内に設置しました。
はじめ、enchant.jsのプラグインを使用して行うものだと勘違いしており、苦労しました。
後に、プラグインはユーザー情報を取得したりなど認証が必要な処理用であることが判明しました。
画面からウィンドウを表示する処理にはwindow.open関数を使用しました。
この関数では、URLを使用して新しいウィンドウを開くことができます。
この関数をSpriteのクリック時イベントに追加することで機能を実装しています。
実際のコードは以下の感じです。
tweetButton.addEventListener(Event.TOUCH_START,function(){
var tweetText=count+'人の子供達を育て上げました！';
var features='width=650, height=450, menubar=no, toolbar=no, scrollbars=yes';
var win = window.open("https://twitter.com/share?text="+tweetText+"&","twitter-share-button",features);
});
tweetTextの内容を指定することで、はじめから入力されているツイート内容を指定することができます。
今日の時点ではスペースの入れ方がわからず、
このままではハッシュタグを使用することができないため、
明日はそれについてしらべようと思います。
参考
window.openについて
イヌでもわかるJavaScript講座Step.13 - 新しいウィンドウで表示させる
ツイートボタンについて
Share Bookmarklet
【小窓編】SNSボタン設置方法マトメ facebook, Pin it (Pinterest), twitter, Googleプラス, Mixiチェック