Messing around

Get help with JavaScript coding questions and share your snippets with the community.
Post Reply
rpggamer17
Posts: 44
Joined: Wed Jun 07, 2017 2:14 am

Messing around

Post by rpggamer17 » Tue Nov 28, 2017 9:13 am

I was messing around with loadAsset and setImage.
Basic idea:

Code: Select all

function LoadAndSetImage(fileName, x, y, w, h)
{
   let assets = { "images": [ fileName ] };
   
   rpgcode.loadAssets( assets, function(fileName, x, y, w, h) {
      rpgcode.setImage(fileName, x, y, w, h );
      rpgcode.renderNow();
      console.log(fileName+" "+x+" "+y);
   });
}
The console.log shows undefined. Which makes sense.

Code: Select all

function LoadAndSetImage(fileName, x, y, w, h)
{
   let Temp_SetFunction = function(_fileName = fileName, _x = x, _y = y, _w = w, _h = h) { //set default parameters
         rpgcode.setImage(_fileName, _x, _y, _w, _h );
         rpgcode.renderNow();
         console.log("Loaded "+_fileName+" "+_x+" "+_y);
   };
   let isLoaded = !!Crafty.assets[Crafty.__paths.images +fileName]; //Is there a simpler way to access the state of this via rpgcode?
   if( isLoaded )
   {//delay incase it is loading
      rpgcode.delay(250, Temp_SetFunction);
      return;
   }
   console.log("Loading "+fileName+" "+x+" "+y);
   let assets = { "images": [ fileName ]  };
   rpgcode.loadAssets( assets, Temp_SetFunction);
};
The above works on small files. Is there a way to check if a file is 'loading', like the progress of it? I can't find anything about it on craftyjs.com.
If you remove the delay and just call Temp_SetFunction(), if the asset is loading the image will not show.

Why am I doing it this way? Mainly boredom.

rpggamer17
Posts: 44
Joined: Wed Jun 07, 2017 2:14 am

Re: Messing around

Post by rpggamer17 » Thu Feb 01, 2018 9:54 pm

My brain hurts. I get how it works but I don't like it at all. I wanted a sort of auto-call feature.
I wanted it to be fast so I used arrow functions... They are quite pointless and complicate things.
I am never going to use this.
It does work though. Set it as a start up program and move the mouse to the top left. A rectangle and a circle should show.

Code: Select all

var Sys = (
   function (m)
   {
      m.g_callbacks = []; //stores all callbacks
      m.mousePos = { x:0, y:0 };
      //update mousepos and call Sys.update();
      rpgcode.registerMouseMove((e) => {m.mousePos.x = e.realX; m.mousePos.y = e.realY; m.update();});

      m.Callback = {};
      //arguments must be in array format [arg1,arg2]
      m.Callback.add = function (condition,arguments1, callback,arguments2)
      {
         m.g_callbacks.push({
            condition: condition,
            args1: arguments1,
            callback: callback,
            args2: arguments2
         });
      };
      m.Callback.callFunction = (c) => (c.condition(...c.args1) ? c.callback(...c.args2) : undefined);
      m.Callback.update = () => m.g_callbacks.forEach( m.Callback.callFunction );

      //Collision - uses callFunction from above
      m.g_collisions = [];
      m.Collision = {};
      m.Collision.add = (cobj,callback,args) => m.g_collisions.push({"obj": cobj, "callback": callback, "args": args});
      m.CheckCollision = function (pos, cobj) //basic circle and rect check:
      {
         if(cobj["radius"] && rpgcode.getDistanceBetweenPoints(pos.x,pos.y,cobj.x,cobj.y) <= cobj.radius)
            return true;
         else if(pos.x > cobj.x && pos.x < cobj.x+cobj.width && pos.y > cobj.y && pos.y < cobj.y+cobj.height)
            return true;
         return false;
      };
      let collisioncallbackobj = {
         condition: m.CheckCollision,
         args1: [m.mousePos,undefined],
         callback: undefined,
         args2: []
      };
      //Assign variables to the above
      let prepareCollisionCallback = (c) => { collisioncallbackobj.callback = c.callback; collisioncallbackobj.args2 = c.args; collisioncallbackobj.args1[1] = c.obj; collisioncallbackobj.args2[c.args.length] = c.obj; };
      m.Collision.check = (c) => { prepareCollisionCallback(c); m.Callback.callFunction(collisioncallbackobj); };
      m.Collision.update = () => m.g_collisions.forEach( m.Collision.check );
      //update both:
      m.update = () => { m.Callback.update(); m.Collision.update(); }
      return m;
   }(Sys || {})
);
//Callback test
function condition(arg)
{
   return arg;
};
function callback(arg,arg2)
{
   rpgcode.drawText(128,32,arg+arg2);
   rpgcode.renderNow();
};
Sys.Callback.add(condition,[true],callback,["Success","ful"]);
Sys.update();
//Collision test
var CRect = {
   "x": 32, "y": 32,
   "width": 64, "height": 64
};
var CCircle = {
   "x": 128, "y": 128,
   "radius": 32
};
function Collision(text,xOffset,yOffset,cobj) //callback on success
{
   if(cobj && cobj["radius"])
      rpgcode.drawCircle(cobj.x,cobj.y,cobj.radius);
   else if(cobj)
      rpgcode.drawRect(cobj.x,cobj.y,cobj.width,cobj.height,2);
   rpgcode.drawText(cobj.x+xOffset,cobj.x+yOffset,text);
   rpgcode.renderNow();
};

