How do you create a new tag?

[pradeeproark]

I want to create one that maps to phaser audio. So you can add it under game tag as

<game>
<audio assetKey="explosion">
</game>

but the build never picks up the audio component? I made the audio component similar to the sprite but it has no effect.

'use strict';

var treeUtils = require('../tree-utils'),
    audioPropertes = require('../properties/base/Phaser.Audio'),

    updateAudio = treeUtils.genPropertyMapUpdate(audioPropertes),

    initAudio = function (node, tree) {
        console.log('audio loading');
        var props = node.props;
         node.obj = new Phaser.Sound(treeUtils.game(tree), props.assetKey,1,true);
        treeUtils.addDisplayObject(node, tree);
        node.obj.play();
        updateAudio(node, null, tree);
    },

    killAudio = function (node, tree) {
        node.obj.kill();
    };

module.exports = {
    init: initAudio,
    kill: killAudio,
    update: updateAudio
};

[pradeeproark]

Have to add it to index/types.

[evilfer]

Hi, sorry, yes, tags not in the tag type map should be silently ignored... I imagine you also extended impl/types/game.js to enable loading audio resources.

[pradeeproark]

Yes.

switch (asset.type) {
....
case 'audio':
game.load.audio(key, asset.src);
break;

[pradeeproark]

on that note, how do you create a property for a tag that when set will call a method on the underlying node object.

like property play which when set to true will call the phaser audio object play() method?

[evilfer]

Hi, I think the best example for that is at https://github.com/evilfer/react-phaser/blob/master/src/impl/properties/base/Phaser.Game.js

That file generates the "update" method for the "game" tag. You can use some helper functions to create the update method. In that code, "generateCustomPropMap" is used to connect properties with your own custom functions. So, when the property "stateName" changes in a "game" node, the function (https://github.com/evilfer/react-phaser/blob/master/src/impl/properties/base/Phaser.Game.js#L12-L16) will be invoked.

The function will be invoked also if the property disappears, so value can be undefined.

Last thing: the function should NOT be invoked when react updates the virtual DOM but "stateName" keeps the same value.

Does this help? :)

[pradeeproark]

It works :thumbsup: . Not sure whether there is a better place than this issue log to discuss like this. I have another Q, I tried to create a react component to render a score card and tried to include it in the main game's render. Like . It didn't work. Is this expected to work?