चलो कहते हैं कि मैं इस छवि है दो:जावास्क्रिप्ट - विभाजन एक tileset छवि में 2 डी छवि() सरणी संग्रहीत करने के लिए
और मैं इस 2 डी सरणी tiles[] .. और Image() फ़ंक्शन का उपयोग है ... मैं for लूप को प्रत्येक टाइल को array में tile[0] में जोड़ने के लिए कैसे उपयोग कर सकता हूं ताकि ऑब्जेक्ट्स को बाद में एचटीएमएल 5 कैनवास पर पेंट किया जा सके?
मैं करूंगा ..
मान लिया जाये:
imageWidth, imageHeight, tileWidth, tileHeight
सभी से बताएं कि उनके नाम का सुझाव देते हैं, और:
संपादित करें: जोड़ा टिप्पणी प्रति के रूप में छवि लोड, गलत तरीके से तय नाम ImageWidth और ImageHeightimageWidth करने और imageHeight
संपादित करें:के अंदर कोड निष्पादित करनाछवि के रूप में (0,0)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "tilesetImageLocationHere";
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0);
तो मूल से यहां तैयार की है, drawImage(), .. टाइल डेटा की एक सूची में अपनी छवि को विभाजित
var tilesX = imageWidth/tileWidth;
var tilesY = imageHeight/tileHeight;
var totalTiles = tilesX * tilesY;
var tileData = new Array();
for(var i=0; i<tilesY; i++)
{
for(var j=0; j<tilesX; j++)
{
// Store the image data of each tile in the array.
tileData.push(ctx.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
}
}
//From here you should be able to draw your images back into a canvas like so:
ctx.putImageData(tileData[0], x, y);
}
मैं अपने आईपैड पर हूं इसलिए आसानी से एक उदाहरण नहीं मिल सकता है, लेकिन यदि आप लाइब्रेरी का विरोध नहीं कर रहे हैं तो EaselJs देखें। यह SpriteSheets .. कि तुम क्या चाहते हो जाएगा है
मैं मानता हूं, easelJS देशी spritesheeting सीखना बहुत आसान है। बस एक छवि लोड करें, टाइल आकार को पैरामीटर के रूप में भेजें, और आपको छवियों में विभाजित करने या इसे सरणी के रूप में छोड़ने के लिए फ्रेम की एक आसान सरणी मिलती है। – Rodik
ठीक मैंने किया यह मेरे लोकहोस्ट पर: इसे आपको कम से कम आधार देना चाहिए। मुझे लगता है कि आप इस सीधे बॉक्स के बाहर उपयोग करने में सक्षम होना चाहिए, लेकिन आप जो चाहते हैं उसके आधार पर आपको इसके लिए कुछ गणना समायोजन करना पड़ सकता है। मुझे नहीं लगता कि यह आपके उदाहरण के लिए इसे सही करने के लिए समय बिताने में असमर्थ है:
आपको स्पष्ट रूप से छवि को अपनी छवि पर इंगित करना होगा।
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var canvas = document.getElementById('fakeCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = '/theImage.png';
var tiles = [];
var imageTileNumWidth = 23;
var imageTileNumHeight = 21;
img.onload = function(){
var imageWidth = img.width;
var imageHeight = img.height;
sndCanvasWidth = imageWidth/imageTileNumWidth;
sndCanvasHeight = imageHeight/imageTileNumHeight;
canvas.width = imageWidth;
canvas.height = imageHeight;
ctx.drawImage(img,0,0,imageWidth,imageHeight);
var sndCanvas = document.getElementById('drawCanvas');
sndCanvas.width=sndCanvasWidth;
sndCanvas.height=sndCanvasHeight;
var i=0;
var j=0;
var t=0;
for(i=0;i<imageWidth;i+=sndCanvasWidth){
for(j=0;j<imageHeight;j+=sndCanvasHeight){
var myImageData = ctx.getImageData(j,i,sndCanvasWidth,sndCanvasHeight);
var ctx2 = sndCanvas.getContext("2d");
ctx2.putImageData(myImageData,0,0);
tiles.push(myImageData);
}
}
};
});
</script>
</head>
<body>
<canvas id="fakeCanvas"></canvas>
<canvas id="drawCanvas"></canvas>
</body>
</html>
आपको पता होना चाहिए कि प्रत्येक वर्ग कितने पिक्सल चौड़े और उच्च – jeschafe
32x32 है ...? एक बुनियादी टाइल। – nn2
पिक्सल ..32 पिक्सल – nn2