rezoner / canvasquery Goto Github PK

Cannot disable context menu for right click.

drawAtlasFrame(atlas, frame, x, y) does not use the input x,y coordinates and draws always in 0,0

add

var self = this.tempContext || this;

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

(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.

I noticed that the there isn't functionality for the Keyboard.prototype.keypress event,
is this intentional/incomplete?

How do I change the size of ".wrappedText(...)"?

cq.loadImages can not to use！

Version 0.9.1 is on your website but is not here. Shouldn't this be updated from 0.8.4?

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'.

On the website a drawSprite function is mentioned but it seems to be nowhere in the code.

http://i.imagebanana.com/img/qi6m1bs0/Selection_116.png

kthx

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.

Same as in CSS

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.

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?):

• texture atlas
• fixed grid
• scale, rotation, align
• DURATION

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
};

• What about loops?
• What about events? (state finished) - useful for coupling with game logic

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

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.

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

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.

Do you have a link to anymore demos or tutorials for your framework?

[email protected]

David Shaw

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); // <------ !!!
  }
});

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.

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 👍

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:

Convert value to alpha for byte array

It would be nice if there was a way to flip sprites horizontally/vertically.

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.

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.

Every single one of them