Creating an encounter gauge on the map (not the battle sequence)

[vampyyri]

I am trying to put a rectangle on my map screen, sort of like if there was a HUD there. Is there an example or tutorial on how to draw to the map screen?

 

[izyees]

this will create a window gold at (0,0) position.

Spoiler

Scene_Map.prototype.createDisplayObjects = function() { this.createSpriteset(); this.createMapNameWindow(); this.createWindowLayer(); this.createAllWindows(); this.createSampleWindow();};Scene_Map.prototype.createSampleWindow = function() { this._sampleWindow = new Window_Gold(0,0); this.addChild(this._sampleWindow);};

 
this will add a loading picture from system folder.

Spoiler

Scene_Map.prototype.createDisplayObjects = function() {    this.createSpriteset();    this.createMapNameWindow();    this.createWindowLayer();    this.createAllWindows();	this.createSampleWindow();};Scene_Map.prototype.createSampleWindow = function() {	this.bitmap = new Sprite(ImageManager.loadSystem('loading'))    this.addChild(this.bitmap);};

This is how to draw gauge with text and limit.

Spoiler

Scene_Map.prototype.createDisplayObjects = function() {    this.createSpriteset();    this.createMapNameWindow();    this.createWindowLayer();    this.createAllWindows();	this.createSampleWindow();};Scene_Map.prototype.createSampleWindow = function() {	this._sampleWindow = new Window_SampleGauge();    this.addChild(this._sampleWindow);};Window_Base.prototype.drawSampleGauge = function(percent, max, x, y, width) {    width = width || percent;    var color1 = this.hpGaugeColor1();    var color2 = this.hpGaugeColor2();	var color3 = this.normalColor();	 this.drawGauge(x, y, width, 0, color3, color3);    this.drawGauge(x, y, ((percent/max) * width), 50, color1, color2);    this.changeTextColor(this.systemColor());    this.drawText('Test', x, y, 44);	this.drawCurrentAndMax(percent, max, x, y, width,		color1, color2);};//-----------------------------------------------------------------------------// Window_SampleGauge//// The window for displaying the party's gold.function Window_SampleGauge() {    this.initialize.apply(this, arguments);}Window_SampleGauge.prototype = Object.create(Window_Base.prototype);Window_SampleGauge.prototype.constructor = Window_SampleGauge;Window_SampleGauge.prototype.initialize = function(x, y) {    var width = this.windowWidth();    var height = this.windowHeight();    Window_Base.prototype.initialize.call(this, x, y, width, height);    this.refresh();};Window_SampleGauge.prototype.windowWidth = function() {    return 240;};Window_SampleGauge.prototype.windowHeight = function() {    return this.fittingHeight(1);};Window_SampleGauge.prototype.refresh = function() {    var x = this.textPadding();    var width = this.contents.width - this.textPadding() * 2;    this.contents.clear();    this.drawSampleGauge(75,500,0,0,width);};Window_SampleGauge.prototype.open = function() {    this.refresh();    Window_Base.prototype.open.call(this);}; 

 

[vampyyri]

Is there a way to track steps?

 

[izyees]

Try this

Spoiler

