[Guide] Adding hp, prayer, run orbs (225 based)

Development Client
1

Hitpoints, prayer and run orbs (Visual stats)

This guide isn’t a tutorial on why something is added or changed.
In short: we are changing mapback and backvmid1 sprites and adding player stats as info over them.
Orbs added aren’t functional, only visual stats of the player (you can’t run by clicking on the run orb)

This guide assumes you have unminified client.js
If not already, run bun run bundle dev in webclient
Copy out/client.js to engine/public/client.js

Sprites (ZIP): 9.6 KB file on MEGA

PART 1: Change sprites

Open content/sprites
Change backvmid1 and mapback to new ones.
Names must match and old ones deleted (I recommend to store them on desktop just incase)

Open meta folder in the same folder
Change backvmid1.pal and mapback.pal to new ones
Again, match names and delete old (or store outside of server folder)

PART 2: Add code to engine/public/client/client.js

ctrl+f if (this.flashingTab !== -1) {
Above that, where sceneState === 2, change to:

if (this.sceneState === 2) {
      this.drawMinimap();
      this.drawHpOrbNumber()
      this.areaBackvmid1?.draw(520, 11);
      this.areaMapback?.draw(561, 5);
    }

ctrl+f drawMinimap() {
above that, make new methods:

  drawBackvmid1Again() {
    this.areaBackvmid1.clear()
    this.areaBackvmid1?.bind();
    this.imageBackvmid1?.draw(0, 0);
    this.areaViewport?.bind();
  }
  drawHpOrbNumber() {
    this.drawBackvmid1Again()
    this.areaBackvmid1?.bind();
    const currentPrayer = this.getIntString(this.executeClientscript1(Component.instances[4012], 0));
    const currentHp = this.getIntString(this.executeClientscript1(Component.instances[4016], 0));
    this.fontPlain11?.drawStringTaggableCenter(18, 59, currentHp, 0xFFFFFF, true);
    this.fontPlain11?.drawStringTaggableCenter(18, 96, currentPrayer, 0xFFFFFF, true);
    this.fontPlain11?.drawStringTaggableCenter(28, 133, String(this.energy), 0xFFFFFF, true);
    this.areaViewport?.bind();
  }

ctrl+f const backvmid2 = Pix24.fromArchive(media, "backvmid2", 0);
above that, change backvmid1 lines to:

      this.imageBackvmid1 = Pix24.fromArchive(media, "backvmid1", 0);
      this.areaBackvmid1 = new PixMap(this.imageBackvmid1.width2d, this.imageBackvmid1.height2d);
      this.imageBackvmid1.blitOpaque(0, 0);

ctrl+f imageMapback = null;
under that add new line:
imageBackvmid1 = null

Clean, build and run server
Orbs should now be there.

Common Issue:
If you see an error instead of a title screen when opening the site, your sprites are messed up.
Retry PART 1 and if problems persist, feel free to leave a comment or ask in Discord.

Good luck with developing and happy scaping!

4 Likes
2

It’s not bad overall. I would make some changes though if you care:

  1. Prefer to use ’ instead of " for strings in this language.
  2. I’m not a big fan of hardcoding Component.instances[4012]. I would instead use skillBaseLevel[skill] in Client class. The ordering of stats never changes between 2004-2025.
3

I love your guides so when I eventually (I totally will, someday) make a custom RSPS I will have a starting point to follow as a guide :smile: