Indie Dev

Hello Guest!. Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, sell your games, upload content, as well as connect with other members through your own private inbox!

Drawing Bitmaps

Chaucer

Towns Guard
Xy$
0.00
Oi~ I'm trying to draw a bitmap on my screen, however everytime I try to draw one, it seems to do nothing,
I've looked at the way Sprites & bitmaps are used in other scenes, however I can't seem to make one myself, I'm trying to draw a bitmap to the map also, not sure if that matters, I know in previous rpg makers it changed the way it was drawn here's an example of what I've tried anyways.

JavaScript:
Scene_Map.example = new Sprite();
Scene_Map.example.bitmap = new Bitmap(48,48)
Scene_Map.example.bitmap.fillRect(0,0,48,48,'white')
//also tried this
Scene_Map.example.bitmap.fillAll('white')
Scene_Map.addchild(Scene_Map.example)
not sure if I'm missing a step or what, any help is greatly appreciated~
 

Boy Who Codes

Praised Adventurer
Xy$
0.00
This is a bad practice and totally wrong. If you want to draw a bitmap, you have to create the bitmap first via the Bitmap Class.

Code:
Weather.prototype._createBitmaps = function() {
    this._rainBitmap = new Bitmap(1, 60);
    this._rainBitmap.fillAll('white');
    this._stormBitmap = new Bitmap(2, 100);
    this._stormBitmap.fillAll('white');
    this._snowBitmap = new Bitmap(9, 9);
    this._snowBitmap.drawCircle(4, 4, 4, 'white');
};
Look at this code from the Weather class.

First, this line:
Code:
this._rainBitmap = new Bitmap(1, 60);
creates an instance variable that you instated that it is a new bitmap.
Then, on the other lines, you said you want to fill the bitmap with white.
That goes for the storm and snow bitmap.

Also, add the ; on your codes, that is very fatal, and may give you errors in your coding.
 

Chaucer

Towns Guard
Xy$
0.00
Haha, apologies, I know the code I typed shouldn't be used like that, I'd actually typed it similar to how it was in the code you linked, I was just too tired at the time to write out a function, and I didn't wanna type this.example = new Sprite(); outside of a function, but I see, so it's that simple to draw a bitmap, ty very much for the info. :D I really appreciate it.~

and I always add ; on the end of each line(if applicable), but again, was too tired apologies.

Edit: hmm, still got the same issue though, I see that it's drawing it, as the bitmap is defined, however it doesn't show it anywhere.
 
Last edited:

Chaucer

Towns Guard
Xy$
0.00
Tried it, here's what I've got, doesn't seem to do much of anything ><; not sure if it matters I'm attaching it to the player

JavaScript:
Game_Player.prototype._createBitmaps = function() {
     bitmap = new Bitmap(1000,1000);
     bitmap.fillAll('white');
     this.addChild(bitmap);
};
Edit: I'm only using 1000 as a test I realize the screens nowhere near that big xD
 

Boy Who Codes

Praised Adventurer
Xy$
0.00
Hmmm, alright, here are the things you'll have to consider.
  • Where it is drawn. - Normally, each object is drawn differently in the map as you see it. If you go to Spriteset_Map, each of the drawn objects there has its own layers. Meaning, if you draw something besides the character, it should be below or above the character for it to show. Tilemap comes first, characters after. So you need to put it above TileMap, below Characters.
  • Drawing won't be seen not unless you call them. - Your code seems okay and legit, but have you called it from another function? For you to see it actually, you'll have to call that function somewhere and update it.
 

Chaucer

Towns Guard
Xy$
0.00
So here's what I've got,

JavaScript:
(function() {
    Game_Player.prototype._createBitmaps = function() {
         bitmap = new Bitmap(100,100)
         bitmap.fillAll('white')
         this.addChild(bitmap)
         console.log('s')
         return bitmap
    }
_alias_bitmaps_update = Scene_Map.prototype.update;
  Scene_Map.prototype.update = function(){
      $gamePlayer._createBitmaps
      _alias_bitmaps_update.call(this);
  };
  })();
still nothing tho, I completely removed all the tiles on the map so it's blank, but still no display =/