Scene_Map.prototype.createDisplayObjects = function () {	this.createSpriteset();	this.createMapNameWindow();	this.createWindowLayer();	this.createAllWindows();	this.createSampleWindow();};var is_refresh = false;var gauge_value = 47;var gauge_max = 47;var wait_count = 60;var isGauge_empty = false;Game_Player.prototype.moveStraight = function (d) {	if (this.canPass(this.x, this.y, d)) {		this._followers.updateMove();		console.log('move!');		is_refresh = true;	}	Game_Character.prototype.moveStraight.call(this, d);};var alias_map = Scene_Map.prototype.update;Scene_Map.prototype.update = function () {	alias_map.apply(this);	if (is_refresh) {		if (gauge_value < 1) {			isGauge_empty = true;		} else {			gauge_value -= 1;		}		this._sampleWindow.refresh(gauge_value, gauge_max);		is_refresh = false;		wait_count = 60;	} else {		if (wait_count < 1) {			if ((gauge_value > (gauge_max - 1)) == false) {				gauge_value += 1;			}			isGauge_empty = false;			this._sampleWindow.refresh(gauge_value, gauge_max);			wait_count = 60;		} else {			wait_count -= 1;		}	};}Scene_Map.prototype.createSampleWindow = function () {	this._sampleWindow = new Window_SampleGauge(gauge_value, gauge_max);	this.addChild(this._sampleWindow);};Window_Base.prototype.drawCurrentAndMaxPercent = function (current, max, x, y,	width, color1, color2, isWantParams, maxParams, minParams) {	var labelWidth = this.textWidth('HP');	var valueWidth = this.textWidth('0000');	var slashWidth = this.textWidth('/');	var x1 = x + width - valueWidth;	var x2 = x1 - slashWidth;	var x3 = x2 - valueWidth;	if (x3 >= x + labelWidth) {		this.changeTextColor(color1);		this._izy453 = Number((current / max) * 100);		this._izy453 = this._izy453.toFixed(0);		if (isWantParams) {			if (this._izy453 == 100) {				this.drawText(maxParams, x1, y, valueWidth, 'right');			} else if (this._izy453 == 0) {				this.drawText(minParams, x1, y, valueWidth, 'right');			} else {				this.drawText(this._izy453 + '%', x1, y, valueWidth, 'right');			}		} else {			this.drawText(this._izy453 + '%', x1, y, valueWidth, 'right');		}	} else {		this.changeTextColor(color1);		this._izy453 = Number((current / max) * 100);		this._izy453 = this._izy453.toFixed(0);		if (isWantParams) {			if (this._izy453 == 100) {				this.drawText(maxParams, x1, y, valueWidth, 'right');			} else if (this._izy453 == 0) {				this.drawText(minParams, x1, y, valueWidth, 'right');			} else {				this.drawText(this._izy453 + '%', x1, y, valueWidth, 'right');			}		} else {			this.drawText(this._izy453 + '%', x1, y, valueWidth, 'right');		};	}};Window_Base.prototype.drawSampleGauge = function (percent, max, x, y, width) {	width = width || percent;	var color1 = this.hpGaugeColor1();	var color2 = this.hpGaugeColor2();	var color3 = this.normalColor();	this.drawGauge(x, y, width, 0, color3, color3);	this.drawGauge(x, y, ((percent / max) * width), 50, color1, color2);	this.changeTextColor(this.systemColor());	this.drawText('Walk', x, y, 44);	this.drawCurrentAndMaxPercent(percent, max, x, y, width,		color1, color2,true,'Max','Empty');};Window_Base.prototype.drawSampleGauge2 = function (percent, max, x, y, width) {	width = width || percent;	var color1 = this.hpGaugeColor1();	var color2 = this.hpGaugeColor2();	var color3 = this.normalColor();	this.drawHudGauge(70, 100, 0, 0, width, 6)	// this.drawGauge(x, y, width, 0, color3, color3);	this.drawGauge(x, y, ((percent / max) * width), 50, color1, color2);	this.changeTextColor(this.systemColor());	this.drawText('Test', x, y, 44);	this.drawCurrentAndMax(percent, max, x, y, width,		color1, color2);};//-----------------------------------------------------------------------------// Window_SampleGauge//// The window for displaying the party's gold.function Window_SampleGauge() {	this.initialize.apply(this, arguments);}Window_SampleGauge.prototype = Object.create(Window_Base.prototype);Window_SampleGauge.prototype.constructor = Window_SampleGauge;Window_SampleGauge.prototype.initialize = function (percent, max, x, y) {	var width = this.windowWidth();	var height = this.windowHeight();	Window_Base.prototype.initialize.call(this, x, y, width, height);	this.refresh(percent, max);};Window_SampleGauge.prototype.windowWidth = function () {	return 240;};Window_SampleGauge.prototype.windowHeight = function () {	return this.fittingHeight(1);};Window_SampleGauge.prototype.refresh = function (percent, max) {	var x = this.textPadding();	var width = this.contents.width - this.textPadding() * 2;	this.contents.clear();	this.drawSampleGauge(percent, max, 0, 0, width);};Window_SampleGauge.prototype.open = function () {	this.refresh();	Window_Base.prototype.open.call(this);};