api dessin as3Résolu

Question

Bonjour à tous.

je suis actuellement sur un chronomètre en forme de cercle pour un jeu. 

Je n'ai pas de problèmes en ce qui concerne le dessin du cercle en fonction d'un timer. 

Or maintenant faut que je prévois que le temps peut être diminué (par collision dans le jeu). Je pense qu'un exemple sera plus simple pour exposer mon problème. Il suffit de cliquer sur le btn pour voir ce qui cloche.

Lien vers l'exemple.

Comment pourrais-je faire pour remplir les vides qui se forment ? Si quelqu'un avait une piste je suis plus que preneur.

Merci

Le code de l'exemple ci-dessous :


/*___________________RENDU GRAPHIQUE TIMER_____________________*/
var _letimer:Timer = new Timer(10,15000);
var _progress:Shape = new Shape();
_progress.x = 100;
_progress.y = 100;
var _temps:int;
var _letemps:int;
var _faceSize:Number;

var txt:txtTimer = new txtTimer();
txt.x = _progress.x - 40;
txt.y = _progress.y - 53;

initClock();

function initClock(faceSize:Number = 60):void {
_faceSize = faceSize;
AfficheClock(null);
}

function AfficheClock(evt:TimerEvent):void {
addChild(txt);
txt.filters = [ombre];

addChild(_progress);
_progress.filters = [ombre];

_progress.graphics.clear();
_progress.graphics.beginFill(0xb7dd3c);
_progress.graphics.drawCircle(0,0,(_faceSize/2));

_progress.graphics.lineStyle(1.0,0xffffff,1);
_progress.graphics.drawCircle(0,0,(_faceSize/2)+1);

_progress.graphics.lineStyle(3,0xffffff,1);
_progress.graphics.drawCircle(0,0,(_faceSize/2));
_progress.graphics.endFill();

startClock(1);
}

function startClock(temps:uint):void {
_progress.graphics.moveTo(0,0);
_progress.graphics.lineStyle(2.0,0x4a7d04,1);
_progress.graphics.lineTo(0,-((_faceSize-6)/2));
_progress.graphics.endFill();

_temps = 18000;

_letimer.start();
_letimer.addEventListener(TimerEvent.TIMER, onTick);
}

var angle:Number;
var newX:Number;
var newY:Number;

function onTick(evt:TimerEvent):void {
_temps = _temps - 10;
_progress.graphics.moveTo(0,0);
angle = _temps / 18000 * Math.PI * 2;
newX = Math.sin(angle) * -((_faceSize-6)/2);
newY = Math.cos(angle) * -((_faceSize-6)/2);

_progress.graphics.lineTo(newX,newY);

if (_temps <= 0) {
_letimer.addEventListener(TimerEvent.TIMER, finTimer);
}
}

function finTimer(evt:TimerEvent):void {
_letimer.removeEventListener(TimerEvent.TIMER, finTimer);
_letimer.removeEventListener(TimerEvent.TIMER, onTick);
}

/*__________________BTN___________________*/
var monClip:MovieClip = new MovieClip();
addChild(monClip);
var bouton:Shape = new Shape();

monClip.addChild(bouton);
bouton.graphics.clear();
bouton.graphics.beginFill(0x124457);
bouton.graphics.lineStyle(2,0xb5b000);
bouton.graphics.drawRoundRect(150,150,100,60,5);
bouton.graphics.endFill();

function clique(evt:MouseEvent):void {
_temps = _temps - 1000;

if (_temps <= 0) {
_letimer.addEventListener(TimerEvent.TIMER, finTimer);
_letimer.removeEventListener(TimerEvent.TIMER, onTick);
}
}

function monClip_over(evt:MouseEvent):void {
bouton.graphics.beginFill(0xffffff);
bouton.graphics.drawRoundRect(150,150,100,60,5);
bouton.graphics.endFill();
}

function monClip_out(evt:MouseEvent):void {
bouton.graphics.beginFill(0x124457);
bouton.graphics.drawRoundRect(150,150,100,60,5);
bouton.graphics.endFill();
}

monClip.buttonMode = true;
monClip.addEventListener(MouseEvent.CLICK, clique);
monClip.addEventListener(MouseEvent.MOUSE_OVER, monClip_over);
monClip.addEventListener(MouseEvent.MOUSE_OUT, monClip_out);

pegase31 · Accepted Answer

alors soit un timer, soit un enterframe, mais pas les deux....

Pour un timer c'est simple : 

var timer:Timer = new Timer(1000, 0); //pour une sec de temps et une boucle infinie
timer.addEventListener(TimerEvent.TIMER, maFonction);
funciton maFonction(t:TimerEvent):void {
//code à déclencger à chaque timer
}
timer.start();

Voili.

un simple "timer.stop()" pour l'arrêter.

Peg'

pegase31 · Answer

Bonsoir,

Question : pourquoi dessines-tu des traits au lieu des portions de cercle ?

Il suffit de redessiner ta portion de cercle à chaque frame précédé d'un "clear()" et le tour est joué.

