Messages

Yep.  I am fully aware of that.  Hence the idea of Sandboxing, somehow.  Worker.  Iframe  CSP.  All 3.  Dont really care how.  Uploading and running scripts is the goal or the idea is useless.  Most of the scripts I expect users to run wont be malicious.  However I am certain some jackass will try to run a Porn Installer or Malware or something, and the goal is to let those scripts run but effectively be neutered, no access to DOM, no access to XMLHttpRequest, etc.

I'll ask around.

So I have had an idea...

The idea involves allowing logged in users to upload Javascripts that they write.  Their scripts will run on other users browsers.  However, I do not trust the other users to not upload malicious content.  Most probably wont, but some will inevitably try.  Thus, the idea of using a Worker comes into play.  I havent played with Workers but basically a Worker simply contains scripts that are running from the DOM, which is what I am thinking will help protect the other users from scripts with malicious intent.  It seems like it will be fairly secure.  Workers are also restricted on ther XMLHttpRequests which only returns null, so that function is pretty much useless for loading even more scripts.

Basically imagine this.  A canvas running in a webpage.  Canvas does something that is handled by the User Scripts from inside the Worker.  The webpage that also has the Canvas element can also allow a user to Login.  Since the scripts inside the Worker are not allowed access to the DOM, theoretically, the User can login without their keystrokes being recorded by User Scripts.  In theory.  The other side of that is that I want whats inside the Worker to influence what is displayed on the Canvas.  I dont really care if the Canvas has to be in the Worker or main DOM as long as the User Script can generate output on the Canvas to other Users.

