How to Put Sprites on Top of Created Canvas ?

Post reply

❤Follow Topic(4)

0 favourites

9 posts

From the Asset Store

Create a Space Shooter Game (with free version of construct)

$3 USD

Fully commented source code/event sheet & sprites to create a space shooter game

xanderwood

rafaeltrigo
- Joined 10 Oct, 2018
- 24 topics • 169 posts
1

23 Sep, 2020
Quote

Hello All , How to Put Sprites on Top of Created Canvas ?

I can not figure it out how to do it , or if there are other way to display JS not creating canvas using any plugin like drawcanvas ?

Thanks

dropbox.com/s/bn045jxl7d4qxzm/Canvas.3cp.c3p

	let ab ;


runOnStartup(async runtime =>
{
	// Code to run on the loading screen.
	// Note layouts, objects etc. are not yet available.
	
	runtime.addEventListener("beforeprojectstart", () => OnBeforeProjectStart(runtime));
});

async function OnBeforeProjectStart(runtime)
{


globalThis.myCanvas = document.createElement("canvas")
const canvas = globalThis.myCanvas
canvas.id = 'SVGCanvas'
canvas.width = 1280;	 // set canvas size depending on resolution / performance needs
canvas.height = 700;
canvas.style.zIndex = "0"
canvas.style.position = 'absolute' // place it behind the C3 canvas
canvas.style.top = "0px"
canvas.style.left = "100px"
 // place it behind the C3 canvas*/
globalThis.ctx = canvas.getContext("2d") // get a rendering context for lottie to render to
document.body.appendChild(canvas)

function fill()
{

 var img = new Image();
 
 img.onload = function() {
 ctx.drawImage(img, 500, 300);

 };
 img.src = 'https://th.bing.com/th/id/OIP.iS-6XgJedDVGACa94S5lKAHaEK?w=290&h=180&c=7&o=5&dpr=1.25&pid=1.7';


}

fill();



 ab = runtime.objects.Sprite.getFirstInstance();
	 ab.zIndex = "1"
	 ab.position = 'absolute' 
	
	
	runtime.addEventListener("tick", () => Tick(runtime));
}

Tagged:

- AllanR
- - Joined 21 Nov, 2013
  - 5 topics • 1,429 posts
- 1
- 24 Sep, 2020
- Quote
any canvas you create will be floating above the Construct canvas (the way dom elements do - TextInput, Buttons, etc.). So you can't have sprites above, as far as I know.

but you can have javascript load images, process them and load that into a sprite.

I was working on adding a javascript program that can resample/resize images a couple weeks ago - see this thread:

https://www.construct.net/en/forum/construct-3/scripting-51/resize-image-load-sprite-154801?kws=

and this thread helped me get image data passed between javascript and Construct too:

https://www.construct.net/en/forum/construct-3/how-do-i-8/exportimport-image-clipboard-154984#forumPost1021592
- rafaeltrigo
- - Joined 10 Oct, 2018
  - 24 topics • 169 posts
- 1
- 24 Sep, 2020
- Quote
tks AllanR

My Goal is display a 3d background with babylonjs or three.js and manipulate and combine sprites on top of it like a shooting game or other 3d games and javascript particles effects too , and load 3d objects into " sprites" would be very nice aswell , I tested "Iframe" and it works fine , but I still cant put nothing on top .

some javascript projects :

construct.net/en/tutorials/create-3d-background-3d-2594
construct.net/en/tutorials/confetti-effect-javascript-2508
construct.net/en/tutorials/create-canvas-javascript-2589
Mikal
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- Mikal
- - Joined 22 Apr, 2016
  - 117 topics • 1,247 posts
- 1
- 24 Sep, 2020
- Quote
You can experiment with using my ElementQuad plugin. Here's an example. It will allow you to put your Babylon canvas anywhere in the C3 layers / order (and also add effects to it.)

construct.net/en/forum/construct-3/general-discussion-7/babylon-3d-simple-js-147886

The head is a Babylon canvas changed into a texture for C3 ElementQuad.

Check perf with your platforms of interest.
- rafaeltrigo
- - Joined 10 Oct, 2018
  - 24 topics • 169 posts
- 1
- 25 Sep, 2020
- Quote
Thanks Mikal I just figure it out , and its simple and the sprites can be on top thats amazing

Just a question , when I try to create another ElementQuad it give me an Error and everything disappear , can you have a look at this bellow ? Thanks a lot

dropbox.com/s/wnc0d6scjtrxdgs/canvasElement.3cp.c3p
- Mikal
- - Joined 22 Apr, 2016
  - 117 topics • 1,247 posts
- 1
- 25 Sep, 2020
- Quote
Looking in your project it looked like you are using an element ID that does not exist? 'ElementQa' for ElementQuad2?
- rafaeltrigo
- - Joined 10 Oct, 2018
  - 24 topics • 169 posts
- 1
- 25 Sep, 2020
- Quote
Thanks for answer , yes I create the canvas but I deleted it after the error , so I start to test from beginning and I realize that when I create a new elementquad in eventsheet it gives the error , so I left the project only with this action and disabled it , if you enable it will give an error just before creating a new canvas for elementquad2 , thanks Mikal
- Mikal
- - Joined 22 Apr, 2016
  - 117 topics • 1,247 posts
- 1
- 25 Sep, 2020
- Quote
Try using a separate ElementQuad _object_ for each canvas.

Here's an example:

gofile.io/d/OaCMdq
- rafaeltrigo
- - Joined 10 Oct, 2018
  - 24 topics • 169 posts
- 1
- 25 Sep, 2020
- Quote
Thanks for your time to answer me Mikal I dont know what I did wrong when I create the second canvas , but with your example worked like a charm , and thanks for the plugin thats amazing , construct 3 should come with it as default as anative plugin is very useful !! Know I can create an "give wings " to my imagination ...