Hello all,
So I'm trying to modify the way a part of how the Window works. Right now you have the windowskin that dictates (almost) every graphic element from the interface. What I want to change first is the menu items - I want them to appear as buttons, like a web interface or something like it.
Think about Dissidia Final Fantasy menu:
You have a button background and, when you hover, it changes the color.
TL;DR: I'm modifying the Window so in a item menu, it would look like the screenshot above - a button background and a hover effect. Could you please point me if I'm going the right direction? I'm having a really hard time drawing the background buttons and the hover effect.
So I eliminated the background and frame from window, just replacing their functions with nothing:
Window.prototype._refreshBack = function() {
this._windowBackSprite.bitmap = null;
};
Window.prototype._refreshFrame = function() {
this._windowFrameSprite.bitmap = null;
};
Then modified Window.prototype.updateTransform to include this._updateButtonBackground(), just before this._updateContents().
Window.prototype._updateButtonBackground = function() {
var cursorOpacity = this.contentsOpacity;
this._windowButtonBackground.alpha = cursorOpacity / 255;
this._windowButtonBackground.visible = this.isOpen();
};
Then in Window.prototype._refreshAllParts I included this._refreshBackgroundButton(), (before _refreshCursor()) that goes like this:
Window.prototype._refreshButtonBackground = function() {
var pad = this._padding;
var w = this._width;
var h = this._height;
var buttonImage = ImageManager.loadSystem('ButtonBackground');
var bitmap = new Bitmap(w, h);
bitmap.blt(buttonImage, 0, 0, 300, 47, x, y, w, h);
};
The thing is: it doesn't get drawn. The image simply don't show. I know the bitmap part is right, the image is there (or else ImageManager would throw an error)... if I do bitmap.fillAll('#ff0000') it shows red and in the correct place, but nothing about the image. Am I missing something here?
Thanks for any input!