Manipulating bitmaps

Discussion in 'Javascript/Plugin Support' started by Arisilde, Jul 10, 2019.

  1. Arisilde

    Arisilde Villager Member

    Messages:
    24
    Likes Received:
    6
    First Language:
    English
    Primarily Uses:
    RMMV
    So I'm digging through the code for creating that flashing cursor square when you mouse click to move somewhere. It's got a line:
    this.opacity = (20 - this._frameCount) * 3;
    This is what makes that cursor flash. I'd like to use this same idea for something, but instead change color instead of opacity. The .opacity property I assume is inherent to js? I tried searching the web but can't find any results, but are there other inherent properties for the color of a bitmap? Specifically I'm looking for "value" or how black or white it is. Anyone know if there's something for that for manipulating drawn bitmaps?

    Here's an example of what i'm trying to do:

    Trying to make flashing ground tiles similar to Shining Force 1-2. They don't flash with opacity, they actually cycle between white and black. So I was hoping to have a single value I could just plug into this, or write a sin wave type formula to do the same thing. Having to code something to gradate between 2 colors seems like overkill.
     
    Last edited: Jul 10, 2019
    #1
  2. standardplayer

    standardplayer Keeper of Kitties Veteran

    Messages:
    203
    Likes Received:
    670
    First Language:
    English
    Primarily Uses:
    N/A
    I know that in PIXI.js, opacity is frequently referred to as 'alpha', and filled shapes call it 'fillAlpha'.
    I don't know if that helps, I've tried a similar thing before, it wasn't hard to get it done with PIXI, but I couldn't figure out how to get it to appear below the characters. It always appeared on top of everything else, and going through SceneManger._scene.children I couldn't quite figure it out.
     
    #2
  3. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,654
    Likes Received:
    9,191
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Code:
    _SceneMapCreate = Scene_Map.prototype.create;
    Scene_Map.prototype.create = function () {
    _SceneMapCreate.call(this);
    this.createPixiRects();
    }
    
    Scene_Map.prototype.createPixiRects = function () {
    this._pixiRects = []; //just in case multiple layouts are necessary
    this._pixiRects[0] = new PIXI.Graphics();
    this._pixiRects[0].beginFill(0xffffff);
    this._pixiRects[0].drawRect(0, 0, 48, 48);
    this._pixiRects[0].drawRect(48, 48, 48, 48);
    this._spriteset.addChildAt(2, this._pixiRects[0]); //may require to change the 2, I'm not sure what layer is the map
    this._pixiRects[0]._blinking = -1;
    }
    
    _sceneMapUpdate = Scene_Map.prototype.update;
    Scene_Map.prototype.update = function () {
    this._pixiRects[0].alpha += 0.1 * this._pixiRects[0]._blinking;
    if (this._pixiRects[0].alpha <= 0 || this._pixiRects[0].alpha >= 1) this._pixiRects[0]._blinking = -this._pixiRects[0]._blinking;
    }
    Maybe this code will help you figure out the solution you intended.
     
    #3
  4. Arisilde

    Arisilde Villager Member

    Messages:
    24
    Likes Received:
    6
    First Language:
    English
    Primarily Uses:
    RMMV
    Thanks for the suggestions, but I'm specifically trying not to use alpha/opacity, and both of these are using alpha/opacity :p I'm looking for either a value/lightness/brightness, or a gradated color swapping.
     
    #4
  5. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,654
    Likes Received:
    9,191
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Tint between "#000000" and "#ffffff".
     
    #5
  6. Arisilde

    Arisilde Villager Member

    Messages:
    24
    Likes Received:
    6
    First Language:
    English
    Primarily Uses:
    RMMV
    Can you give me a code example of that by chance?
     
    #6
  7. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,654
    Likes Received:
    9,191
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Code:
    /*baseColorNum fluctuates between 0 and 256. */
    
    var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
    object.baseColorNum += 2* object.blinking;
    if (object.baseColorNum < 0) {
    object.baseColorNum = 0;
    object.blinking = -object.blinking;
    }else if (object.baseColorNum > 255) {
    object.baseColorNum = 255;
    object.blinking = -object.blinking;
    }
    var curTint = arr[Math.floor(object.baseColorNum / 16)] + arr[object.baseColorNum % 16];
    
    object.tint = "#" + curTint + curTint + curTint;
    Easy peasy :D
     
    Last edited: Jul 12, 2019
    #7
  8. Arisilde

    Arisilde Villager Member

    Messages:
    24
    Likes Received:
    6
    First Language:
    English
    Primarily Uses:
    RMMV
    So this fade cycles between black and white using .tint, or does it cycle through all colors? Sorry I'm pretty new to this and still trying to wrap my head around it all.

    Actually yeah, I don't understand what this is doing. Like the whole var arr array, what is it for? and in the last line what is the # for?
     
    Last edited: Jul 11, 2019
    #8
  9. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,654
    Likes Received:
    9,191
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    In computer tech a white is not a white, it's a mix of 3 colours. Red, blue and green, also known as RGB.
    Each colour can have strength from 0 to 255. However, writing "255255255" was impractical, especially in times of low resources, because a string always takes at least one byte per character. So, we write colours in hexadecimal numbers, because with special notation they can be interpreted as numbers. And thus various notations of colours were born. The most prevalent one was #ffffff, which is the html colour notation and always starts with a #.
    Hexadecimals use numbers, but once they run to 9, they also use letters a-f.
    So a in hexadecimal is 10 in decimal, f in hex is 15 in dec. 16 in hex is 10 in dec.

    Nevertheless, tint, while it uses the same #ffffff notation, it means something else.
    In colour #ffffff means how much red to use, how much green to use and how much blue to use.
    In tint it means how much of red from the current colour to use, how much blue from the current colour to use etc.

    So for example, if you have a #ffffff colour pixel, but only a #ff0102 tint, since 01 is 1/255 of 255 and 02 is 2/255 of 255, it means that every pixel will contain its full red value, 1/255th of its green value (which is either 0 or 1, so practically black) and 2/255 of its green value, which is also practically black. If you have a white pixel, but a #ffff00 tint, since red and green give yellow, every white pixel will be yellow.

    In my example red, green and blue are three identical values, so it means a white pixel is always going to be white in case of #ffffff, black in case of #000000 and some degree of gray in between.
     
    #9
  10. Arisilde

    Arisilde Villager Member

    Messages:
    24
    Likes Received:
    6
    First Language:
    English
    Primarily Uses:
    RMMV
    Yeah I understand hex codes, I meant specifically how your code is working. You are stating an array "arr", but I'm apparently blind because I don't see anywhere you're using data from that array, so I was asking what it's doing. Can you explain that bit?

    I should have understood the # part, but for some reason it didn't click at first, but I see that you're concatenating # with 3 copies of the color code now.
     
    #10
  11. Poryg

    Poryg Pixie of the Emvee kingdom, Ham of a Hamster Veteran

    Messages:
    3,654
    Likes Received:
    9,191
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    My bad. The code is fixed now. What you get when you type it at work xD You use the arr to create the tint based on the current value of baseColorNum.
     
    #11
  12. Arisilde

    Arisilde Villager Member

    Messages:
    24
    Likes Received:
    6
    First Language:
    English
    Primarily Uses:
    RMMV
    Yeah I'm having no luck integrating this into the existing code, heh. I guess I have more to learn first.
     
    #12

Share This Page