KineticJs - Comment scinder des objets et des fichiers

Question

moi et un groupe de mon université développent un jeu sur le Web en utilisant KineticJS.Nous utilisons beaucoup de formes qui sont affichées, supprimées et ont plusieurs actes d'action.

En ce moment, nous ne nous sommes pas très loin, mais je pense toujours que les fichiers deviennent très gros.Avez-vous des conseils pour la façon dont nous devrions tout diviser dans des fichiers plus petits?Est-il possible de stocker tous les objets dans un fichier et d'exécuter des actifs d'action dans un autre?Tous les conseils sont les bienvenus de la façon dont le flux de travail devrait ressembler!

Answer 1

Conseil: utilisez le modèle d'usine pour définir et créer vos objets cinétiques

Voici une démo qui permet d'utiliser une usine pour construire autant de cercles que nécessaire dans environ 50 lignes de JavaScript:

http://jsfiddle.net/m1erickson/s89mu/

sur le modèle d'usine

Premièrement, créez un objet JS qui contient toutes les propriétés qui définissent un cercle unique unique.

Vous pouvez penser à cela comme un plan de la manière de construire ce cercle exact.

Le kinetic.circle réel sera construit ultérieurement à l'aide de myCircleFinition5 et sera ajouté à la couche.

Performances Remarque: Vous pouvez utiliser JSON pour enregistrer ceci pour enregistrer MyCirCleleFinition5 dans un fichier ou une base de données.

Et juste comme JavaScript discret, vos définitions de données sont séparées de votre code pour le code de nettoyage.

// create the definition of a circle -- not yet an actual circle

var myCircleDefinition5={
    cx: 150,
    cy: 100,
    radius: 20,
    fill: "blue",
    strokewidth: 4
}

Voici le code qui utilise MyCircleFinition5 pour ajouter un véritable cercle cinétique sur la couche:

// turn the object into a real Kinetic.Circle

makeCircle(myCircleDefinition5);

// this is the "factory" that takes a definition and produces a real Kinetic.Circle

function makeCircle(circleObject){
    var circle = new Kinetic.Circle({
        x:circleObject.cx,
        y:circleObject.cy,
        radius: circleObject.radius,
        fill: circleObject.fill,
        stroke: 'lightgray',
        strokeWidth: circleObject.strokewidth,
        draggable: true
    });
    layer.add(circle);
    layer.draw();
}