Preview: Text Animations

[adam]

Some code to animate text on the screen prettily, This is just a prototype version though. It's not fully done yet.

PHP Code:

//NPC Created by Rogue Shadow (TCN)
//AIM: RogueTCN
//FORUM PM: adam
// Special messaging prototype 2

//#CLIENTSIDE

// Actions 
//   { "doFade" , time , value 0-1 }
//   { "doMove" , time , new x , new y }
//   { "doZoom" , time , value } - 0 doesn't seem to be a good value for zoom on the text, didn't test in opengl mode yet.
//   { "doDelay", time , value } delays by the specified amount of time.
//   { "NewText" , time , value } instantly changes text, the border sizes follow
// Planned Actions
//   { "doTextColor" , time , {red, green, blue} } - transition from current color to new one smoothly over time.
//   { "doBgColor" , time , {red, green, blue} } - transition from current color to new one smoothly over time. 
//   { "doOutlineColor" , time , {red, green, blue} } - transition from current color to new one smoothly over time.
//   { "doDestruct" } - yeah... almost forgot this feature. The text will go away soon (but not right away) after you delete it's variable
//                      But this will do it right, when added.

// While I'd love to add rotation, it is beyond difficult o.O and insanely complex, 
// unless the methods i've thought of are wrong.


function onCreated(){
  this.join("personal_adam_anitext");
  this.msg2 = newText(this, 300, screenwidth/3, screenheight+10, "This is some great Testing text.", 1, null, true);
  this.msg2.addActions( { {"doMove", 2, screenwidth/3,screenheight/3},{"doFade",2,1},{"doZoom", 2,5}});
  this.msg2.addActions( { {"doZoom", 2, 1} });
  this.msg2.addActions( { {"doDelay", 1}});
  this.msg2.addActions( { {"NewText", "I'm off now, cya."},{"doDelay", 2} });
  this.msg2.addActions( { {"doMove", 1, screenwidth, screenheight/3},{"doFade",2,0},{"doZoom", 2,.1}});
  this.msg2.addActions( {{ "doFade", 1, 1} ,{"doZoom", 1, .1}} );
  this.msg2.addActions( {{"doMove", 1, screenwidth/3,screenheight/3}});
  this.msg2.addActions( {{"doFade", 5, 0} ,  {"doZoom", 5, 1.5}, {"doDelay", 10}});
  for (temp.i = 0; temp.i < 10; temp.i ++ ){
    this.msg2.addActions ( { {"doMove", 2, random(0,screenwidth-10),random(0,screenheight-10) },{"doFade", 2, random(.2,1)},{"doZoom", 2, random(.1,4)} } );
    this.msg2.addActions ( {{"doFade", .5, 0}});this.msg2.addActions({{"NewText", "Action: " @ temp.i+1 @" of 10"},{"doFade",.5,1}});
  }
  this.msg2.start();
} 


And the class.

PHP Code:

//#CLIENTSIDE

