I've tried a bunch of alternatives, and but each approach has not produced the desired result of stretching an image from a new sx to the end of the canvas.
I'm going to assume the image shows what you want to happen, not what is actually happening. You can do all of this in the drawImage call. You don't typically see the parameters explained this way, but I think it will help for what you want to do.
ctx.drawImage(imgSrc, cropX, cropY, cropWidth, cropHeight, drawAtX, drawAtY, drawWidth, drawHeight);
https://jsfiddle.net/yLf5erut/2/
Related
I'm trying to put a picture in my python game, so far I have this:
picture = pygame.image.load(picture.jpg)
screen.fill(BLACK)
screen.blit(picture, (0,0))
This successfully adds the picture, but takes up the whole screen. Is it possible to reduce the size of this picture?
Thank you for the help.
It looks like you can scale an image with transform.scale.
picture = pygame.transform.scale(picture, (1280, 720))
Also have you tried playing around with the parameters in screen.blit?
I think instead of passing a point into the "Dest" parameter you can pass a rectangle.
screen.blit(picture), (0,0,width,height))
I recently made a game with game maker and I've tried converting it to html5, but it's got some big errors... here is the game in html format: http://ivatrix.com/Game/index.html
First off, text is meant to appear in the top left like how you can see in this screenshot: http://gyazo.com/baa386fe06cfac9439c83b6e5192efd8 the text only appears after you create a combo.
Secondly, when you click on an orb it's meant to scale down to half it's size then scale up to 1.5x it's size, but instead it's shrinking until it's 1px large then infinitely increasing in size. Draw code is here:
if sl=1
{
if (s=0.6 or s=1) then d=d*(-1)
s+=d
if(frozen=1)
{
draw_sprite_ext(sprite_index,global.skin,x,y,s,s,0,c_blue,1)
}
}
And then there's other small errors like some text won't display, particle effects don't seem to draw, the game always returns saying there is no match on the board. That's all I've found so far.
Does anyone have any idea what I can do to fix this?
Thanks.
Since no one has provided an answer and I've found one myself, I'll put it up here so others in the same boat can benefit as well. Practically, the source of all my problems with floating point numbers being irregular, for example instead of it being 1 it could be 1.000000003, which meant if you were to check if that variable was equal to one, it would return false. Further information here: http://help.yoyogames.com/entries/77891197-HTML5-Issues-And-Differences
So for an example in my case, I changed the line
if (s=0.6 or s=1) then d=d*(-1)
to
if (s<0.6 or s>1) then d=d*(-1)
And now the problem is fixed.
Im trying to get something like this --> http://jsfiddle.net/NhvAZ/10/ but with image inside circle.
I did exactly the same way like on example above, but it doesn't work with image. Here is my code: http://jsfiddle.net/uyEaq/
Someone could tell me what I'm doing wrong?
Well that was really confusing, but looking at some of the previous iterations of the fiddles you've given I think I know what you want.
You want an ever increasing pie slice of an image to appear, right? Clipping can do that for you. Here's an example using some of your code:
http://jsfiddle.net/QMZg2/
I have a canvas with the following size: 500x200. Inside this canvas i'm drawing some number of blocks (actually - table cells). Information about how much blocks i should draw i'm getting via AJAX, but size for every cell is fixed - 100x50. So, i can display inside my canvas only 5 blocks horizontally and 4 vertically. But what about other blocks? What if script return a table 30x30 cells. How can i side scroll (mouse preferred) my canvas so user can the rest of the cells (no zoom out, only scrolling).
If you need any more information, please, tell me and i will provide it.
Thank you.
The easiest way to accomplish this is to implement mouse-panning.
On the mouse down event, begin panning and save the mouse position
On the mouse move event, translate the context (ctx.translate(x,y)) by the difference between the current mouse position and the original position, then redraw the scene.
On the mouse up event, stop panning.
There are harder ways. You could implement scrollbars inside the canvas, as Mozilla Bespin has done (...which became Mozilla Skywriter which then merged with Ace and dropped all Canvas use). The code that they used was pretty good.
Or you could implement DOM scrollbars for use with your canvas, which isn't exactly easy to get right in all cases. This involves adding several dummy divs in order to give the appearance and function of real scrollbars. I have done this but the code remains unreleased for now. But thats no reason you can't give it a try if thats what you really want.
Check out a great tutorial at: http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspx
It will give you an answer to your question and much much more...
I'm with Simon Sarris on this, but as an alternative, you could clone the canvas, and replace it with a blank canvas, and then render the original canvas as an image. I've some MooTools js that goes like this, which is fine for my use, by ymmv:
var destinationCanvas = this.canvas.clone()l
destinationCanvas.cloneEvents( this.canvas, 'mousemove');
var destCtx = destinationCanvas.getContext('2d');
destCtx.drawImage(
this.canvas,
(this.options.scrollPx)*-1,
0
);
destinationCanvas.replaces( this.canvas );
this.canvas.destroy();
this.canvas = destinationCanvas;
this.ctx = destCtx; // this.canvas.getContext('2d');
I'm trying to position an image on top of another image based upon the make-up of the smaller image. The smaller image is a cut-out of a larger image and I need it to be positioned exactly on the larger image to make it look like a single image, but allow for separate filters and alphas to be applied. As the images are not simple rectangles or circles, but complex satellite images, I cannot simply redraw them in code. I have quite a few images and therefore do not feel like manually finding the position of each image every and hard setting them manually in actionscript. Is there any way for me to sample a small 5-10 sq. pixel area against the larger image and set the x and y values of the smaller image if a perfect match is found? All the images are in an array and iterating through them has already been set, I just need a way to sample and match pixels. My first guess was to loop the images pixel by pixel right and down, covering the whole bitmap and moving to the next child in the array once a match was found, leaving the matched child where it was when the perfect match was found.
I hope I understood your question correctly.
There may be an option that uses copypixels to achieve what you want. You can use the bitmapdata.rect value to determine the size of the sample you want, and loop through the bigger bitmap using thet rectangle and a moving point. Let's see if I can code this out...
function findBitmapInBitmap(tinyimg:BitmapData, largeimg:BitmapData):Point {
var rect:Rectangle = tinyimg.rect;
var xbound:uint = largeimg.rect.width;
var ybound:uint = largeimg.rect.height;
var imgtest:BitmapData = new BitmapData(tinyimg.rect.width, tinyimg.rect.height);
for (var ypos:uint = 0, y <= ybound, y++) {
for (var xpos:uint = 0, x <= xbound, x++) {
imgtest.copyPixels(largeimg, rect, new Point(xpos, ypos);
if (imgtest.compare(tinyimg) == 0) return new Point(xpos, ypos);
}
}
return new Point(-1,-1); // Dummy value, indicating no match.
}
Something along those lines should work - I'm sure there's room for code elegance and possible optimization. However, it seems like something like this method would be very slow, since you'd have to check each pixel for a match.
There is a better way. Split your big image into layers, and use the blitting technique to composite them at runtime. In your case, you could create a ground texture without satellites, and then create the satellites separately, and use the copyPixels method to place them whereever you want. Google "blitting in as3" to find some good tutorials. I'm currently working on a game project that uses this technique and it's a very good method.
Good luck!
Edit: Forgot to code in a default return statement. Using this method, you'd have to return an invalid point (like (-1,-1)) and check for it outside the function. Alternatively, you could just copy your small bitmap to the big one within the function, which would be much more logical, but I don't know your requirements.
You need to find pixel sequence in the big image. BitmapData.getPixel gives you pixel value. So get first pixel from small image, find it in big image, then continue comparing until you find full match. If you have trouble to code that, feel free to ask.
For the actual comparison, there's BitmapData.compare which returns the number 0 if the BitmapData objects are equivalent.