Skip to main content

On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Possible issue with arc rendering and radial gradients in itch app canvas?

A topic by RedMarsDigital created Jan 28, 2018 Views: 514 Replies: 4
Viewing posts 1 to 4
(1 edit)

My project https://redmarsdigital.itch.io/baronbackslash uses a series of html canvas context methods to render weapon 'swipes' in-game:

  • .moveTo
  • .beginPath
  • .arc
  • .lineTo
  • .closePath
  • .createRadialGradient
  • .addColorStop (x2)
  • .fill

The coloured arcs this series of methods creates are rendered fine in Chrome, Firefox and Opera (nb I'm not supporting IE at all), but are not being rendered at all in the itch app. As far as I can see everything else in the game displays fine and is working perfectly in the app. 

For reference - screenshot from Chrome:   ...and the equivalent from the app: 

This isn't entirely a game-breaker, but there is a rock-paper-scissors 'elemental' aspect to weapons / creatures, where different elemental attacks display as different colour swipes - so if this visual cue is absent it does have a signifcant impact on the game.

Any ideas anyone? Thanks in advance.

Also, apologies if this isn't where I should be posting this sort of issue, I'm pretty new here :)

Admin(+2)

This is the right place to post. The app could be using a older version of chromium than what your desktop browser is. This looks like a standard API though so I can't imagine why it wouldn't work.

(+3)

Solved the mystery!

Here's a sample of your code:

var origin_x = attack.attacker.position.x - game.viewport_offset_x;
var origin_y = attack.attacker.position.y - game.viewport_offset_y;
if(attack.attackPositionOffset) {
  origin_x += attack.attackPositionOffset.x;
  origin_y += attack.attackPositionOffset.y;
}
attackCtx.moveTo(origin.x,origin.y);

As you can see, the first `moveTo` call refers to `origin.x`, but the actual variable you want is `origin_x`.

On the website, there's a variable in the global scope named `origin` (which contains the hostname the game is served from) - so it just calls `moveTo(undefined, undefined)` (since `origin` doesn't have properties named `x` and `y`).

On the app, there's no `origin` variable in the global scope - so it throws, and the other calls don't go through.

You can see by yourself by pressing Shift+F12 while the game is running in the app:


(+2)

Oh man, I knew it would be something fishy in my code rather than your excellent app! No idea how that slipped through. Thanks so much for posting back and sorry to waste your time! Owe you one :)

Haha, it's no problem! Thanks for your unwavering faith and keep posting lovely reports!