Afficher l'image d'un objet citrouille ;)

Version imprimable

Bonjour, je voudrais créer un objet, ça je sais faire, mais lui attribuer une image seulement après le chargement du body dans une fonction init().
Mais mon image de l'objet ne s'affiche pas :/
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var image1=new Image(); var monobjet=new CObjet(image1,100,200); // <----- PX et PY function init(){ // Image à charger pour l'objet. image1.src='img/citrouille.png'; image1.onload=function(){ monobjet.Image=image1; } ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY); }

15/06/2023, 09h39
Archimède

Salut, Il faudrait pouvoir regarder du côté de ta classe Cobjet si ton setter image est correct...
Après, tu développes une classe avec les positions de ton image dans son container et tu fais un context.drawImage() qui te positionne cet objet sur le canvas... Curieux comme démarche... Il y a un souci...

Merci ;)

Quand je fais ça, l'image s'affiche :

Code:

1
2
3
4
5
6
7
8
9
10
// j'ajoute ça à la fin de la fonction init()
var animtimer=requestAnimationFrame(anime);
 
// Et ça c'est hors de la fonction init(), je l'ai mis bien au-dessus de la fonction init().
function anime(timestamp){
 
    ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY);
 
    animtimer=requestAnimationFrame(anime);
}

Ah c'est vrai ce que tu dis pour le PX,PY ils me servent à stocker la position de la citrouille.
il y a mieux à faire ?

EDIT :

Je le déclare comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
class CObjets{
	constructor(Image, PX, PY, With, Height, Nom){
	this.Image=Image;
        this.PX=PX;
        this.PY=PY;
        this.Width=Width;
        this.Height=Height;
	this.Nom=Nom;
 
}

Je veux faire un jeu avec une ferme et des légumes.

15/06/2023, 10h03
Archimède

Quand appelles-tu ta fonction init() dans le onload ?

Code:

window.addEventListener("load",init)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
</body>
 
</html>
 
<!-- Initialisation de quelques variables. -->
<script>
        var ctx1 = document.getElementById('ecran1').getContext('2d');
</script>>
 
 
<script type="text/javascript">
        window.onload=function(){init();};
</script>

15/06/2023, 10h10
Archimède

Tu as placé ta fonction init() avant ton événement load ?

J'ai fais comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
 
<html lang="fr">
 
<head>
 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link href="css/maferme.css" rel="stylesheet" type="text/css" >
	<script type="text/javascript" src="js/maferme.js"></script>
 
	<title>LaFerme Ver1.0</title>
 
 
<!--
Jeu de gestion d'une ferme.
Titre provisoire.
-->
 
</head>
 
<body>
 
	<div id="contener">
 
        <!-- Affichage des points, à voir... -->
 
        <!-- Affichage de la barre de menu -->
 
        <!-- Affichage du Calendrier -->
        <div id="calendrier">
 
            <!-- Affichage de l'année virtuelle. -->
 
            <!-- Affichage du mois virtuel. -->
 
            <!-- Affichage de la semaine virtuelle. -->
 
            <!-- Affichage du jour virtuel. -->
 
            <!-- Affichage de l'heure virtuelle. -->
 
        </div>
 
        <!-- Ecran d'affichage de l'image de fond. -->
		<canvas id="ecran1"></canvas>		   
 
        <!-- Ecran d'affichage des objets "plante".  -->
        <canvas id="ecran2"></canvas>
 
    </div>
</body>
 
</html>
 
<!-- Initialisation de quelques variables. -->
<script>
        var ctx1 = document.getElementById('ecran1').getContext('2d');
</script>>
 
 
<script type="text/javascript">
        window.onload=function(){init();};
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* ****************** CLASSES ****************** */
 
class CObjets{
	constructor(Image, PX, PY, With, Height, Nom){
	this.Image=Image;
        this.PX=PX;
        this.PY=PY;
        this.Width=Width;
        this.Height=Height;
	this.Nom=Nom;
 
}
 
 
/* ******************* VARIABLES **************** */
 
var image1=new Image();
 
X1,X2,Y1,Y2=0;
menu=False;
 
 
var monobjet=new CObjet(image1,100,200); // <----- PX et PY
 
 
 
/* ************** FONCTIONS *************** */
 
function anime(timestamp){
 
    ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY);
 
    animtimer=requestAnimationFrame(anime);
}
 
 
function init(){
 
    // Image à charger pour l'objet.
    image1.src='img/citrouille.png';
 
    image1.onload=function(){
        monobjet.Image=image1;
    }
 
    var animtimer=requestAnimationFrame(anime);   
}

Je sais plus ce que j'ai changé, maintenant l'image s'affiche plus, avant elle s'affichait dans la boucle anim

RESOLU !!!!

J'avais oublié de remettre les largeurs et hauteurs du canvas dans la fonction init().
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 /* ****************** CLASSES ****************** */ class CObjet{ constructor(Image, PX, PY, Width, Height, Nom){ this.Image=Image; this.PX=PX; this.PY=PY; this.Width=Width; this.Height=Height; this.Nom=Nom; } } /* ******************* VARIABLES **************** */ var largeur=screen.width; var hauteur=screen.height; var image1=new Image(); var X1,X2,Y1,Y2=0; var menu=false; var monobjet=new CObjet(image1,100,200); // <----- PX et PY /* ************** FONCTIONS *************** */ function anime(timestamp){ ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY); animtimer=requestAnimationFrame(anime); } function init(){ ecran1.width=largeur; ecran1.height=hauteur; ctx1.width=largeur; ctx1.height=hauteur; image1.onload=function(){ monobjet.Image=image1; } // Image à charger pour l'objet. image1.src='citrouille.png'; var animtimer=requestAnimationFrame(anime); }
Mais j'aurais bien voulu savoir comment on fait pour charger une image sur l'objet aprés qu'il a été créé, parce que je crée l'objet en début de page JS et ensuite je voudrais y mettre son image à partir du init(). Alors je vais faire un autre sujet puisque celui-ci est résolu.

Merci ;)