function newText(temp.scope, temp.start_i, temp.x, temp.y, temp.text, temp.zoomFactor, temp.textColor, temp.useBackground, temp.bgColor, temp.bgPadding, temp.borderColor, temp.borderThickness){
  // Various Declarations to start with.
  temp.t = new TStaticVar(); // All contained in a single TStaticVar (which is basically a whole script within a script, there are other ways, but this one is fun too.)
  temp.t.global = temp.scope; // Saving the scope seems to make it easier to do things like, draw images, and access other things from within the script here.
  temp.t.start_i = temp.start_i; // The index we start drawing from, incrementing until we're done drawing things.
  temp.t.x = temp.x; temp.t.y = temp.y; // x,y position of the top-left corner of the text. The actual image drawn will extend beyond this by the amount of temp.bgPadding and the borderThickness
  temp.t.textColor = (temp.textColor != null) ? temp.textColor:{1,1,1}; temp.t.alpha = 0; // Default color white, alpha starts at 0 (suggesting Fading in whenever possible)
  temp.t.layer = 10*temp.start_i; // layer 10 times the drawing index, to allow overlapping text rather than smooshing together text.
  temp.t.font = "Comic Sans MS"; temp.t.style = ""; // Default font and style here.
  temp.t.zoom = (temp.zoomFactor != null) ? temp.zoomFactor:1; // default zoom of 1, or what you select.
  temp.t.text = temp.text; // save that text
  temp.t.width = gettextwidth(temp.t.zoom, temp.t.font, "", temp.t.text); // initial width/height,   recalculated on zoom always
  temp.t.height = gettextheight(temp.t.zoom, temp.t.font, "");
  temp.t.queue = {};
  if (temp.useBackground != null){    
    temp.t.background = useBackground;   // if were using the background
    temp.t.bgPadding = (temp.bgPadding != null) ? temp.bgPadding:2; // how far the background extends beyond the text itself
    temp.t.borderThickness = (temp.borderThickness != null) ? temp.borderThickness:2; // the thickness of the backgrounds outline
    temp.t.bgColor = (temp.bgColor != null) ? temp.bgColor:{0,0,0}; // it's color, default black
    temp.t.borderColor = (temp.borderColor != null) ? temp.borderColor:{1,1,1};
  }
  
  temp.t.start = function () {
    this.started = true;
    this.onUpdate();
  };
  
  temp.t.stop = function () {
    this.started = false;
  };
  
  temp.t.addActions = function ( temp.actions ) {
    this.queue.add( temp.actions );
    this.count++;
  };

  temp.t.onUpdate = function () {
    if (!this.started)return;
      for (temp.action: this.queue[0]){
        if (temp.action[0] in {"doZoom", "doMove", "doFade", "doDelay"}){
          if (this.(@temp.action[0])(temp.action))this.garbage.add(temp.action);
        }elseif(temp.action[0] == "NewText"){
      this.NewText(temp.action[1]); this.garbage.add(temp.action);
      }else this.garbage.add(temp.action);
    }


    for (temp.g: this.garbage){
      for (temp.i = 0; temp.i < this.queue[0].size(); temp.i++){
       if (temp.g[0] == this.queue[0][temp.i][0]){
          this.queue[0].delete(temp.i);
          break;
        }
      }
    }
    this.garbage = "";
    if (this.queue[0].size() == 0 && this.queue.size() > 0){
      this.queue.delete(0);
      //echo("Completed actions, moving to next set.");
    }
    this.draw();
    //this.cancelevents("Update");
    this.scheduleevent(0.05, "Update", null);
  };

  temp.t.doFade = function (action) {
    temp.time = temp.action[1];
    temp.newAlpha = temp.action[2];
    if (this.fadeDist == null) {
      this.fadeDist = temp.newAlpha - this.alpha;
      this.fadeStep = this.fadeDist/(temp.time*20);
    }
    if (abs(temp.newAlpha - this.alpha) <= this.fadeStep){
      this.alpha = temp.newAlpha;
    }else this.alpha += this.fadeStep;

    if (this.alpha == temp.newAlpha){
      this.fadeDist = null;
      this.fadeStep = null;
      return true;
    }else return false;
  };

  temp.t.doDelay = function (action) {
    temp.time = int(temp.action[1]*100)/100;
    if (this.delayTime == null){
      this.delayTime = temp.time;
    }
    this.delayTime -= .05;
    if (this.delayTime <= 0){
      this.delayTime = null;
      return true;
    }else return false;
  };
  
  temp.t.doZoom = function (action) {
    temp.time = int(temp.action[1]*100)/100;
    temp.newZoom = int(temp.action[2]*100)/100;
    if (this.zoomDist == null) {
      this.zoomDist = temp.newZoom - this.zoom;
      this.zoomStep = (this.zoomDist*.05)/(temp.time);
    }
    if (abs(temp.newZoom - this.zoom) <= this.zoomStep){
      this.zoom = temp.newZoom;
    }else this.zoom += this.zoomStep;
    
    this.NewText(this.text);
    if (this.zoom == temp.newZoom){
      this.zoomDist = null;
      this.zoomStep = null;
      return true;
    }else return false;
  }; 
  
  temp.t.doMove = function (action) {
    temp.time = int(temp.action[1]*100)/100;
    temp.newx = int(temp.action[2]);
    temp.newy = int(temp.action[3]);
    if (this.moveStep == null){
      temp.dx = temp.newx - this.x;
      temp.dy = temp.newy - this.y;
      temp.dist = (temp.dx^2 + temp.dy ^2)^.5;
      temp.addx = (temp.dx/temp.dist)*(temp.dist*.05/temp.time);
      temp.addy = (temp.dy/temp.dist)*(temp.dist*.05/temp.time);
      this.moveStep = {temp.addx, temp.addy};
    }

    if (abs(temp.newx - this.x) <= this.moveStep[0]){
      this.x = temp.newx;
    }else this.x += this.moveStep[0];
    
    if (abs(temp.newy - this.y) <= this.moveStep[1]){
      this.y = temp.newy;
    }else this.y += this.moveStep[1];
    
    if (this.x == temp.newx && this.y == temp.newy){
      this.moveStep = null;
      return true;
    }else return false;
  };

  temp.t.NewText = function (newText) {
    this.text = temp.newText;
    this.width = gettextwidth(this.zoom, this.font, "", this.text); 
    this.height = gettextheight(this.zoom, this.font, "");
  };

  temp.t.draw = function (){
    temp.i = this.start_i;
    with (this.global.findimg(temp.i)){
      x = thiso.x;  y = thiso.y;
      text = thiso.text;
      red = thiso.textColor[0];  green = thiso.textColor[1];  blue = thiso.textColor[2];
      zoom = thiso.zoom;
      font = thiso.font; style = thiso.style;
      layer = thiso.layer;
      alpha = thiso.alpha;
      mode = 1;
    }
    temp.i++;
    if (!this.background) return temp.i;
    with (this.global.findimg(temp.i)){
      temp.xx=thiso.x;temp.yy=thiso.y;temp.w=thiso.width;temp.h=thiso.height;temp.p=thiso.bgPadding;
      polygon = {xx-p,yy-p,
                 xx+w+p,yy-p,
                 xx+w+p,yy+h+p,
                 xx-p,yy+h+p};
      temp.p2 = temp.p+thiso.borderThickness;
      temp.poly2 = {xx-p2,yy-p2,
                 xx+w+p2,yy-p2,
                 xx+w+p2,yy+h+p2,
                 xx-p2,yy+h+p2};

                 
      layer = thiso.layer - 1;
      red = thiso.bgColor[0]; green = thiso.bgColor[1]; blue = thiso.bgColor[2];
      alpha = thiso.alpha; mode = 1;
    }
    temp.i++;
    with (this.global.findimg(temp.i)){
      polygon = temp.poly2;
      layer = thiso.layer -2;
      red = thiso.borderColor[0]; green = thiso.borderColor[1]; blue = thiso.borderColor[2];
      alpha = thiso.alpha; mode = 1;
    }
    temp.i++;
    this.lasti = temp.i;
    return temp.i;
  };
 
  return temp.t;
}