Ive been doing some reading on Workers in JS, but dont quite understand it well enough to see how to achieve BOTH access to the DOM element (which may be insecure if the Worker Script is given the Canvas element as calling Parent may allow unintended access to the DOM, where the script can record another users Username and Password.  Scripts can be uploaded by unknown User, and the concept of allowing a User to upload their own scripts and execute them in the browser is the foundation of the idea so I can NOT simply say "dont let users upload scripts".  I would like to have BOTH but in a way that is as secure as I can make it and STILL allow users to create accounts and upload their scripts.  As I understand it, for the DOM to communicate with the Worker, it uses postMessage, and visa versa.  Objects passed to the Worker are COPIES, thus presenting more difficulty.

How do I make an HTML Canvas (maybe from DOM) take data processed in a custom user script in a secure manner where by the rest of the DOM (such as a Login or Session Cookie) is inaccessible to the Worker?

Oh, and to add Insult to Injury, lets throw in some CSP too! CPS is Content Security Policy.
https://content-security-policy.com/

Looks like I am gonna need that, and Im thinking I dont think it will compromise security stuff too much if I load all the JS files from a single page, like js.php?id=1 and set up the CSP to allow my files, and use the js.php for User files?

 Even a VERY basic example would be EXTREMELY helpful.  Does anyone have an idea on how to do this?

Okie dokie.  So far there is ZERO design choices.  Going for function first, then gonna make it look all purdy and what not.

I dont plan on sticking with 864 * 480 also very temporary, and yeah that needs to be changed.  It was very close to 864 * 486, which is (27 * 32) x (15 * 32)  but needed to get ability to scroll first, which I now have, so its on my "to do" list.  I dont plan on sticking with any particular resolution to make it compatible with many devices with various screen ratios too, so Im just gonna make it responsive.

Editor layout will be totally overhauled.  Not sure I really like the idea of separate windows for Tile Selection.  I have a feeling where I will end up focusing a lot of my efforts is on the Game input once I start working on that.  Im not very far into this, like maybe two weeks (with constant interruptions, power outages, etc), and not really sure what exactly I want to do with it yet.

Scrolling the canvas was a total pain in the ass.  I had to write some pure custom scrollbars.  So now the buffer canvases are also a lot smaller which has helped performance.  I also plan on performing even better since currently it draws every tile to the buffers every frame which is a huge cost on performance and waste.

That was probably causing a lot of lag and I would guess where the suggestion for Interpolation came from.  Still, I think Interpolation is an outstanding idea, and gonna add that to the TO DO list also!

I guess mostly I felt like doing this just to see IF it could be done, and I am very very curious now once I start saving data and running this all in a game engine (this is just the Editor), how well that game will perform!  Its a big giant test!  Also, it isnt necessarily limited to RPG Maker, so I guess it could also be tweaked to be a Platformer?  Or as a Plugin or something?

Im not 100% sure what I want to do with this yet, but it seems like it is kind of neat!  I mean how many Editors are there that are either total garbage, or way over commercialized that is over the head average person who just likes to fiddle around with stuff?

If I went the RPG route, of course it would either use fully legally authorized stuff licensed by owners, not just Enterbrain, but its not really that difficult to allow people to upload their own tilesets, assets, and audo, so what if it was RPG Maker XP but fully online where people didnt have to download and install even so much as the Resource Kit?  Maybe even allow for people to write their own scripts?  I know a lot of security stuff would have to be checked on that...

Kind of thinking out loud I guess...  Do you think that would hold peoples interest?  Send a link from a game they made in later versions of this to their friends?

I was able to download it and it was immensely helpful!  Thank you!  Seriously, I would not have been able to implement Autotiles without that Document!

The link I posted above is basically a PURE Javascript version of the RMXP Editor in a Webpage using Canvas, so there is nothing you have to download and install, click the link and edit away!  If you want to see if your documentation helped...  Its a Work In Progress, so lot of stuff is gonna change as this is a VERY early version of the Editor, so there is some garbage on there I will get rid of later that wont be in later versions.

If you do take the time to look for a minute or two (all its worth at this moment), what are your thoughts so far?

I came across this thread:
https://forum.chaos-project.com/index.php/topic,12618.msg172028.html#msg172028

Here's our C++ code for that.

I have defined the ID arrays somewhere on top first.

static int _autotiles[6][8][4] = {
	{{27, 28, 33, 34}, { 5, 28, 33, 34}, {27,  6, 33, 34}, { 5,  6, 33, 34},
	 {27, 28, 33, 12}, { 5, 28, 33, 12}, {27,  6, 33, 12}, { 5,  6, 33, 12}},
	{{27, 28, 11, 34}, { 5, 28, 11, 34}, {27,  6, 11, 34}, { 5,  6, 11, 34},
	 {27, 28, 11, 12}, { 5, 28, 11, 12}, {27,  6, 11, 12}, { 5,  6, 11, 12}},
	{{25, 26, 31, 32}, {25,  6, 31, 32}, {25, 26, 31, 12}, {25,  6, 31, 12},
	 {15, 16, 21, 22}, {15, 16, 21, 12}, {15, 16, 11, 22}, {15, 16, 11, 12}},
	{{29, 30, 35, 36}, {29, 30, 11, 36}, { 5, 30, 35, 36}, { 5, 30, 11, 36},
	 {39, 40, 45, 46}, { 5, 40, 45, 46}, {39,  6, 45, 46}, { 5,  6, 45, 46}},
	{{25, 30, 31, 36}, {15, 16, 45, 46}, {13, 14, 19, 20}, {13, 14, 19, 12},
	 {17, 18, 23, 24}, {17, 18, 11, 24}, {41, 42, 47, 48}, { 5, 42, 47, 48}},
	{{37, 38, 43, 44}, {37,  6, 43, 44}, {13, 18, 19, 24}, {13, 14, 43, 44},
	 {37, 42, 43, 48}, {17, 18, 47, 48}, {13, 18, 43, 48}, { 1,  2,  7,  8}}
};

And this is how they are used:

// y, x and j are simply ints, iterated from 0 to 6, 8 and 4 respectively
int position = _autotiles[y][x][j] - 1;
int tx = x * 32 + j % 2 * 16;
int ty = y * 32 + j / 2 * 16;
int sx = position % 6 * 16;
int sy = position / 6 * 16;
generated->bltOver(tx, ty, autotile, sx, sy, 16, 16);
if (animated)
{
	generated->bltOver(tx, ty + 192, autotile, sx + 96, sy, 16, 16);
	generated->bltOver(tx, ty + 384, autotile, sx + 192, sy, 16, 16);
	generated->bltOver(tx, ty + 576, autotile, sx + 288, sy, 16, 16);
}

Bitmap::bltOver simply overwrites the already existing pixels, nothing special. "autotile" is a the actual bitmap loaded from the file (the one that is 96x128 pixels) and "generated" is the bitmap that is put together for rendering. It looks the same like the generated bitmap that you can view in the RMXP editor when you open an autotile in a tileset setting.

So, I am not sure if this helps me at all.  What I am wondering is what the correlation between the surrounding 8 tiles, and how they are factored in for position determination?  Basically, is there a formulaic way to calculate which autotile should be selected from the generated tilemap?

https://www.webucate.me/canvas/editor.html

Click the "Toggle Tiles" button, then same as RMXP, if you Double Click on the Autotile Row, another window will open showing the generated map.  And yes my code looks absolutely awful right now.  Focused on functionality first...

Hmm, odd, but that did seem to fix it.

I guess when I changed the width and height, it also resets the imageSmoothingEnabled property?

It drives me crazy when I keep having to put things down for months at a time and try to pick it back up again later and forget everything I had in my head while working on it...

Active page that is a Work In Progress where I am having my issue:
http://www.webucate.me/canvas/canvas.html

Now that I have a bit of time to play around with this again.  I am sure if you look you can pretty easily figure out what I am doing here.

Issues are related to the Scale.  When I set the Scale to 2:1 (or 200%) I am ending up with VERTICAL SEAMS between my Tiles.

What do I need to do to get rid of that SEAM when zoomed in?

All Javascript so you can simply Right Click and View Source.  I did split off the Scrollbars class in a separate file, but that seems to work ten shades of great (*proud*).

Im sure the bug is in function drawLayersToCanvas(), just confused because I am not using Floats and my coordinates are whole numbers...

Suggestions?

Ok, next question:

I have a javascript Class.  I would like the constructor to call a method to load graphics that finishes setting up once the graphics load.  I am trying to pass a callback function so I can resule the image loader.  I can not get the callback function to work at all, as a defined function, as an anonymous function, or with lambda.

Suggestions?

class Myclass {
  constructor(myCanvas){
    this.canvas = myCanvas;
    this.ctx = this.canvas.getContext('2d');
    this.myImg = this.loadGraphic('images/myimg.png' this.setupBars);
  }
  loadGraphic(filename, callback){
    let img = new Image();
    img.src = filename;
    img.onload = () => this.setupBars();                   // callback arg ignored, This works but can not define the callback
    //img.onload = () => { this.setupBars(); }             // Works same as above, dont need {} characters
    //img.onload = this.setupBars();                       // callback arg ignored, Argument 1 could not be converted to any of Graphics
    //img.onload = callback();                             // callback = setupBars, setupBars is not defined
    //img.onload = callback();                             // callback = this.setupBars, this is undefined
    //img.onload = this.callback();                        // callback = setupBars, setupBars is undefined
    //img.onload = this.callback();                        // callback = this.setupBars, this.callback is not a function
    //img.onload = () => callback();                       // callback = this.setupBars, 'this' is undefined
    //img.onload = () => callback();                       // callback = setupBars, setupBars is not defined
    //img.onload = () => this.callback();                  // callback = setupBars, setupBars is not defined
    //img.onload = (this) => callback();                   // callback = this.setupBars, missing formal parameter
    //img.onload = (this.callback) => callback();          // callback = this.setupBars, missing formal parameter
    //img.onload = (callback) => this.callback();          // callback = this.setupBars, this.callback is not a function
    //img.onload = (callback) => this.callback();          // callback = setupBars, setupBars is not defined
    //img.onload = (this) => callback();                   // callback = setupBars, missing formal parameter
    //img.onload = (callback) => callback();               // callback = setupBars, callback is not a function
    //img.onload = (callback) => callback();               // callback = this.setupBars, callback is not a function
    //img.onload = function(){ this.setupBars() };         // callback arg ignored, 'this.setupBars' is not a function
    //img.onload = function(this){ this.setupBars() };     // callback arg ignored, missing formal parameter
    //img.onload = function(){ callback() };               // 'this' is undefined
    //img.onload = function(callback){ callback() };       // callback = setupBars, setupBars is not defined
    //img.onload = function(callback){ callback() };       // callback = this.setupBars, callback is not a function
    //img.onload = function(this.callback){ callback() };  // callback = setupBars, Scrollbars is not defined
    //img.onload = function(callback){ this.callback() };  // callback = setupBars, setupBars is not defined
    //img.onload = function(callback){ callback() };       // callback = this.setupBars, callback is not a function
    return img;
  }
  setupBars(){
    // does drawing to canvas with loaded graphic
  }

So next question, any suggestions on an efficient flood fill function?

NOTE: if you look at the original post link, it MAY or MAY NOT work as I am playing with it.

Edit.  Playing with it... that came out wrong...

Wow!  That was simpler than I expected!

Thanks as always Blizz!

Hope you all are doing well!

Yes, please ping him...

Here is my function so far...

function setTileDataEllipse(){
  angular.copy(mapTemp, map);

  let startX = mouseDownX;
  let startY = mouseDownY;
  let endX = mouseDownX;
  let endY = mouseDownY;
  
  if (mousePosX === null || mousePosY === null){
    startX = endX = mouseDownX;
    startY = endY = mouseDownY;
  }
  else {
    startX = Math.min(mouseDownX, mousePosX);
    startY = Math.min(mouseDownY, mousePosY);
    endX = Math.max(mouseDownX, mousePosX);
    endY = Math.max(mouseDownY, mousePosY);
  }
  let width = endX - startX;
  let height = endY - startY;
  
  //void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);  

  let offsetX = (mousePosX !== null && mousePosX <= mouseDownX) ? mousePosX - (mouseDownX % tile.width) : 0;
  let offsetY = (mousePosY !== null && mousePosY <= mouseDownY) ? mousePosY - (mouseDownY % tile.height) : 0;
  offsetX = (offsetX < 0) ? offsetX + tile.width : offsetX;
  offsetY = (offsetY < 0) ? offsetY + tile.height : offsetY;

  for (let i = 0; i < height + 1; i++){
    if (typeof(map.data[selectedLayer][startX + i]) == 'undefined' && startX + i <= map.width / 32){ map.data[selectedLayer][startX + i] = []; }
    for (let j = 0; j < width + 1; j++){
      if (startX + j >= map.width / 32 || i + startY >= map.height / 32){ continue; }
      // if (do thing here to see if tile is in an ellipse){
        map.data[selectedLayer][startX + j][startY + i] = tile.ids[(i + offsetY) % tile.height][(j + offsetX) % tile.width];
      //}
    }
  }
  drawLayersToCanvas();
}

Basically, I want to start from whatever corner a user starts drawing at and have the opposite corner be the users current mouse position.  If a tile is inside the ellipse, change the tile, if not, go to the next tile.  Basically just like the RMXP Editor with Ellipses.

Hopefully easy?  The math is over my head and havent had much time... Grandkid...  Im sure you understand the limited time, and my absence for the last few years...

Color me stumped.

Im playing around with Canvas in HTML.  Basically a knockoff of RMXP Tile Editor.

(Removed)

The trouble I am having is with the BOX Draw Mode.  When I draw the box, I cant quite finger out how to get the drawn map to repeat tiles correctly, although it DOES repeat tiles.

- Click teh "Toggle Tiles" button.  New window should appear.  Once the Tilemap loads, the "Loading" msg should go away.
- Select SEVERAL TILES to map as a Pattern in the "Tile Paints" window
- Click the "BOX" button.
- Click and DRAG the mouse on the map to draw.
- When drawing with either a -X or -Y vale from where you first clicked, the tiles do not repeat like they do in RMXP.

In my source code (just right click and view source) look at line 297 please.

I will only leave this alone for so long so dont be too surprised if this page gets changed soon.

Any help would be appreciated.

Yes, I am still around but only barely...

---

Edit: Nevermind.  I think I got it.

Next question, how to do a Circle / Oval?  Also a bit stumped there...  I had to put this ALL down for a couple years so I am supremely rusty...

https://www.bluesnews.com/s/211939/rpg-maker-mz-this-summer

RPG Maker MZ is a new installment in the RPG Maker series to be released on Steam for Windows and macOS this summer. This will allow you to get in touch with your inner Lord British to create an old-school role-playing game. Word is: "Including all new features, and some fan favorite returning features, RPG Maker MZ will make RPG Making faster and easier than ever before. But making it easier wasn't our only aim, this RPG Maker aims to be the most powerful for experienced developers as well." Here's more from the description, including a bit that humorously describes how their collection of premade assets can be used "to create a game that's absolutely full of originality":

A Tool Designed to Make Games

RPG Maker is known in Japan as "RPG Tsukūru." "Tsukūru" is a coined term that, in a literal sense, combines the Japanese words for "make" and "tool." This signifies that RPG Maker is a tool that is designed to make games. Within RPG Maker, we have already programmed the basic operations that support RPGs. You can make games easily by just combining settings for game components that are comprised of the main character's parameters and enemies' movements.

Create an Original Game with Ease!

As samples, we have prepared a wealth of resources comprised of drawings and music that are needed to make games. All you need to focus on is giving shape to your own ideas. On top of that, for anyone looking for something beyond the samples already provided, we have set aside a vast collection of additional downloadable content intended for the RPG Maker series.
By using these assets in combination, you can create a game that's absolutely full of originality.

Definitely worth clicking [LV++] for this!

The listen_range should be higher than range, and lower than on_range.  If you use the Lighting aspects, then also make sure that light_range is not higher than on_range also.  Listen_range can be tested by putting a Wall between your Sensor and the Player.  Remember, listen_range is a State, which means it can be its own Page.  Remember that also when testing as it throws people for a loop. 

Understanding that Range and Listen Range are NOT simultaneously active is a major key to understanding how Sensors work.

[FREE THIS WEEK]

https://store.steampowered.com/app/837510/Pixel_Game_Maker_MV__MV/

The link, at the time of this post, is Early Access, but, the upside it is FREE THIS WEEK!

Yes, it is used.  If a sensor is triggered by movement but unable to make line of sight, it can be used to create a move route to "investigate" the source of the sound with pathfinding, making the behavior of the event seem more realistic.  Such as make a sound here, while the guard investigates, then slip by to the door for example.  Even the Invis state should trigger the Listen Page if Line Of Sight cant be made.

Guard on the right is using the light_range=6 which overrides range=4.  The listen_range is NEVER used in that case.  The way I set up the Light / Dark features were alternatives to the default range.  The listen_range is not used until a sensor has been triggered by sound but unable to make Line Of Sight (with the wall / listen_wall / on_wall options).  This is also because the Player in your demo has his Light turned on.  Turn it off with a script: $game_player.light.enabled = false (keep in mind command_355 bug), and then the player will not be in Light, which will reduce that senors effective range.  Think of it this way, on a ship in the dead of night with no moon, you can literally see a LIGHTER from 20 miles away.  Light makes you stand out in darkness like a sore thumb.

So, in other words, listen_range must be equal or less than whatever view range is active right now?

Yes.  Listen Range is not intended for use as the highest state of awareness.  I could have called it level1 level2 level3 and that may have made more sense.  Listen Range would effectively be Level 2.

Think range=5 listen_range=6 on_range=7.  That means a guard cant "hear" you from 5 tiles away, it does mean that while in a listen state, the guard can see / hear you from 5 tiles away, but ONLY when that state is active.  Once they have "seen" you, then the ON state is used, so the sensor can see you from 6 tiles away.

Yes, each form of stealth reduces the guards ability to detect you.  the listen_range doesnt change as its a State, and is ONLY active if a guard has heard you but has been unable to see you.  The multiple states for stealth (invis, quiet, stealth) are incremental which encourages players to upgrade equipment as they progress thru your game.  Stealth gear has the same effect as consumable potions, but since the effect is permanent, it needs to be set to balance out gameplay, making it less difficult but not impossible to avoid detection.

Of course, sensors can be used even for conversations too.  Hopefully that clears up some confusion.

https://mega.nz/#!EBdjVQyQ!LqF3_A3EhhPd85i39T7MAJdTenepDegn_T_TjVBZLa0

Here is the updated demo, with the new 1.12 SES script. I also added a few commentary NPC for your convenience.

Ok, I dug a little deeper, and had to go back and reread my own documentation.

Guard on the right that can sense you on the sand.  Config gave him a range=4, but, also gave him a light_range=6.  Since the Player had a Lightsource, the light_range was used instead of range.

Center guard, the one that cant hear you if you are invisible.  This is the confusing part.  The Listen Range applies more to the PAGE than the Distance.  The Listen Range actually applies to how far they will "sense", which is not the distance.  Thus, it applies to both Sight and Sound.  Since Invis sets the distance for the Default state to 2, then 2 becomes the Distance.  The Listen Range is the SIGHT RANGE once the Guard had Heard but NOT SEEN you, thus, you have to be within the Invis Distance to get Sound to Trigger the guard to the LISTEN Page.  Really confusing I know, I had to go back and reread it myself.

You had it right tho.  Basically something like this

range=4
listen_range=5  (remember, that is now how far the guard can "see" you)
on_range=6
light_range=6 (overrides default state at night, not the Listen state, ONLY WHEN LIT)
dark_range=3(also overrides default at night, ONLY WHEN NOT LIT)

Suggest adding these:

invis_range=3 
quiet_range=2
stealth_range=1

Hopefully that makes more sense now.  I didnt set up different ranges for sight and sound, just different ways of triggering different states. 

For example, default state of 4, but youre right next to the guard, in range, and the View keeps him from seeing you.  If you dont move, he wont hear you.  If youre on the other side of a wall, thats when the Listen Range kicks in, and he has farther SIGHT.  Once the guard has SEEN you, then you can do other stuff like Ignore Walls, highest state of alert, and gonna come after you! 

https://mega.nz/#!EBdjVQyQ!LqF3_A3EhhPd85i39T7MAJdTenepDegn_T_TjVBZLa0

Here is the updated demo, with the new 1.12 SES script. I also added a few commentary NPC for your convenience.

Ok, I took a look.

Since multiple issues were addressed, I'll tell you what I found:
Two guards at the bottom, that appears to work as designed.  Left guard is light sensitive, and has a Light Range of 6, so he can see the player on the highlighed spot.  The Right guard isnt light sensitive, so it only uses the normal Range, which is set to 4, so its out of range.  That appears to be correct.

The sound stuff, I may have to look deeper into this.  I think I popped the sight range in for sound range, possible bug.  Also, remember there are three settings to Stealth:  Sight, Sound, and Both.  Labels for those respectively are Invisible, Quiet, and Stealth, where Stealth is both Sight and Sound.  Putting on a Sight limiting potion would not affect distace player can be heard at.  The spot on the map where you indicated the guard should not be able to hear you, it does appear youre correct, again,  I think the sight range got plugged for sound, but I want to test this more thoroughly as it may need me to fix that.

---

Thanks for your awesome scripts Heretic. They save me a lot of time.
Btw, I'm having some problems with the Restrict Passage scripts, I got no bug message but just some features work and the others won't work at all.

Can you be more specific?  There are some Tools I put in so you can check Passability of tiles for Events on the fly, and great for debugging.  If you run a script on an event from a spot that is giving you trouble, put in "Script: rtp_tile_info" which will tell you if that location is passable to that event, and on what Layer it conflicts.  Other than that, what other issues is it giving you?