Sys.Collision.add(CRect,Collision,["Test",20,32]);
Sys.Collision.add(CCircle,Collision,["Test2",-16,0]);
Why am I doing it this way? Mainly boredom.

rpggamer17
Posts: 44
Joined: Wed Jun 07, 2017 2:14 am

Re: Messing around

Post by rpggamer17 » Sun Feb 18, 2018 6:33 am

Humm... My window system that I was working on is finished and works quite well. It's ridiculously hard to make anything with it though.

I basically built it around rpgwizard's default canvases and craftys mouse handling ability. I've gotten rid of all calls to rpgcode's register functions (using crafty's lastEvent variable instead).

I don't like it. It works but it's slow... I'm using setInterval like I always do. I should use AddRunTimeProgram but... humm...
For the moment my window system is put on hold. I'm kind of 'forcefully' adjusting rpgwizard a bit.
I'll just post the object I'm using. It is some-what standalone (No mouseevent feature/update). I might post Sys/Window.js after this but I really don't like it.
Function reference in the below.

Code: Select all

/* FileName: "WindowObject.js"
 * rpgcode.setGlobal("WindowObject",WindowObject) is called after the function declaration
 * Function reference below the function declaration
 * 
 * Preferred object creation:
 * -Load Sys/Window.js as an asset:
 * -Call Sys.Window.Create(w,h,canvasid);
 * 
 * var NewWindow = Sys.Window.Create(64,64,"64x64Box");
 * rpgcode.drawText(0,16,"Hello", "64x64Box"); //<------ NOTICE THIS
 * rpgcode.drawText(0,32,"Hello2", NewWindow.canvasid);
 * NewWindow.place(32,32);
 * //Sys.Window will auto-update, auto-call any event functions, and auto-render the box.
 * 
 * -Without loading Sys/Window.js as an asset:
 * -There will be no auto-updates, auto-calling of event functions, or auto-rendering
 * 
 * var WindowObject = rpgcode.getGlobal("WindowObject");
 * var NewWindow = new WindowObject(64,64,"64x64Box");
 * rpgcode.drawText(0,16,"Hello","64x64Box");
 * rpgcode.drawText(0,32,"Hello2",NewWindow.canvasid);
 * NewWindow.place(32,32);
 * NewWindow.draw();
 *
 * //You could load this file as an asset and remove the 'getGlobal' part from the above
 */
 
if(rpgcode.getGlobal("WindowObject")) //declared already
   rpgcode.endProgram();//exit