Peg'

Ariranha · Answer

Bonsoir,

Dis moi si j'ai tord mais si je dessine des portions de cercle comme tu dis on ne verra pas le cercle se former petit a petit mais par portion justement. D'où l'intérêt de le faire avec des traits ?


Ariranha.

pegase31 · Answer

ben si ta portion de cercle fait 12°, puis 13, 14 etc .. si ...

Peg'

Ariranha · Answer

En effet vu sous cet angle .
Des demain je teste.

Merci et bonne soirée.

Ariranha · Answer

Bonjour,

Je me suis donc dirigé vers une autre méthode, qui me permettra de gerer le cercle par son angle et donc de faire un ratio entre le temps et l'angle.

N'étant pas encore a mon aise en as3 je me retrouve confornter à un petit problème. J'ai crée une fonction "générique" que je veux par la suite appliquer a un MovieClip. En as 2 il suffisait de faire un truc du genre :

MovieClip.function(param1, param2, param3, etc.);

En as3 doit falloir passer par un addEventListener mais lequel ?

Merci et bonne journée.

pegase31 · Answer

heu .. ça dépend de ce que tu feux faire exactement.

Les déclarations de fonction en as2/3 n'ont pas changés ...

Peg'

Ariranha · Answer

J'ai le code ci-dessous, qui lors de la compilation m'affiche l'erreur suivante :

TypeError: Error #1006: tracerCercle n'est pas une fonction.
at timerJeu_v2_fla::MainTimeline/frame1()

Je pensais que cela venait de la déclaration de fonction :

secteur0.tracerCercle(angleEnRadians, rayon0, 50, "0xCC3300", 100);


//a est la mesure (en radians) du secteur angulaire
//r est le rayon du secteur angulaire 
//n représente le nombre de points utilisés pour tracer un cercle complet 
//c est la couleur en hexadécimal
//t est la transparence 

var a:Number;
var r:Number;
var n:Number;
var c:String;
var t:Number;
var rayon:Number;
var teta:Number = 0;
var dteta:Number = 2 * Math.PI / n;

var _progress:Shape = new Shape();
addChild(_progress);

function tracerCercle(a, r, n, c, t):void {	
_progress.graphics.clear();
_progress.graphics.lineStyle(0,0,0);
_progress.graphics.beginFill(c,t);
_progress.graphics.moveTo(0,0);
_progress.graphics.lineTo(rayon,0);

while (teta < a) {
var x:Number = r * Math.cos(teta);
var y:Number =  -  r * Math.sin(teta);
_progress.graphics.lineTo(x, y);
teta += dteta;
}

x = r*Math.cos(a);
y = - r*Math.sin(a);
_progress.graphics.lineTo(x,y);
_progress.graphics.lineTo(0,0);
_progress.graphics.endFill();
}

var angleEnDegres:Number = 237;
var rayon0:Number = 80;
var secteur0:MovieClip = new MovieClip();
secteur0.x = 200;
secteur0.y = 150;
addChild(secteur0);
var angleEnRadians:Number = Math.PI*angleEnDegres/180;

secteur0.tracerCercle(angleEnRadians, rayon0, 50, "0xCC3300", 100);

pegase31 · Answer

apparemment, tu essayes d'accéder à une fonction dans ton movieClip, alors qu'il vient d'être créé ...
Je ne vois pas trop ce que tu veux faire, puisque ta fonction est déclarée dans le même niveau...

Tu essayes de faire un enterframe ou quelque chose du genre ?

Peg'

Ariranha · Answer

Je t'avoue que je suis un peu perdu en as3 car en as2 j'aurais fais un truc du genre : 


MovieClip.prototype.tracerUnSecteurAngulaire = function(a, r, n, c, t) {
this.clear();
this.lineStyle(0,0,0);
this.beginFill(c,t);
this.moveTo(0,0);
this.lineTo(rayon,0);
var teta = 0;
var dteta = 2 * Math.PI / n;
while (teta < a) {
var x = r * Math.cos(teta);
var y = -r * Math.sin(teta);
this.lineTo(x,y);
teta += dteta;
}

x = r * Math.cos(a);
y = -r * Math.sin(a);
this.lineTo(x,y);
this.lineTo(0,0);
this.endFill();
};

angleEnDegres = 237;
rayon0 = 80;
this.createEmptyMovieClip("secteur0",0);
secteur0._x = 200;
secteur0._y = 150;
angleEnRadians = Math.PI * angleEnDegres / 180;
secteur0.tracerUnSecteurAngulaire(angleEnRadians,rayon0,50,"0xCC3300",100);


Et la pas de problème le clip secteur0 apparait a l'écran. 

Sinon pour répondre a ta question oui j'aurais aimé appliquer un EnterFrame par derrière au lancement d'un timer pour modifier la valeur angle. Ainsi j'aurais bien un cercle qui se forme au fur et à mesure de l'écoulement du timer.

Api dessin as3

10 réponses

Votre réponse

Discussions similaires