class.js

   1 TTweet = enchant.Class.create(enchant.Sprite, {
   2         initialize : function(w, h) {
   3                 this.lifetime = 0;
   4                 enchant.Sprite.call(this, w, h + TTweet.TAIL);
   5                 this.image = new Surface(w, h + TTweet.TAIL);
   6                 var t = TTweet.TAIL;
   7                 var s = TTweet.SIZE;
   8                 var c = TTweet.CURVE;
   9                 this.outCurve = {
  10                         lt : {x:  0, y:  t},
  11                         rt : {x:  w, y:  t},
  12                         rd : {x:  w, y:h+t},
  13                         ld : {x:  0, y:h+t}
  14                 };
  15                 this.inCurve = {
  16                         lt : {x:  0+s, y:  t+s},
  17                         rt : {x:  w-s, y:  t+s},
  18                         rd : {x:  w-s, y:h+t-s},
  19                         ld : {x:  0+s, y:h+t-s}
  20                 };
  21                 this.image.context.font = "12px 'Times New Roman'";
  22                 this.addEventListener('enterframe', function(){
  23                         if((this.age % 15) == 0){
  24                                 this.lifetime--;
  25                         }
  26                         if(this.lifetime <= 0){
  27                                 this.lifetime = 0;
  28                                 this.opacity = 0;
  29                         }
  30                 });
  31         },
  32         reDraw : function() {
  33                 var c = TTweet.CURVE;
  34                 var o = this.outCurve;
  35                 with(this.image.context) {
  36                         fillStyle = 'black';
  37                         strokeStyle = 'black';
  38                         beginPath();
  39                         moveTo(o.lt.x, o.lt.y+c);
  40                         quadraticCurveTo(o.lt.x, o.lt.y, o.lt.x+c, o.lt.y);
  41                         lineTo(o.rt.x-c, o.rt.y);
  42                         quadraticCurveTo(o.rt.x, o.rt.y, o.rt.x, o.rt.y+c);
  43                         lineTo(o.rd.x, o.rd.y-c);
  44                         quadraticCurveTo(o.rd.x, o.rd.y, o.rd.x-c, o.rd.y);
  45                         lineTo(o.ld.x+c, o.ld.y);
  46                         quadraticCurveTo(o.ld.x, o.ld.y, o.ld.x, o.ld.y-c);
  47                         // しっぽ
  48                         // var _height = 100;
  49                         // lineTo(this.width/2-4,_height + TTweet.TAIL);
  50                         // lineTo(this.width/2,_height + 0);
  51                         // lineTo(this.width/2+4,_height + TTweet.TAIL);
  52                         closePath();
  53                         fill();
  54                         stroke();
  55                 };
  56                 this.clear();
  57         },
  58         clear : function() {
  59                 var c = TTweet.CURVE;
  60                 var o = this.outCurve;
  61                 var i = this.inCurve;
  62                 with(this.image.context) {
  63                         // 抜く
  64                         fillStyle = 'white';
  65                         beginPath();
  66                         moveTo(i.lt.x, o.lt.y+c);
  67                         quadraticCurveTo(i.lt.x, i.lt.y, o.lt.x+c, i.lt.y);
  68                         lineTo(o.rt.x-c, i.rt.y);
  69                         quadraticCurveTo(i.rt.x, i.rt.y, i.rt.x, o.rt.y+c);
  70                         lineTo(i.rd.x, o.rd.y-c);
  71                         quadraticCurveTo(i.rd.x, i.rd.y, o.rd.x-c, i.rd.y);
  72                         lineTo(o.ld.x+c, i.ld.y);
  73                         quadraticCurveTo(i.ld.x, i.ld.y, i.ld.x, o.ld.y-c);
  74                         closePath();
  75                         fill();
  76                 };
  77         },
  78         text : function(text, x, y) {
  79                 this.clear();
  80                 this.opacity = 0.8;
  81
  82                 this.reDraw();
  83                 with(this.image.context) {
  84                         // var size = measureText(text);
  85                         fillStyle = 'black';
  86                         textAlign = 'center';
  87                         textBaseline = 'middle';
  88                         this.x = x;
  89                         this.y = y;
  90                         // fillText(text,this.width/2,this.height/2);
  91                         // console.log(size);
  92                         // this.width = size;
  93                         // console.log(this.width);
  94                         // this.reDraw();
  95                         var textList = text.split("\n");
  96                         var len = textList.length / 2;
  97                         var height = (this.height/(1 + len));
  98                         this.fillTextLine(text,this.width/2, height);
  99                 }
 100                 this.lifetime = 7;
 101
 102         },
 103         fillTextLine : function(text, x, y) {
 104                 var textList = text.split("\n");
 105                 var lineHeight = this.image.context.measureText("あ").width + 2;
 106                 var self = this;
 107                 textList.forEach(function(text, i) {
 108                         self.image.context.fillText(text, x, y + lineHeight * i);
 109                 });
 110         },
 111
 112
 113 });
 114 TTweet.TAIL  =  8;
 115 TTweet.SIZE  =  2;
 116 TTweet.CURVE = 16;
 117
 118
 119 var Box = enchant.Class.create(enchant.Sprite, {
 120         initialize : function(ctl, node, x, y,  w, h) {
 121                 enchant.Sprite.call(this, w, h + TTweet.TAIL);
 122                 this.node = node;
 123                 this.x = x;
 124                 this.y = y;
 125                 //even ObjSprite
 126                 this.id = guid();
 127
 128
 129                 this.ctl = ctl;
 130                 ctl.addObj(this);
 131                 ctl.game.rootScene.addEventListener('touchstart', this.touchstart(this));
 132                 ctl.backgroundMap.addChild(this);
 133
 134
 135                 this.lifetime = 999;
 136                 this.image = new Surface(w, h + TTweet.TAIL);
 137                 var t = TTweet.TAIL;
 138                 var s = TTweet.SIZE;
 139                 var c = TTweet.CURVE;
 140                 this.outCurve = {
 141                         lt : {x:  0, y:  t},
 142                         rt : {x:  w, y:  t},
 143                         rd : {x:  w, y:h+t},
 144                         ld : {x:  0, y:h+t}
 145                 };
 146                 this.inCurve = {
 147                         lt : {x:  0+s, y:  t+s},
 148                         rt : {x:  w-s, y:  t+s},
 149                         rd : {x:  w-s, y:h+t-s},
 150                         ld : {x:  0+s, y:h+t-s}
 151                 };
 152                 this.image.context.font = "12px 'Times New Roman'";
 153                 var self = this;
 154                 this.addEventListener('enterframe', function(){
 155                         if((this.age % BASE_FPS) == 0){
 156                                 this.lifetime--;
 157                                 this.drawBox();
 158                         }
 159                         if(this.lifetime <= 0){
 160                                 this.lifetime = 0;
 161                                 this.opacity = 0;
 162                                 this.removeEventListener('enterframe', arguments.callee);
 163                                 self.release();
 164                         }
 165                 });
 166         },
 167         reDraw : function() {
 168                 var c = TTweet.CURVE;
 169                 var o = this.outCurve;
 170                 with(this.image.context) {
 171                         fillStyle = 'black';
 172
 173                         strokeStyle = 'black';
 174                         beginPath();
 175                         moveTo(o.lt.x, o.lt.y+c);
 176                         quadraticCurveTo(o.lt.x, o.lt.y, o.lt.x+c, o.lt.y);
 177                         lineTo(o.rt.x-c, o.rt.y);
 178                         quadraticCurveTo(o.rt.x, o.rt.y, o.rt.x, o.rt.y+c);
 179                         lineTo(o.rd.x, o.rd.y-c);
 180                         quadraticCurveTo(o.rd.x, o.rd.y, o.rd.x-c, o.rd.y);
 181                         lineTo(o.ld.x+c, o.ld.y);
 182                         quadraticCurveTo(o.ld.x, o.ld.y, o.ld.x, o.ld.y-c);
 183                         closePath();
 184                         fill();
 185                         stroke();
 186                 };
 187                 this.clear();
 188         },
 189         clear : function() {
 190                 var c = TTweet.CURVE;
 191                 var o = this.outCurve;
 192                 var i = this.inCurve;
 193                 with(this.image.context) {
 194                         // 抜く
 195                         fillStyle = 'white';
 196                         beginPath();
 197                         moveTo(i.lt.x, o.lt.y+c);
 198                         quadraticCurveTo(i.lt.x, i.lt.y, o.lt.x+c, i.lt.y);
 199                         lineTo(o.rt.x-c, i.rt.y);
 200                         quadraticCurveTo(i.rt.x, i.rt.y, i.rt.x, o.rt.y+c);
 201                         lineTo(i.rd.x, o.rd.y-c);
 202                         quadraticCurveTo(i.rd.x, i.rd.y, o.rd.x-c, i.rd.y);
 203                         lineTo(o.ld.x+c, i.ld.y);
 204                         quadraticCurveTo(i.ld.x, i.ld.y, i.ld.x, o.ld.y-c);
 205                         closePath();
 206                         fill();
 207                 };
 208         },
 209         drawBox : function() {
 210                 this.clear();
 211                 this.opacity = 0.7;
 212                 text = this.node.getStatusForDisplay();
 213                 this.reDraw();
 214                 with(this.image.context) {
 215                         fillStyle = 'black';
 216                         textAlign = 'center';
 217                         textBaseline = 'middle';
 218                         var textList = text.split("\n");
 219                         var len = textList.length / 2;
 220                         var height = (this.height/(1 + len));
 221                         this.fillTextLine(text,this.width/2, height);
 222                 }
 223         },
 224         fillTextLine : function(text, x, y) {
 225                 var textList = text.split("\n");
 226                 var lineHeight = this.image.context.measureText("あ").width + 2;
 227                 var self = this;
 228                 textList.forEach(function(text, i) {
 229                         self.image.context.fillText(text, x, y + lineHeight * i);
 230                 });
 231         },
 232         getX : function(){
 233                 return this.x;
 234         },
 235         getY : function(){
 236                 return this.y;
 237         },
 238         getWidth: function(){
 239                 return this.width;
 240         },
 241         getHeight: function(){
 242                 return this.height;
 243         },
 244         touchstart:function(self){
 245                 return function(e){
 246                         if(typeof e === "undefined")return;
 247                         // this.removeEventListener('touchstart', arguments.callee);
 248                         // self.release();
 249                         // if(self.x <= e.x && self.x + self.width >= e.x
 250                         //      && self.y <= e.y && self.y + self.height >= e.y
 251                         //      ){
 252                         if(ctl.isCollision(e, self)){
 253                                 this.removeEventListener('touchstart', arguments.callee);
 254                                 self.release();
 255                         }
 256
 257                 };
 258         },
 259         release: function(){
 260                 this.parentNode.removeChild(this);
 261                 ctl.backgroundMap.removeChild(this);
 262                 ctl.removeObj(this);
 263                 this.lifetime = null;
 264                 this.ctl = null;
 265         }
 266
 267 });
 268
 269
 270 GPopup = enchant.Class.create(enchant.Sprite, {
 271         initialize : function(scene, x, y, w, h) {
 272                 enchant.Sprite.call(this, w, h);
 273                 this.image = new Surface(w, h);
 274                 this.x = x;
 275                 this.y = y;
 276                 scene.addChild(this);
 277                 this.scene = scene;
 278                 this.text = "";
 279         },
 280         clear : function() {
 281                 this.image.context.fillStyle = '#000099';
 282                 this.image.context.fillRect(0, 0, this.getWidth(), this.getHeight());
 283         },
 284         setText : function(text) {
 285                 this.image.context.fillStyle = 'black';
 286                 this.image.context.textAlign = 'left';
 287                 this.image.context.textBaseline = 'top';
 288                 this.image.context.font = "13px 'Times New Roman'";
 289
 290                 var textWidth = Math.floor(this.image.context.measureText(text).width);
 291                 var lineHeight = this.image.context.measureText("あ").width;
 292                 var _textList = text.split("\n");
 293                 this.renew(this.scene, this.x, this.y, textWidth, (lineHeight) * _textList.length + 6);
 294                 this.text = text;
 295         },
 296         drawText : function (){
 297                 this.clear();
 298                 var x = 0;
 299                 var y = 0;
 300                 // var lineHeight = this.image.context.measureText("あ").width;
 301                 this.image.context.fillStyle = '#ffffff';
 302                 this.image.context.textAlign = 'left';
 303                 this.image.context.textBaseline = 'alphabetic';
 304                 this.image.context.font = "12px 'Times New Roman'";
 305                 this.fillTextLine(this.text ,x, y);
 306         },
 307         getWidth : function(){
 308                 return this.image.width;
 309         },
 310         getHeight : function(){
 311                 return this.image.height;
 312         },
 313         fillTextLine : function(text, x, y) {
 314                 var textList = text.split("\n");
 315                 var lineHeight = this.image.context.measureText("あ").width + 2;
 316                 var self = this;
 317                 textList.forEach(function(text, i) {
 318                         self.image.context.fillText(text, x, y + lineHeight * (i+1));
 319                 });
 320         },
 321         renew : function(scene, x, y, w, h){
 322                 scene.removeChild(this);
 323                 enchant.Sprite.call(this, w, h);
 324                 this.image = new Surface(w, h);
 325                 this.x = x;
 326                 this.y = y;
 327                 scene.addChild(this);
 328         }
 329 });
 330
 331
 332 GWindow = enchant.Class.create(enchant.Sprite, {
 333         initialize : function(scene, x, y, w, h) {
 334                 enchant.Sprite.call(this, w, h);
 335                 this.image = new Surface(w, h);
 336                 this.x = x;
 337                 this.y = y;
 338                 scene.addChild(this);
 339         },
 340         clear : function() {
 341                 this.image.context.fillStyle = '#ffff00';
 342                 this.image.context.fillRect(0, 0, this.getWidth(), this.getHeight());
 343         },
 344         text : function(text, x, y) {
 345                 this.clear();
 346                 this.image.context.fillStyle = 'black';
 347                 this.image.context.textAlign = 'left';
 348                 this.image.context.textBaseline = 'middle';
 349                 this.image.context.font = "12px 'Times New Roman'";
 350                 var textWidth = Math.floor(this.image.context.measureText(text).width);
 351
 352                 var lineHeight = this.image.context.measureText("あ").width;
 353                 this.image.context.fillText(text + ":" + textWidth,x, y + lineHeight);
 354         },
 355         getWidth : function(){
 356                 return this.image.width;
 357         },
 358         getHeight : function(){
 359                 return this.image.height;
 360         },
 361
 362         renew : function(scene, x, y, w, h){
 363                 scene.removeChild(this);
 364                 enchant.Sprite.call(this, w, h);
 365                 this.image = new Surface(w, h);
 366                 this.x = x;
 367                 this.y = y;
 368                 scene.addChild(this);
 369         }
 370 });
 371
 372
 373 //how to use
 374 //var tweet = new TTweet(128, 64);
 375 //tweet.text("ABCDEFG");