function WindowObject (w, h, canvasid) {
   rpgcode.createCanvas(w,h,canvasid);
   Object.assign(this,rpgcode.canvases[canvasid]); //ugly
   rpgcode.canvases[canvasid] = this; //update the reference
   //Note: x,y,canvas,render have been added to this object

   //set the visual width and height to the defaults
   this.w = this.canvas.width;
   this.h = this.canvas.height;
   this.canvasid = canvasid;
   //Parent information:
   this.parentcanvas = undefined; //the canvas we are supposed to be drawn onto
   this.children = []; //canvases that are supposed to be drawn on to this one - They must be window-objects
   //Event information:
   this.mouseState = 0; //0 not-over, 1 over, 2, clicked
   //Callbacks for mouse events:
   //I might move this later as Sys.Window is the only place they are called
   //They ruin the 'standalone' feature of this object
   this.mouseEvent = {
      "Enter": undefined,//ran once and only upon entry
      "Exit": undefined, //ran once and only upon exit
      
      "Over": undefined, //constantly ran while the mouse is over this window
      "Down": undefined, //constantly ran while a mouseButton is pressed
      "Up": undefined,   //ran once a mouseButton is released
      "Click": undefined,
      "DoubleClick": undefined
   };
   //Callback Format: NewWindow.mouseEvent["Enter"] = function(e,window) { };
   //    e is the standard event object: e.realX, e.realY, e.mouseButton
   //    window is this object
   
   //Callback for each draw event.
   this.UpdateFunction = undefined;
   //Callback Format: NewWindow.UpdateFunction = function(window) { }
   //    Return true to reset 'LastUpdate' to Date.now()
   /* 
    * Example:
    * NewWindow.UpdateFunction = function(window) {
    *    if(Date.now()-window.LastUpdate < 3000)
    *       return false; //Not time yet     
    *    //---> 3 seconds have past: 
    *    //do stuff
    *    return true; //Reset window.LastUpdate
    * };
    */

   //Helpful variables:
   // Timer, Note: value is in milliseconds
   this.LastUpdate = Date.now(); //Return true in UpdateFunction to reset
   this.timeOfEntrance = Date.now(); //The LAST timeOf - updated after Enter event function
   this.timeOfExit = Date.now(); //The LAST timeOf  - updated after Exit event function
   /*
    * Why after Enter and Exit?
    * Date.now() IS the enter & exit time during their function call
    * 
    * To get elasped of "timeSince" subtract from Date.now():
    * var timeSince_UpdateFunctionCall = Date.now()-window.LastUpdate;
    * var timeSince_Entrance = Date.now()-window.timeOfEntrance;
    * var timeSince_Exit = Date.now()-window.timeOfExit;
    */
   //Minor speed up for distance sorting:
   this.lastDistanceCheck = { "toX": undefined, "toY": undefined, "result": undefined };
};
rpgcode.setGlobal("WindowObject",WindowObject);

/* Function Reference and useful variables:
 *  parameters enclosed in [ ] are optional

NewWindow.active = true; //drawn and updated - default

NewWindow.active = false;
---- Disables drawing but NOT the update function
      The UpdateFunction can be used as a timer of sorts.

NewWindow.place(x, y [, onToCanvas [, newWidth, newHeight] ]);
---- Basically rpgcode.setCanvasPosition and rpgcode.setCanvasOnto (storing the variables)
      passing null or undefined to onToCanvas will call: NewWindow.removeFromParent();
      see NewWindow.resize(newWidth, newHeigth);

NewWindow.removeFromParent();
---- Remove it from whatever canvas it is set upon

NewWindow.centerOnPoint(centerx, centery);
---- Just centers the canvas on a point
      passing null or undefined to centerx or centery will ignore it
      NewWindow.centerOnPoint( null, 256 ); //Keeps the x the same but centers y

NewWindow.ContainsPoint(x, y);
---- A rect check function that returns true or false
      true on the canvas, false if not

NewWindow.distanceToCenter(x, y)
---- returns the distance to the canvases center point

NewWindow.resize([ newWidth, newHeight ]);
---- Just stretches the canvas
      Setting a parameter to 0: NewWindow.resize(0,128); NewWindow.resize(128,0);
      will not change that value.
      calling it without any parameters: NewWindow.resize()
      restores it to it's orginal width and height

NewWindow.fill(red, green, blue);
---- Fill it with the desired color
      fillRect basically. Restores the last color.

NewWindow.outline(lineWidth, red, green, blue);
---- Outline it with the desired color
      drawRect basically. Restores the last color.

NewWindow.draw([skipUpdate]);
---- Similar to rpgcode.renderNow() but (in order):
      if skipUpdate is false or absent(default) - calls the UpdateFunction,
      draws and updates all the children (any canvases placed upon this window),
      renders the canvas

NewWindow.update();
---- Just calls the update function (UpdateFunction)
 */