edit:
so, this code apparently works, I placed the bitmap into Scene_Map, and it works just perfect, the only problem now is that when I call
JavaScript:
$gamePlayer._createBitmaps();
it returns "Type Error unidentified is not a function", but when I check
JavaScript:
typeof $gamePlayer._createBitmaps();
it says it is a function, I tried without parentheses as well, but it just does nothing.
sure it has somethin to do with this line,
JavaScript:
  this.addChild(bitmap)
Ok, nevermind issues been resolved lol.
 
Last edited:

strider

Villager
Xy$
0.00
Hey guys, im sorry for digging up this old thread, but this thread is very similar to one i wanted to post so i just figured i would post in here rather than start a thread. Anyways, I wanted to ask how did you resolve this? I see you say it is resolved but you never said how.
 

Chaucer

Towns Guard
Xy$
0.00
It depends on what you're trying to accomplish and where xD basically, you have to draw this in Sprite_Character(if you're trying to draw something over the character.) everything else I used was correct, $gamePlayer doesn't actually have a ._children array(nor would it be accessed if you made it yourself), so you need to use this.addChild(this.bitmapName) inside of Sprite_Character(or wherever else you're trying to draw a sprite at.) Technically, you could still draw the bitmap to $gamePlayer, but in order for it to be visible you'd have to add the following to Sprite_Character.

Code:
if (this._character === $gamePlayer)
this.addChild(this._character.bitmapName);
if you need any more help just let me know.
 

strider

Villager
Xy$
0.00
I have tried a bunch of different ways to accomplisb this. I started with basically copying your code and vouldnt get it to work. The $gameplayer? Is that the player? So you were drawing something on the character?
Where in your code are putting that if? Just where addchild (whatever) is replace it with that if?

Currently I was looking through spriteset_map and i was planning on drawing right after the tilemap but before character. The problem is just that i keep getting the undefined is not a function error on the addChild (bitmap) function call. Unfortunately i will not near my computer for another 9ish hours or i would show you the code. But basically if you look at spriteset_map and go to i think its called create (like spriteset_map.prototype.create) or something. There is a bunch of function calls to createweather, createtilemap, etc. My plan was to add a function call to it in there. So i created a new class that was a type of pixi.displayobjectcontainer (this isnt exactly what it is called i dont think, but again i am away from my computer). Then create a new instance of it in spriteset_map. But the problem is always this.addchild (bitmap).
 

strider

Villager
Xy$
0.00
Here you go. This is a pretty simple example of what I am trying to do. I have tried many different iterations of this. I have tried putting it int he spriteset_map itself, tried creating an entire new class to handle it. Don't know what I am doing wrong.

JavaScript:
Tilemap.prototype.drawBitmap = function() {
    var bitmap = new Bitmap(100,100);
    bitmap.fillAll('white');
    console.log(bitmap);
    this.addChild(bitmap);
    }

var alias_Tilemap_createlayers = Tilemap.prototype._createLayers;
Tilemap.prototype._createLayers = function() {
    alias_Tilemap_createlayers.call(this);
    this.drawBitmap();
};
Thanks again.
 

Chaucer

Towns Guard
Xy$
0.00
I'm not sure what TileMap is or where it is, I couldn't find it in the rmmv code, but if you want to make a sprite appear, and want to make it below the player and above the map, you need to do it here
Code:
Spriteset_Map.prototype.createCharacters
and you'll need to update it here
Code:
Spriteset_Map.prototype.update
it'd be best to alias them, and draw the bitmap you want before the characters get drawn. if you need anything else feel free to ask :)
 

Chaucer

Towns Guard
Xy$
0.00
no no, don't do that, what I'm saying is draw your bitmap in create characters, like so.


JavaScript:
var MyBitmapAlias = Spriteset_Map.prototype.createCharacters;
Spriteset_Map.prototype.createCharacters = function() {
this.sprite = new Sprite();
this.sprite.bitmap = new Bitmap(width,height); // or image.
this.addChild(this.sprite);
this.sprite.x = your x location;
this.sprite.y = your y location;
MyBitmapAlias.call(this)
};
this will create your bitmap(just remember to fill out the width and height/x and y and change the name of it to whatever you want if you want to.), now that the sprites created, you'll need to update it to do what you want(unless you want it to stay centered in the same screen locaction all the time.) which is where we now need to call update.


