Show posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.

Messages - Heretic86

1
General Discussion / CSS Question
August 18, 2021, 11:06:02 pm
I need to make a Text Area behave like a DOS prompt

Basically so it wraps and spaces are placed like they are in a DOS / CMD window...

This might display a little better...

2
Quote from: Ssinssrigg on April 19, 2021, 09:01:15 amWow! This is amazing!
What is the license/copyright of that scripts?
Is it not forbidden to modify them and use in any production (including commercial) as long as authors will be included in credits? Or I should feel free to do so as long as I credit everyone :D

License is decided by the original or current Rights Holder.  In case of my scripts in this pack, FREE FOR COMMERCIAL USE so long as you give me credit!

There is a ton of other stuff in the collection that come from other people too, KK20, Blizzard, etc.  Enterbrain obviously has the license for all of their content, but just so you know, much of the graphics content does not come from me.  To the best of my knowledge, the additional graphics and audio assets are covered by the Rights they granted, and I believe they were all also free.  None the less, I would still give all those people proper credits too so dont forget about them!

Oh, you can modify the scripts if you need to...
3
Hopefully this is an "easy" one.

I have a page that creates an Instance of a Class.  Then the Class Instance is sent to another page using page.postMessage();  When I receive the data on the other page, and I check the received data to see if the object is an Instance of the Class, it always fails, presumably because I am missing a step.

Properties Page:
class MyClass {
  constructor(name, value){
    this.name = name;
    this.value = value;
  }
}
const foo = new MyClass("bob", 123);
window.postMessage( { myMsg : foo });
function messageListener(msg){
  console.log(msg.data.myMsg instanceof MyClass); // Always returns false
}

I left a lot of code out of the examples but basically using Modules so the same class constructor is available on both pages.

I would like to be able to check the data on the receiving page to see if the object is an instance of the class.

What am I doing wrong?  Most importantly, how can I check on the receiving page to see if the received data is an instance of the class?
4
I put together a simple page that can play back an audio file, and changes pitch by adjusting playbackRate.  Then just to get into the deeper parts of Web Audio API, I saw there was a way to create a visual output of tones in a canvas element.

After I put in the graph canvas tho, I am no longer able to adjust the pitch of an audio file by changing the playback rate, and just in Firefox, but oddly it still works in Chrome.

...
        audio.preservesPitch = false;
        audio.mozPreservesPitch = false;
        audio.webkitPreservesPitch = false;
...

    function graphAnimator(){
      requestAnimationFrame(graphAnimator);
      let fbc_array = new Uint8Array(analyzer.frequencyBinCount);
      analyzer.getByteFrequencyData(fbc_array);
      ctx.clearRect(0, 0, graph.width, graph.height);
      ctx.fillStyle = "#00FFAA";
      for (let i = 0; i < 100; i++){
        let x = i * 3;
        let h = -(fbc_array[i * 8] / 12);
        ctx.fillRect(x, 20, 2, h);
      }
    }
   
    function setupGraph(){
      graph.width = 222;
      graph.height = 20;
      ctx = graph.getContext('2d');
      aCtx = new window.AudioContext();
      analyzer = aCtx.createAnalyser();
      audio_source = aCtx.createMediaElementSource(audio);
      audio_source.connect(analyzer);
      analyzer.connect(aCtx.destination);
      graphAnimator();
    }

Is there a better way to change the pitch of audio?  Honestly, one of the things I did like a bit better about old ass RMXP was its use of MIDI files did not change the playback rate and only changed the tones, but so far, I cant find any reliable ways to play MIDI files, which might be a better solution?  Not sure, and only recently noticed too (or maybe forgotten) that changing Pitch on MP3 / Ogg files does adjust playback rate , lol!

What am I doing wrong that the pitch no longer changes in Firefox but does in Chrome?
5
Thank you!
6
So playing around with some stuff, and I came across this:

module RPG
  class Troop
    def initialize
      @id = 0
      @name = ""
      @members = []
      @pages = [RPG::BattleEventPage.new]
    end
    attr_accessor :id
    attr_accessor :name
    attr_accessor :members
    attr_accessor :pages
  end
end

Trouble is that there is nothing in the documentation for the structure of the RPG::BattleEventPage.new