WindowObject.prototype.place = function (x, y, onTo, newWidth, newHeight) {
   this.active = true;
   this.x = x; this.y = y;
   this.w = newWidth || this.w;
   this.h = newHeight || this.h;
   if(this.parentcanvas) {
      this.x = x+rpgcode.canvases[this.parentcanvas].x;
      this.y = y+rpgcode.canvases[this.parentcanvas].y;
   }
   if(arguments.length < 3) //The optional parameters were not included
      return;
   if(onTo !== this.parentcanvas) { //changing the parent in someway
      this.removeFromParent();
      //New parent:
      if(onTo !== null && onTo !== undefined) {
         let newParentObject = rpgcode.canvases[onTo];
         if(newParentObject && newParentObject.children)
            newParentObject.children.push(this);
         //update screen position:
         this.x = x+rpgcode.canvases[onTo].x;
         this.y = y+rpgcode.canvases[onTo].y;
      }
   }
   this.parentcanvas = onTo || undefined;
};

WindowObject.prototype.removeFromParent = function () {
   if(!this.parentcanvas)
      return; //No parent
   let oldParentObject = rpgcode.canvases[this.parentcanvas];
   this.parentcanvas = undefined;
   if(!oldParentObject)
      return; //couldn't be found
   let my = this; //allows passing of 'this' to => function notation
   let index = oldParentObject.children.findIndex( (element) => element.canvasid === my.canvasid );
   if(index > -1)
      oldParentObject.children.splice(index,1);
};

WindowObject.prototype.centerOnPoint = function (x,y) {
   if( x !== undefined || x !== null )
      this.x = x-this.w/2;
   if( y !== undefined || y !== null )
      this.y = y-this.h/2;
};

//Simple rect check:
WindowObject.prototype.ContainsPoint = function (x,y) {
   if(!this.active)
      return false;
   return (x > rpgcode.canvases[this.canvasid].x && x < rpgcode.canvases[this.canvasid].x+this.w &&
            y > rpgcode.canvases[this.canvasid].y && y < rpgcode.canvases[this.canvasid].y+this.h);
};
//As the name says, gets the distance to the center of the canvas
WindowObject.prototype.distanceToCenter = function (x, y) {
   if(this.lastDistanceCheck.toX === x && this.lastDistanceCheck.toY === y)
      return this.lastDistanceCheck.result; //exit
   this.lastDistanceCheck.toX = x; this.lastDistanceCheck.toY = y;
   this.lastDistanceCheck.result = rpgcode.getDistanceBetweenPoints(x,y,
         rpgcode.canvases[this.canvasid].x+this.w/2,rpgcode.canvases[this.canvasid].y+this.h/2);
   return this.lastDistanceCheck.result;
};

WindowObject.prototype.resize = function (newWidth,newHeight) {
   if(arugments.length === 0) {
      this.w = this.canvas.width;
      this.h = this.canvas.height;
      return;
   }
   this.w = newWidth || this.w;
   this.h = newHeight || this.h;
};

WindowObject.prototype.fill = function (r,g,b,a)
{
   let old = rpgcode.rgba;
   if(r === undefined || r === null)
      r = old.r;
   if(g === undefined || g === null)
      g = old.g;
   if(b === undefined || b === null)
      b = old.b;
   if(a === undefined || a === null)
      a = old.a;
   rpgcode.setColor(r, g, b, a);
   rpgcode.fillRect(0,0,this.w,this.h,this.canvasid);
   rpgcode.setColor(old.r,old.g,old.b,old.a);
};

WindowObject.prototype.outline = function (padding,r,g,b,a)
{
   let old = rpgcode.rgba;
   if(r === undefined || r === null)
      r = old.r;
   if(g === undefined || g === null)
      g = old.g;
   if(b === undefined || b === null)
      b = old.b;
   if(a === undefined || a === null)
      a = old.a;
   rpgcode.setColor(r, g, b, a);
   rpgcode.drawRect(0,0,this.w,this.h,padding,this.canvasid);
   rpgcode.setColor(old.r,old.g,old.b,old.a);
};

