HTML 5 canvas comment puis-je extraire et stocker une image de spritemap?

Je suis également curieux de savoir s'il s'agit d'une bonne pratique.HTML 5 canvas comment puis-je extraire et stocker une image de spritemap?

Je charge une carte de sprite:

canvas = $('#GameCanvas')[0]; 
context = canvas.getContext('2d'); 

// load sprite map 
spriteMap = new Image(); 
spriteMap.src = "resources/spritemap.png";

Maintenant, j'ai chargé mes sprites, je veux les dessiner sur l'écran. Je peux le faire en utilisant context.drawImage(..) mais:

Je ne sais pas si cela est la meilleure façon, au lieu d'extraire chaque image que je veux et les stocker séparément, par exemple. var playerCharacter = [cut the image out of the sprite map]
Je veux coloriser les images. Si je sors un sprite 'blanc', je pourrais alors vouloir le coloriser en rouge, vert, etc. Je ne sais pas encore comment faire, mais il faudra probablement créer un nouveau colorisé Image donc je devrais sortez-le du spritemap de toute façon. Je ne veux pas être en train de me recolorer constamment.

Une idée de la meilleure façon de le faire?

Source

2013-04-02 NibblyPig

performance en utilisant sprites

Phrogz a quelques tests de FPS utiles pour CSS vs Canvas ici: Efficiency of <canvas> and <div>s Ils sont des tests en direct afin que vous puissiez les exécuter dans les environnements que vous souhaitez tester.

recoloration sprites

Si vous voulez prendre rapidement l'image-objet blanc et créer sprites rouge, vert et bleu de celui-ci, vous pouvez utiliser globalCompositeOperation = » source dans » de faire cela avec très peu travail. Utilisez simplement un éditeur d'image pour créer une découpe de la partie de l'image que vous voulez recolorer. Utilisez ensuite le code ci-dessous pour créer automatiquement différents sprites colorés. J'ai fait le masque ci-dessous dans Photoshop en utilisant l'outil magique - 2 minutes de haut!

poisson original + Mask = Green Fish

enter image description here

Bien sûr, vous pouvez créer une couleur que vous voulez ... même les modèles au lieu de couleurs solides!

Voici le code. Vous devrez probablement créer votre propre image et votre masque à cause de CORS - stupide CORS !!

<!doctype html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

    <style> 
     canvas{border:1px solid red;} 
     #wrapper{ position:relative;} 
     #overlay,#base{ position:absolute; top:0; left:0;} 

    </style> 

    <script> 
$(function(){ 

    var canvas=document.getElementById("overlay"); 
    var ctx=canvas.getContext("2d"); 

    var img=new Image(); 
    img.onload=function(){ 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,overlay.width,overlay.height); 
    } 
    img.src="http://dl.dropbox.com/u/139992952/stackoverflow/fish%20overlay.png"; 

    function draw(red,green,blue) { 
     ctx.save(); 
     ctx.globalCompositeOperation = 'source-in'; 
     ctx.fillStyle="rgb("+red+","+green+","+blue+")"; 
     ctx.beginPath(); 
     ctx.rect(0,0,overlay.width,overlay.height); 
     ctx.fill(); 
     ctx.restore(); 
    } 

    $("#red").click(function(){ draw(255,0,0); }); 
    $("#green").click(function(){ draw(0,255,0); }); 
    $("#blue").click(function(){ draw(0,0,255); }); 

    }); 

    </script> 

</head> 

<body> 
    <button id="red">Red Fish</button>  
    <button id="green">Green Fish</button> 
    <button id="blue">Blue Fish</button> 
    <div id="wrapper"> 
     <img id="base" src="http://dl.dropbox.com/u/139992952/stackoverflow/fish.png" width=350 height=250> 
     <canvas id="overlay" width=350 height=250></canvas> 
    </div> 
</body> 

</html>

Source

2013-04-02 17:55:30 markE

Oh c'est bien! Merci pour l'astuce de masquage :) – NibblyPig

La question principale que je pose cependant est, devrais-je dessiner directement à partir du spritemap, ou dans ma méthode init() dois-je séparer le spritemap en différentes images? – NibblyPig

HTML 5 canvas comment puis-je extraire et stocker une image de spritemap?

Répondre

Questions connexes