Whats up with that?
7
General Discussion / Is This Any Good?
March 29, 2021, 09:01:50 pm
https://www.webucate.me/canvas/editor.php

It might look a little familiar... it should!  This is a VERY early version, but what do you guys think so far?

I took the advice a couple very generous folks gave me and worked the Autotiles as best as I could, which as far as I can tell, works PERFECT, even with features that XP didnt have, like the ability to disable affecting Neighbor Autotiles.  Even the "B" tiles work!

- Hold Spacebar and Drag Mouse to Pan the Map
- Mousewheel Up and Down to Zoom In and Out
- Mouse Over a Button for additional information on Modifiers and what else you can do.

Mostly going for User Friendly Interface.  I feel like these were features RPG Maker XP SHOULD have had by default, and last time I used other versions, think they still lack...  The buttons are ALL gonna change positions so its more User Friendly.
8
General Discussion / Hack My Webpage!
March 09, 2021, 05:24:07 am
I am experimenting with a bunch of stuff I am brand new to, so I EXPECT there are gonna be issues...

Other sites I posted on, the messages I got back so far are a bunch of preachers "do not allow users to run their own scripts, ever".  Well, I am not gonna listen to them.  Hasnt been many replies tho, so still waiting for better responses.  Really they just sound very lazy.

Please dont do damage to my server, just the webpage...

What I want to do is to allow Users to UPLOAD THEIR OWN SCRIPTS to an IFRAME to allow them FULL CONTROL of a Canvas Object.  But, it needs to be done so SAFELY.  What I think makes this at least somewhat more secure is not just the code you can see, but a combination of headers and some CORS stuff as well, which you can also see, its just under the response headers.  Sandboxed in.

The GOAL here is for you to BREAK OUT OF THE IFRAME in Javascript and access the rest of the Page.  I set this up to be as easy to hack as possible.  I made it a FORM so you can post ANY JAVASCRIPT YOU WANT in the text field and execute it.  Why?  Because that is what I want ALL USERS to be able to do.  However, the scripts they create need to be completely confined within some sort of sandbox environment that does not put anyone who views their content at risk.  So try things like window.location, window.open, parent.caller, let img = new Image; img.src = 'someurl.jpg',

http://www.webucate.me/iframe/

Please let me know if this works or does not work as I hope it will...

If you can get out of the iframe in javascript and somehow access "hack target" then I will have to dig deeper in how to do this, please let me know how you did and what I need to do to fix.  Basically in theory everything is blacklisted, then opened up some stuff that hopefully is fully contained within the web page.  I need to set up quite a few other things to make this work as I hope, and could use some assistance from people I know and trust...  Im having some issues getting Reporting to work, so need to focus on that if anyone gets a spot of time...

Thanks a ton guys!
9
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.
10
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?
11
General Discussion / Re: Autotiles in Canvas
February 17, 2021, 04:21:20 am
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?
12
General Discussion / Re: Autotiles in Canvas
February 16, 2021, 11:56:37 pm
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?
13
General Discussion / Autotiles in Canvas
February 16, 2021, 05:36:06 am
I came across this thread:
https://forum.chaos-project.com/index.php/topic,12618.msg172028.html#msg172028

Quote from: Blizzard on December 02, 2012, 11:15:38 amHere'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...
14
Hmm, odd, but that did seem to fix it.

I guess when I changed the width and height, it also resets the imageSmoothingEnabled property?
15
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?
16
General Discussion / Re: HTML Canvas - Repeat a Tile
January 02, 2021, 12:49:45 pm
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
  }
17
General Discussion / Re: HTML Canvas - Repeat a Tile
December 18, 2020, 12:16:19 am
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...
18
General Discussion / Re: HTML Canvas - Repeat a Tile
November 23, 2020, 02:55:23 pm
Wow!  That was simpler than I expected!

Thanks as always Blizz!

Hope you all are doing well!
19
General Discussion / Re: HTML Canvas - Repeat a Tile
November 22, 2020, 08:51:52 pm
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...

20
General Discussion / HTML Canvas - Tilemap Creator
November 22, 2020, 05:06:57 am
Color me stumped.

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

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

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...