WindowObject.prototype.update = function ()
{
   let updateTimer = true;
   if(this.UpdateFunction)
      updateTimer = this.UpdateFunction(this);
   if(updateTimer === true)
      this.LastUpdate = Date.now();
};
//Similar to rpgcode.renderNow but updates & calls event functions
WindowObject.prototype.draw = function (skipUpdate) {
   if(!skipUpdate)
      this.update();
   if(!this.active)
      return;
   //Draw the children first
   this.children.forEach( (element) => element.draw() );
   if(this.parentcanvas)
      rpgcode.drawOntoCanvas(this.canvasid,
                              this.x-rpgcode.canvases[this.parentcanvas].x,
                              this.y-rpgcode.canvases[this.parentcanvas].y,
                              this.w, this.h, this.parentcanvas);
   else if( this.w !== this.canvas.width || this.h !== this.canvas.height )
      rpgcode.drawOntoCanvas(this.canvasid,this.x,this.y,this.w,this.h,"renderNowCanvas");
   else
      rpgcode.renderNow(this.canvasid);
};
rpgcode.endProgram();//exit
Folder/FileName: Sys/Window.js

Code: Select all

//Sys - base of the entire system
var Sys = Sys || {};
 //If it hasn't been create, create it {}
/*
 * WindowObject is used by Sys.Window
 * It's a global object that can be used seperately
 * Please make additions in WindowObject.js
 * 
 * Note: WindowObject should not access this module in anyway
 * This module is just for updating
 */
rpgcode.runProgram("WindowObject.js");

var WindowObject = rpgcode.getGlobal("WindowObject");

//Access functions via Sys.Window.FunctionName
//See "Window-Test.js" for examples

