rezoner / canvasquery Goto Github PK
View Code? Open in Web Editor NEWCanvas for 2d gamedevelopers. Out of box canvas, keyboard, mouse, events.
Home Page: http://canvasquery.com
Canvas for 2d gamedevelopers. Out of box canvas, keyboard, mouse, events.
Home Page: http://canvasquery.com
What would be your expectation regarding rendering sprites in Playground.
Preferably write example USAGE in real code.
TL;DR
The problem is that there are many solutions to render sprites/animations.
A sprite rendering would have to support these (or is this is not what you expect?):
I've put emphasis on DURATION because it implies having time delta somewhere - and that's where the thing gets nasty as this clearly leverage Playground beyond unobtrusive core architecture that deals with display and input only.
On top of that - it's really hard to achieve that with functional (rather than objective) approach without sacrificing readability - and I don't really want to go with objects because it's pushing playground towards tightly coupled engine (like Phaser).
That's the minimal form for a functional sprite rendering. It requires you to have a sprite
defined somewhere earlier.
renderSprite(app.sprites.tank, x, y, delta);
app.sprites.tank = {
image: "tank",
frames: 16,
width: 32,
height: 32,
alignX: 0.5,
alignY: 0.5,
duration: 0.4
};
I really think that having your own sprite object is more convenient than functional approach - and for rendering you just use layer.drawRegion
So now I am thinking more about providing just two methods to extract frame from textureAtlas and fixed-size spritesheet - something like more advanced version of layer.drawRegion
Same as in CSS
Version 0.9.1 is on your website but is not here. Shouldn't this be updated from 0.8.4?
I noticed that the there isn't functionality for the Keyboard.prototype.keypress event,
is this intentional/incomplete?
Hello,
I am really new to CanvasQuery, so I hope this isn't such a stupid question :)
(function (window, document, undefined) {
/* Example code */
var imagesData = window.imagesData;
var game = {
player: {
found: []
},
setup: function () {
this.layer = cq().framework(this, this);
this.layer.appendTo("body");
},
loadImage: function (callback) {
var imageObj = new Image();
imageObj.onload = function() {
if (callback) {
callback(imageObj);
}
};
imageObj.src = imagesData[0].src;
},
createImage: function () {
var self = this;
this.loadImage(function (image) {
self.layer.drawImage(image, 0, 0, self.layer.canvas.width, self.layer.canvas.height);
});
},
onStep: function (delta) {
},
onRender: function () {
},
onResize: function (width, height) {
/* resize canvas with window */
this.canvas.width = width;
this.canvas.height = height;
/* Works first time. But not when resizing... I get: '...has no method 'createImage'' */
this.tempContext.createImage();
},
onMouseUp: function (x, y) {
console.log(x, y)
}
};
game.setup();
}(window, document));
My problem is, that onResize()
calls createImage()
when initializing, but not when resizing.
How do I call createImage()
inside of onResize()
correctly?
Greeting form Germany,
Andre
BTW: Huge thanks for CanvasQuery 👍
add
var self = this.tempContext || this;
Cannot disable context menu for right click.
Not really sure how would it work without CPU overhead but I think
this.layer.align(0.5, 0.5)
would be awesome.
It would affect drawImage, drawRegion, paths auto-magically centering them upon desired point.
Using playground version stripped out of CanvasQuery
layer in order to set up ThreeJS
https://gist.github.com/rezoner/362b5da4f3d6e01c9442
I guess it will be reasonable to add wrappers for variety of ThreeJS loaders.
i just started using CanvasQuery so far i like it but im having trouble figuring something out.
i have two blocks on my canvas and i want the "player' block to be key controllable, so far i have that part working but then i created an "enemy" and now when the user moves "player" the "enemy" also moves. i plan on having the "enemy" relocate on collision with "player" how can keep the blocks from moving together and where do i have to give "enemy" its own special functions? i checked out the other examples but i couldn't find any examples with more than one object on screen.
Hi everyone,
I got plugins
working for Playground. Plugins are nothing more than bundles of event listeners that can replace properties of an application or a state (on instantiation time)
For example here is a plugin that deploys basic Three.js rendering for Playground.
From end user point of view usage looks like this:
playground({
use: {
three: { /* config properties goes here */ }
}
});
Now.
While this is very modular and pretty useful if you know what's going on under the hood - I am afraid it encourages bad habits by letting developers skip many learning curves. All the problems that jQuery has to deal with. jQuery is great - but because of its accessibility it lures awful developers and has became a synonym of whatever is lame in web programming.
What's your opinion. Is it a risk worth taking? I don't want to scare off professionals, I really appreciate that my library is unpopular but used by people as dedicated as I am. People who care to spend their time learning the basics before asking.
Every single one of them
Convert value to alpha for byte array
Hi,
I get strange results when I use .onStep(). It sometimes updates very fastly, sometimes very slowly and it sometimes begins very fast and then becomes slow after a random time (delta from 5 to >30).
A simple requestAnimationFrame() gives me regular updates on an attempt and on each attempts.
Comparison test : http://cssdeck.com/labs/w6wdovya
It would be nice if there was a way to flip sprites horizontally/vertically.
(feature suggestion)
For one of my projects i drew images with a fixed color palette which i want to be able to change on the fly. I kind of hacked this in by allowing matchPalette to accept another palette so that, after matching, it takes the colors of the second and not the first palette.
Example:
We have an image with a palette of three different colors ('#aaa', '#bbb', '#ccc').
Now we run
cq(image).matchPalette(['#aaa', '#bbb', '#ccc'], ['#f00', '#0f0', '#00f'])
And the returned image uses the second palette where '#aaa' was replaced by '#f00' etc.
Now, the way i did it was rather dirty and assumes that both palettes have the same length, maybe you can find a nicer way.
tl;dr: It would be cool to have a nice way to swap color palettes of an image.
While I was experimenting with raw WebView android wrapper I found out that CanvasQuery uses 'new' browsers feature - requestAnimationFrame, I don't know if it's intended but if it's not here is fix that I used (found in web): https://github.com/3mpty/android-unfinished-asteroids/blob/master/app/src/main/assets/unfinished-asteroids/script/Lib/CanvasQuery.js
Lines 14-37. Ofc. it's not best place for this code, it was just experiment, with that it should work on old androids and handicapped desktop browsers.
Trying mobile multitouch support, I've notice this unpredictable behaviour. Sometimes touchend is called, sometimes is not, and sometimes is called in a wrong x,y. Test code below and try it on mobile.
The code in the docs (handling multitouch in render()) runs perfectly, but there's no easy way to know if a touch starts or ends.
Tested on iPad mini (ios 7.1.2) and Nexus7 (android 5.0.2). On the nexus, where the frame rate is lower, the effect is worse.
var app = playground({
ready: function(){
this.layer.clear('#000').strokeStyle('#f00');
},
touchstart: function(ev) {
this.layer.fillStyle("#0f0").fillCircle(ev.x, ev.y, 5);
},
touchmove: function(ev) {
this.layer.fillStyle("#fff").fillCircle(ev.x, ev.y, 2);
},
touchend: function(ev) {
this.layer.strokeCircle(ev.x, ev.y, 20); // <------ !!!
}
});
cq.loadImages can not to use!
I'm seeing that this cq.color(0,0,0,1)
creates a color with undefined
for r, g, and b, while wrapping the values in an array cq.color([0,0,0,1])
creates the color correctly. Is this broken, or is #color changing? If so, I can make a PR.
drawAtlasFrame(atlas, frame, x, y) does not use the input x,y coordinates and draws always in 0,0
Hi!
This is awesome lib, but it lacks any automated testsuite, contributing and maintaining in the long run will be a pain in the ass :-(
Do you plan to cover it with tests?
Cheers,
Wojtek
I tried working with Mouselock and MovementDelta Feature to move a drawn map around. But i found it to be very unprecise and moreover not working in Internet Explorer (tested with IE 11).
The movementX and movementY values seem to be laggy and very unprecise. Sometimes there are spikes and the moved image "jumps" around. And in general it does not follow the mouse-movement very well. It stays behind or stutters .
You can see this clearly in the example( http://canvasquery.com/playground-mouse-lock ) by just moving your cursor in a circle for a while. The image will jump and soon its gone.
It works quiite okay in Chrome for me, but Firefox suffers from jumps and stuttering alot.
Additionally i'd like to suggest making the "requestPointerLock" in mouse.lock() optional.
Either chrome or playground should be responsible for using only actualy gamepads as gamepad inputs. While on the documentation website, my mouse reciever is registered as a gamepad.
Ideally, this would not be much of an issue, and the code should still run without errors. Although you might get unexpected controller numbers.
Currently, because the usb receiver does not have any axes, playground will crash when assuming that all controllers have 4 axes to register.
Here is an image of the devtools window at the line of code that falls over currently:
Any plans on making this installable via npm or perhaps bower?
Also, some better module (export) structure would allow the use of browserify and/or require-ing this framework.
I tried making an es6 class which extends the playground class, imported using babel (babelify) but it just doesn't work. Tho It detects NodeJS and tries require 'canvas'.
How do I change the size of ".wrappedText(...)"?
On the website a drawSprite
function is mentioned but it seems to be nowhere in the code.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.