JavaScript:
var updateMyBitmap = Spriteset_Map.prototype.update;
updateMyBitmap.call(this);
Spriteset_Map.prototype.update = function() {
    //If we wanted to spin the sprite constantly we'd do it
    //here, like so.
    this.sprite.rotation += 0.1;
};
this is just an example, as I'm not sure what you want to do with you're sprite, but simply put, createCharacters, is where you should draw the bitmap(since this is where the characters are created it'd be the easiest place to put your sprite if you want it above map and behind characters.)

and since createCharacters, is only run a single time to draw characters, if you try to update it here, nothing will happen, so we need to go to Spriteset_Map.update in order to keep the sprite updated at all times.

Hopefully this cleared things up a bit, lol sorry I was a bit tired when I posted last night, if you need anything else let me know
 
Last edited:

strider

Villager
Xy$
0.00
Huh. It worked. I can't think of really I have been doing differently. I suppose I have been trying to create a new bitmap directly rather than going through a Sprite. Maybe you cannot create a bitmap directly? But thank you so much man. I really appreciate you taking the time to help me out.. The only thing I have to figure out is how to put it under the characters rather than on top of. But I can figure that out. Thanks again dude. I really do appreciate it.
 

Chaucer

Towns Guard
Xy$
0.00
you have to change the z Axis
JavaScript:
var MyBitmapAlias = Spriteset_Map.prototype.createCharacters;
Spriteset_Map.prototype.createCharacters = function() {
this.sprite = new Sprite();
this.sprite.bitmap = new Bitmap(width,height); // or image.
this.addChild(this.sprite);
this.sprite.x = your x location;
this.sprite.y = your y location;
this.sprite.z = 2;
MyBitmapAlias.call(this)
};
this will draw it under the player, and over the map,
the issue isn't how you drew the bitmap, the issue was where you created it. when you create a sprite, it must be put inside of the corresponding Sprite class,
for example, I can draw a bitmap to the gamePlayer, like so.


JavaScript:
var addBitmap = $gamePlayer.prototype.update;
$gamePlayer.prototype.update = function() {
this.sprite = new Sprite(new Bitmap(48,48));
this.addChild(this.sprite);
}
now, this would work, except for one thing, $gamePlayer, does not contain a "Children" array, so adding this to it would result in well, nothing.
the only functions which contain Children class are sprites. so if I did this.


JavaScript:
var addBitmap = $gamePlayer.prototype.update;
$gamePlayer.prototype.update = function() {
this.sprite = new Sprite(new Bitmap(48,48));
//notice I removed this.addChild() from this line.
}
we now place the missing line to the actual sprite function, of $gamePlayer, which would be Sprite_Character(all events/players/followers/vehicles are part of Sprite_Character).


JavaScript:
var MySprite = Sprite_Character.prototype.update;
    Sprite_Character.prototype.update = function() {
        MySprites.call(this);
                //first we check which one is game player
                if(this._character ==== $gamePlayer) {
                //then we find it, we add the sprite so it's shown.
                this.addChild(this._character.sprite);
    }
now the sprite we drew in $gamePlayer will be drawn, however this will create another issue in it's own, so it's much better to do it all in the Sprite function to begin with. hopefully this was a helpful explanation :D
 

strider

Villager
Xy$
0.00
Huh. Ya that helps. I'll have to look through the code but $gameplayer is an instance of _character or something. Then if its gameplayer you draw it. Interesting.

And z axis, that makes sense. Hmmm. Say i wanted it to repeat, then i do something similar except with a tilingsprite i take it?

Man is thw code base documented anywhere? Even as someone who is a developer for a living i find it hard to look through this code essentially blind?

Also, sorry if this isnt something you know, but i was trying to tool around with the console getting break points to work but they werent working? Is there some way to enable them so i can step through the code easier?
 
Top