Sys.Window = (
function (m) {
   //Module Pattern - Loose Augmentation
   //-- Instead of typing Sys.Window.prototype., I can just type m.
   //Mouse Info:
   m.mouseLocation = Crafty.mousePos; //{ "x": 0, "y": 0 } //Auto-updated by crafty
   m.mouseButton = -1; //button pressed -1 none, 0 left, 1 middle, 2 - right
   m.mouseOver = []; //An array of windowObjects hovered over. See Sys.Window.getWindowAt(x,y); for more info
   m.lastOver = undefined; //reference to the last WindowObject hovered over
   m.currentlyOver = undefined; //=== m.mouseOver[0];
   //Debug info
   m.debug = false;
   m.MouseDebugCanvas = "Sys.Window.MouseCanvas";
   let view = rpgcode.getViewport();
   rpgcode.createCanvas(view.width,view.height,m.MouseDebugCanvas);
   
   //All windows created with this module
   m.allWindows = [];

   /*
    * Switched to a runtime program, see end of file
    */
   //Use clearInterval(Sys.Window.IntervalID) to remove it
   //m.IntervalID = undefined; //The id returned via setInterval
   
   //Basic ID generator - May need improvements.
   let generate_ID = () => "WinID"+m.allWindows.length+"t"+Date.now();
   
   /*
    * The parameters in brackets [] are optional:
    * 
    * var WindowObject = Sys.Window.Create([x, y,] w, h [,canvasid])
    * 
    * Returns a windowobject (or undefined, if w or h is equal to or less than 0)
    * Sys.Window.Create(x,y,w,h,canvasid),
    * Sys.Window.Create(x,y,w,h),
    * Sys.Window.Create(w,h,canvasid),
    * Sys.Window.Create(w,h)
    */
   m.Create = function (x, y, w, h, canvasID) {
      if(arguments.length > 2) { //Handle optional parameters
         canvasID = w;
         w = x; h = y;
         x = 0; y = 0;
      }
      if(!w || !h)
         return undefined;
      canvasID = (canvasID || canvasID === 0) ? canvasID : generate_ID();
      let ret = new WindowObject(w, h, canvasID);
      ret.place(x, y);
      m.allWindows.push(ret);
      return ret;
   };
   
   /* 
    * var ArrayOfWindowObjects = Sys.Window.getWindowAt(x, y [, sortByClosests]);
    * Returns a sorted array of WindowObjects that contain the corrdinate x,y within them
    * if sortByClosests is not set to true or not declared (default):
    * The windows are sorted by size, small to large
    * [0] would be the 'smallest'
    * 
    * if sortByClosests is true:
    * The windows are sorted by distance from x, y to the center of the window 
    * closest to farthest
    * [0] would be the closest
    */
   m.getWindowAt = function (x, y, sortByClosests) {
      let ret = [];
      m.allWindows.forEach( (element) => (element.ContainsPoint(x,y) ? ret.push(element) : undefined) );
      if(ret.length === 0) //nothing to sort
         return ret;
      if(sortByClosests === true) //Sort by distance from center to x,y? 
         return ret.sort( (a,b) => a.distanceToCenter(x,y) - b.distanceToCenter(x,y) );
      //size sort
      return ret.sort((a,b) => (a.w > b.w && a.h > b.h));
   };
   /*
    * var ArrayOfWindowObjects = Sys.Window.getWindowsWithinRange(x,y,radius);
    * Similar to getWindowAt but:
    * The point doesn't need to within the canvas
    * The returned array is sorted by distance to center only
    * Note: Distance to center only. Corners will be ignored
   */
   m.getWindowsWithinRange = function (x, y, radius) {
      let ret = [];
      m.allWindows.forEach( (element) => (element.distanceToCenter(x,y) <= radius ? ret.push(element) : undefined ) );
      //Sort by distance from center to x,y - [0] being the closest
      if(ret.length === 0) //nothing to sort
         return ret;
      return ret.sort( (a,b) => a.distanceToCenter(x,y) - b.distanceToCenter(x,y) );
   };
   /*
    * Called by update function - Not intended for outside use.
    */
   let MouseMoved = function (e)
   {
      m.mouseOver = m.getWindowAt(e.realX, e.realY);
      if(m.currentlyOver === m.mouseOver[0]) { //no change
         if(m.currentlyOver && m.currentlyOver.mouseEvent["Over"]) //call over event
               m.currentlyOver.mouseEvent["Over"](e,m.currentlyOver);
         return; //exit
      }
      //changed somehow - swap lastOver to current, update current
      m.lastOver = m.currentlyOver;
      m.currentlyOver = m.mouseOver[0];
      if(m.currentlyOver) {
         m.currentlyOver.mouseState = 1; //Over
         if(m.currentlyOver.mouseEvent["Enter"]) //call enter
            m.currentlyOver.mouseEvent["Enter"](e,m.currentlyOver);
         m.currentlyOver.timeOfEntrance = Date.now();
      }
      if(m.lastOver) {
         m.lastOver.mouseState = 0; //Not over
         if( m.lastOver.mouseEvent["Exit"] ) //call exit
            m.lastOver.mouseEvent["Exit"](e,m.lastOver);
         m.lastOver.timeOfExit = Date.now();
      }
   };
   /*
    * Called by update function - Not intended for outside use.
    */
   let MouseClicked = function (e)
   {
      if(!m.currentlyOver)
         return;
      if(e.type === "click" && m.currentlyOver.mouseEvent["Click"]) {
         m.currentlyOver.mouseEvent["Click"](e,m.currentlyOver);
         m.currentlyOver.mouseState = 2; //clicked / pressed
         return;
      }
      else if(e.type === "dblclick" && m.currentlyOver.mouseEvent["DoubleClick"]) {
         m.currentlyOver.mouseState = 2; //clicked / pressed
         m.currentlyOver.mouseEvent["DoubleClick"](e,m.currentlyOver);
         return;
      }
      if(e.buttons === 0 && m.mouseButton > -1) { //Up
         m.mouseButton = -1; //-1 === none
         m.currentlyOver.mouseState = 1; //Over
         if(m.currentlyOver.mouseEvent["Up"])
            m.currentlyOver.mouseEvent["Up"](e,m.currentlyOver);
         return;
      }
      if(e.buttons) { //Down
         m.mouseButton = e.mouseButton;
         m.currentlyOver.mouseState = 2; //clicked / pressed
         if(m.currentlyOver.mouseEvent["Down"])
            m.currentlyOver.mouseEvent["Down"](e,m.currentlyOver);
         return;
      }
   };

   /*
    * Called by setInterval
    */
   m.update = function () {
      //Only draw orphans and childless windows
      //their children, if any, are drawn in WindowObject.draw()
      rpgcode.clearCanvas(m.MouseDebugCanvas);
      if(Crafty.lastEvent) {
         MouseClicked(Crafty.lastEvent);
         MouseMoved(Crafty.lastEvent);
         if(m.debug) {
            rpgcode.drawText(16,96,m.mouseButton,m.MouseDebugCanvas);
            if(m.lastOver)
               rpgcode.drawText(0,16,"LastOver: "+ m.lastOver.canvasid +"|ms ago:"+(Date.now()-m.lastOver.timeOfExit),m.MouseDebugCanvas);
            for(let i = 0; i < m.mouseOver.length; i++)
               rpgcode.drawText(0,16*(i+2),"Over: "+ m.mouseOver[i].canvasid+"|ms:"+(Date.now()-m.mouseOver[i].timeOfEntrance),m.MouseDebugCanvas);
            rpgcode.renderNow(m.MouseDebugCanvas);
         }
      }
      m.allWindows.forEach( (element) => (!element.parentcanvas || !element.children.length ? element.draw() : undefined) );
   };
   
   //Use clearInterval(Sys.Window.IntervalID) to remove it
   //m.IntervalID = setInterval(m.update,25);
   
   //A runtimeProgram that only calls Sys.Window.update();
   rpgcode.addRunTimeProgram("Sys/WindowRunTimeUpdate.js");
   return m;
} (Sys.Window || {})
);
rpgcode.endProgram();//exit
Folder/Filename: Sys/WindowRunTimeUpdate.js

