Comments (7)
Thanks for the catch. I was worried if something like this would happen. To my knowledge, canvas doesn't like non-integer values when calling drawImage()
.
It was my intention to leave them as floats (for want of a better word) until drawing and then convert. Will take a look where pos()
is being used.
from crafty.
Actually do you have a live example I could look at or even email me a zip? Would make it a lot quicker and fixable very shortly.
from crafty.
The code below should do it. You just need some images for background.png and mover.png that are the specified sizes. Make sure background.png is dark enough to contrast well with a blank canvas.
When the mover image moves back to the left, it will leave artifacts in its trail. I discovered while trying to build this that it's actually the background must appear at a non-integer position, rather than mover. Maybe the rectangle used to clear the canvas is different than the rectangle used to redraw the background?
By the way, this doesn't reproduce for me in Chrome, but I could see the bug in Firefox, Safari, and Opera.
Crafty.init(50, 320, 240);
Crafty.canvas();
Crafty.sprite("images/background.png",
{
background: [0, 0, 321, 243]
});
Crafty.sprite("images/mover.png",
{
mover: [0, 0, 25, 25]
});
var bg = Crafty.e("2D, canvas, background");
bg.x = (Crafty.viewport.width - bg.w) / 2;
bg.y = (Crafty.viewport.width - bg.w) / 2;
console.log("bg x: " + bg.x + ", bg y: " + bg.y);
var mover = Crafty.e("2D, canvas, mover");
var modifier = 5;
mover.bind("enterframe", function()
{
mover.x += modifier;
if(mover.x >= Crafty.viewport.width - mover.w || mover.x < 0)
{
modifier *= -1;
}
});
from crafty.
Oops. I accidentally closed this issue when I commented. I don't see a way to reopen, so I think you'll need to do it. Sorry about that.
from crafty.
So I think the problem was with trying to draw elements out of the canvas bounds. Have now fixed it by modifying the drawImage values to only draw what's visible. Will upload when a few other bugs are fixed and will release as a new version.
//if out of bounds from the canvas, crop
if(pos._x < 0) {
//negative minus negative
co._x -= pos._x;
pos._x = 0;
}
if(pos._y < 0) {
co._y -= pos._y;
pos._y = 0;
}
if(pos._x + pos._w > Crafty.viewport.width) {
co._w += (Crafty.viewport.width - pos._x + pos._w);
pos._w = co._w;
}
if(pos._y + pos._h > Crafty.viewport.height) {
co._h += (Crafty.viewport.height - pos._y + pos._h);
pos._h = co._h;
}
Thanks!
from crafty.
My mistake. That code was wrong. The problem was you were giving the sprite()
function the wrong values. Here are the correct values:
Crafty.sprite("bg.png", {
background: [0, 0, 321, 240]
});
from crafty.
I specifically designed the test case to center an image so that Crafty would need to work with partial pixels, both vertically and horizontally. 321x243 is the correct dimensions for the image I used. Crafty's stage is a bit smaller at 320x240. The background, in that case, would be positioned at -0.5, -1.5.
from crafty.
Related Issues (20)
- Update documentation for using Crafty as a module HOT 10
- [NodeJS] `Crafty.init is not a function.` HOT 5
- Random tile of tilemap not rendering with canvas/WebGL when rotated HOT 4
- Collision does not work for rotated entities with updated origin HOT 7
- Player Entity gets Stuck on Walls, Walls have slight gap on one side HOT 2
- Crafty wont display in Electron HOT 6
- [Enhancement] Crafty.attr({}) function? HOT 3
- Change 'each' function scope to first argument HOT 4
- [Electron] Violations of non-passive listener HOT 1
- Maximum call stack exceeded
- How to import CraftyJS to js file HOT 1
- CraftyJS in TypeScript HOT 1
- When using canvas to display pictures, the edges of pictures are blurred HOT 1
- Scaled viewport is not centered correctly
- Newlines don't work with Canvas rendering HOT 5
- movements on keys events aren't smooth
- What is the state of Crafty in 2021? (Is it abandoned?) HOT 3
- player.x.toFixed(0);
- Crafty
- CraftJS source with Web dependencies
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from crafty.