Link to .capx file (required!):

9-patch-cocoonjs.capx

CocoonJS export:

9patch-cocoonjs.zip

Steps to reproduce:

1. insert a 9patch object

2. set edges and fill to tile

3. export for cocoonjs

Observed result:

black patches, and if some layer are used it can appear transparent as well

Expected result:

the same as in edit time and desktop export

Browsers affected:

cocconjs launcher

compiled apk

Operating system & service pack:

Sony XPERIA with Android version 4.1.2

Construct 2 version:

138.2

Magistross: that's what Ash asked in the spec. But here is what I think:

if you use an off-DOM canvas (what you call buffering which is rather caching I think), you will have to use an extra bit of memory for that, and then you still have to draw the resulting big image.

So the question is: what is faster? drawing many little small images, or a big one?

I don't have the answer to that, that's probably a good test to run on jsperf (maybe if I have time and motivation when I'm back home...)

Also how much place the big off-DOM canvas will take in memory can be a big problem.

And all that is really hypothetically intersting for canvas2D. In webGL, drawing textured polygons should be pretty super fast and way more interesting than rendering a big fat texture that would sit in your memory.

So yeah, the simple answer is that it's a trade off between memory and cpu use. Here Ash prefered lowering memory use.

Little explanation about how the spritefont plugin works:

First when the plugin gets loaded, it creates a list of all the clipping coordinates for all the characters.

Then on the first draw, or each time the text changes or each time the object's width changes, the plugin will calculate the word wrapping (splits the text in lines according to wrapping method, size of the object, etc)

Then it will draw each letter the same way a sprite is drawn (taking care of horizontal and vertical alignement for you):

- in canvas2D mode, using the context.drawImage() function

- in webGL mode by building quads that c2 uses to pass to the default rendering shader along with the texture.

What you have to keep in mind is that each time the text needs to be drawn on the canvas, whether it's webGL or canvas2D, each letter will have to be redrawn.

It means, that will happen each time your text moves, each time the text is modified and, I think, each time any object gets on top or underneath your text.

So if you have a constantly scrolling game (like bit trip runner), your spritefont text will be redrawn each tick.

Drawing a lot of characters one by one can end up being quite expensive in canvas2D. In WebGL you can just think that one character costs 2 triangles (think 3D rendering) so you'll probably have 200 triangles for a 100 character text. Which should be ok in most devices... I think.

Also, any characters not in your character set will be drawn as a nothing, it will just offset the next character's drawing, creating a space.

So basically, i'm saying that spaces should more or less cost nothing (unless you put a space in your character set... which you shouldn't do (:

'm going to have a lot of these sprites in my game at once, so it'd be nice if I didn't have to compute distance between all of them each tick. I thought the overlaps on offset was perfect, but I guess not?

I'm honestly not sure that overlap is less expensive than distance checking.

To check the distance between two points, the formula is (and it's what c2 use):

distance(xa,ya,xb,yb) = sqrt((xa-xb)^2 + (ya-yb)^2)

(xa-xb)^2 + (ya-yb)^2 <  someDistance^2

If you want some thing more complex, like having any shape constrained inside any other shape, it becomes more complex.

It would be slightly easier if we had access to the position of the collision polygon's vertices.

Then we could do some math ourself to check if one of the point of the dragged object is outside of the constraining shape.

Then it would be a matter of keeping in memory the previous position of the object and interpolating between this position and the position the object would be if there were no constraint by running a loop to approximate the position the shape should be to stay within the constraints.

Using multiple objects to build the constraining area would be a possible solution but, to me, it would look quite messy to set up.

something like that?

squareConstraint.capx

Ashodin

usually if you want to know the format of the JSON used by a plugin, you just have to do

on start of layout
   -> add data in object
   -> add data in object
   -> add data in object
   -> download JSON

Magistross

Indeed... But very bad Idea :D

In Canvas 2D, the spritefont plugin would draw each tile one by one (almost as bad as using tonnes of sprite directly)

Whereas you usually want to use context.createPattern() to make something tile (that's what the tiledbg plugin uses)

In WebGL the spritefont plugin would draw a quad for each repetition (faster than canvas2D, but still).

Whereas you would probably just wrap a texture on a big quad.

Knowing that the major bottleneck in html5 is the rendering... bad idea =)

And in both cases, using createPattern (canvas2D) or a big texture (WebGL) you would avoid seaming issues.

Personnally, I made a quick test on JSBin and animating a tiled bg using image frames should be possible.

http://jsbin.com/aqowin/2 (tested with canvas2D)

I'm not sure though how much strains it puts on performances. But any cases, redrawing big chunks of screen (and tilebg are more likely to be big objects) is expansive.

I'm not entirely sure why tiled background aren't animatable, but I would bet on the "big todolist" syndrom =)

And well... you can always emulate animated tiledbg by using many objects and alternating their visibility. (I did that once)

hmmm I'm not sure what you exactly want, but if you can somehow generate a word list using php/python/java

You just have to follow this structure:

{
   "c2dictionary":true,
   "data":{
      "key1":"value1",
      "key2":"value2",
      "key3":"value3"
   }
}

Hi,

I'm using tilebackground a lot these days and almost every time I create a "textureWidth" variable and manually set it.

I use it for tiledbg-based healthbar and also some kind of infinite background scrolling.

So the suggestion would be to get this value in expression the same way you have ImageWidth and ImageHeight in the sprite plugin.

This way if I update the texture and it has another dimension, I don't have to keep track of this variable.

Hi, there

It would be nice that in the "Acquire target" and "Add object to target" action of the turret behavior, we could set an imagepoint to follow.

Because I have the habit to put the origin of my platformer characters on the bottom, and my shooting enemies are targetting the feet.

For now, I can probably solve that by adding an object which follows the center of the player and target that object.

But being able to use the image point would probably be cleaner and make more sense.

Ah so the text object isn't the problem here

Maybe that can help: http://www.w3schools.com/xml/xml_encoding.asp