Code: Select all

Sys.Window.update();
rpgcode.endProgram();//exit

rpggamer17
Posts: 44
Joined: Wed Jun 07, 2017 2:14 am

Re: Messing around

Post by rpggamer17 » Sun Feb 18, 2018 8:03 am

:lol:
There's no way to remove them from allWindows.
I'm thinking about changing allWindows to a set instead. :/

User avatar
swordmaster
Site Admin
Posts: 53
Joined: Tue May 23, 2017 11:22 pm

Re: Messing around

Post by swordmaster » Tue Feb 20, 2018 2:34 pm

Looks like this could be interesting, I'll have to try it out.

I haven't worked on a UI framework for the Engine yet. I did start one for RPGCode once but that was a long time ago (5 years!):

https://github.com/rpgtoolkit/rpgcode

rpggamer17
Posts: 44
Joined: Wed Jun 07, 2017 2:14 am

Re: Messing around

Post by rpggamer17 » Thu Feb 22, 2018 1:09 am

After messing around with it some more I've noticed some bugs in it.
I don't check for the existence of the parent canvas in the draw function. It shouldn't be a problem with the delete function. At least it doesn't seem to be. I've tested it within the "Down" events as well as the "Over" event (on the parent and the actual canvas).
Here's the ugly delete function:

Code: Select all

//Note: If deleteChildren is set to true:
//This will destroy the children placed upon the specified canvas (as well as their children).
//Calling this on a massive system, say a menu, with deleteChildren set to true should delete everything.
//If deleteChildren is set to false or absent:
//The children will stay where they are on the screen, the canvas specified (their parent) will be deleted.
//Canvases drawn onto windows will need to be deleted manually.
rpgcode.destroyCanvas = function (canvasId, deleteChildren) { //Ugly
   if(!rpgcode.canvases[canvasId])
      return; //canvas doesn't exist
   let index = -1;
   if(rpgcode.canvases[canvasId] instanceof WindowObject)
      index = Sys.Window.allWindows.findIndex( (element) => element.canvasid === canvasId )
   //update all children - I'm doing it weird here I know - see else statement
   Sys.Window.allWindows.forEach( function (element) {
      if(element.parentcanvas !== canvasId && (element.parentcanvas !== null || element.parentcanvas !== undefined))
         return; //not our parent or the parent doesn't exist - allows the use of index 0
      if(rpgcode.canvases[element.parentcanvas] instanceof WindowObject)
         element.removeFromParent(); //update the parents children array
      else
         element.parentcanvas = undefined; //Our parent isn't a windowobject, it's a regular canvas
      if(deleteChildren === true) //destroy this element and its children
         rpgcode.destroyCanvas(element.canvasid);
   });
   if(index > -1)
      Sys.Window.allWindows.splice(index,1);
   if(rpgcode.canvases[canvasId] instanceof WindowObject)
      rpgcode.canvases[canvasId].removeFromParent();//update the parents children array
   delete rpgcode.canvases[canvasId];
};
Now that I'm actually looking at it. I need to redo a bit of the system. A lot of little problems have shown up.
Also: :x :x
Sys.Window.allWindows.findIndex( (element) => element.canvasid === canvasId );

rpggamer17
Posts: 44
Joined: Wed Jun 07, 2017 2:14 am

Re: Messing around

Post by rpggamer17 » Fri Feb 23, 2018 12:01 am

About those files, that is what got me wanting to make this program.
That and it's kinda hard to make buttons and such.

Post Reply