How to display images in code?

[Senfgurke]

Hi there,
I would consider myself a relatively seasoned JS-Scripter and also collected some experience in RPGMaker XP in my younger years. Right now I'm trying to make a custom battle system with cards.
For a first Proof-Of-Concept my idea was to use skills as the cards and in the note tag of the skill I would reference the image for the card to be used.
e.g. <image: 0001.png>

Right now I have an array of IDs (the IDs of the skills) that represents my deck and now I want to show the corresponding pictures on my battlescreen.
Whats the best way to do this? I have a custom folder full of the card images.

What I have so far:
A custom loadCard function

   ImageManager.loadCard = function(filename, hue) {
        return this.loadBitmap('img/cards/', filename, hue, false);
    };

My custom createCards function that I wrote for the Spriteset_Battle.

 Spriteset_Battle.prototype.createCards = function(){
        var card = new Sprite_Picture();
        card.bitmap = ImageManager.loadCard('0001');
        card.x=1;
        card.y=1;
        card._width=200;
        card._height=200;
        this._battleField.addChild(card);
        console.log("battlefield",this._battleField);
    }

The function gets called, I get the console log, however I see no picture. Is this the right way? Should I use Sprite_Picture? Is something important missing?

What I also want to do is add the pictures to the battlefield as a child so they get updated constantly. Is this correct?

Thanks for any help,
cheers

 

[Senfgurke]

Also i think i posted this in the wrong forum. I'm guessing this should go into learning JavaScript? I'm not sure. Im sorry however, if this is the wrong forum.

 

[FleshToDust]

I don't know about the js code stuff but I made a card system and I did it with events.
You can do a draw phase for example and say

If DrawCardRandom = 1
Variable HandZone1 = 1

That will change your hand zone to 1.
You'll then have a parallel process event that will say

If HandZone1 = 1
Show Picture MonsterCard1 in x and y coordinates

That should show you the card on screen.

If you then want to play that card and put it on the field you'll click on HandZone1 and it will say

If HandZone1 = 1 Show Choices
Play: HandZone1 = 0|FieldZone1 = 1
Back

This will remove the card from your hand and put it on the field. The picture in your hand will disappear.
In order for it to show up on the field though what you'll need to do is go into your parallel process event that controls all the pictures in your game and say

If FieldZone1 = 1
Show Picture: MonsterCard1

I hope this helps.

 

[DrDhoom]

Don't use Sprite_Picture, instead use regular Sprite object. Or even better, create your own sprite object with Sprite as the prototype.
Example:

function Sprite_Card() {
    this.initialize.apply(this, arguments);
}

Sprite_Card.prototype = Object.create(Sprite.prototype);
Sprite_Card.prototype.constructor = Sprite_Card;

Sprite_Card.prototype.initialize = function (bitmapName) {
    Sprite.prototype.initialize.call(this);   
    this.bitmap = ImageManager.loadCard(bitmapName);
    this.x = 1;
    this.y = 1;
};

 

[Kes]

@Senfgurke I think you're right, Learning JavaScript would probably be better.

Moving this.

 

[AdamSakuru]

I don't know about the js code stuff but I made a card system and I did it with events.
You can do a draw phase for example and say

If DrawCardRandom = 1
Variable HandZone1 = 1

That will change your hand zone to 1.
You'll then have a parallel process event that will say

If HandZone1 = 1
Show Picture MonsterCard1 in x and y coordinates

That should show you the card on screen.

If you then want to play that card and put it on the field you'll click on HandZone1 and it will say

If HandZone1 = 1 Show Choices
Play: HandZone1 = 0|FieldZone1 = 1
Back

This will remove the card from your hand and put it on the field. The picture in your hand will disappear.
In order for it to show up on the field though what you'll need to do is go into your parallel process event that controls all the pictures in your game and say

If FieldZone1 = 1
Show Picture: MonsterCard1

I hope this helps.

Dude, this is all eventing?! Damn, that is really impressive.

 

[Senfgurke]

I don't know about the js code stuff but I made a card system and I did it with events.
You can do a draw phase for example and say

If DrawCardRandom = 1
Variable HandZone1 = 1

That will change your hand zone to 1.
You'll then have a parallel process event that will say

If HandZone1 = 1
Show Picture MonsterCard1 in x and y coordinates

That should show you the card on screen.

If you then want to play that card and put it on the field you'll click on HandZone1 and it will say

If HandZone1 = 1 Show Choices
Play: HandZone1 = 0|FieldZone1 = 1
Back

This will remove the card from your hand and put it on the field. The picture in your hand will disappear.
In order for it to show up on the field though what you'll need to do is go into your parallel process event that controls all the pictures in your game and say

If FieldZone1 = 1
Show Picture: MonsterCard1

I hope this helps.

Thank you for your reply FleshToDust, thats really impressive! However, I think it would be quite a tedious task for me to implement my complete battle system event based. Where I was stuck was how I could get my graphic to show on the screen, in an event based system this would simply be the show Picture command.

Don't use Sprite_Picture, instead use regular Sprite object. Or even better, create your own sprite object with Sprite as the prototype.
Example:

function Sprite_Card() {
    this.initialize.apply(this, arguments);
}

Sprite_Card.prototype = Object.create(Sprite.prototype);
Sprite_Card.prototype.constructor = Sprite_Card;

Sprite_Card.prototype.initialize = function (bitmapName) {
    Sprite.prototype.initialize.call(this);  
    this.bitmap = ImageManager.loadCard(bitmapName);
    this.x = 1;
    this.y = 1;
};

Thank you DrDhoom, I now have a picture! Using a custom sprite class for the Cards seems logical. Thank you very much! I hope everything works out how I think it will, but at least now I'm not stuck on showing the cards.