Bienvenue visiteur !
|
Statistiques
Liste des membres
Contact
Mentions légales
549 connectés actuellement
29754922 visiteurs depuis l'ouverture
4556 visiteurs aujourd'hui
Partenaires
Tous nos partenaires
Devenir partenaire
|
TFK -
posté le 29/01/2012 à 00:20:33 (6 messages postés)
| | Bonjour à tous, j'ai découvert assez récemment RM et comme je suis dev et que je souhaite créer un petit jeu avec, j'ai commencé à écrire quelques petits scripts.
Voici un script qui vous permet de faire une barre simple :
V 0.1
-début du script
V 0.2
-pleins de petits bugs corrigés
-quelques optimisation
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
class Bar
attr_accessor :value
attr_accessor :x
attr_accessor :y
attr_reader :width
attr_reader :height
attr_accessor :colors
attr_accessor :background_color
attr_reader :border_color
def initialize(x, y, width, height, colors, borderColor, backgroundColor, value)
@x = x
@y = y
@width = width
@height = height
@colors = colors
@border_color = borderColor
@background_color = backgroundColor
@value = value
@last_value = nil
@border = nil
@content = nil
end
def refresh()
unless @border
@border = Sprite.new
@border.bitmap = generate_border(@border_color)
@border.opacity = 255
@border.ox = 0
@border.oy = 0
end
unless @content
@content = Sprite.new
@content.opacity = 255
@content.ox = 0
@content.oy = 0
end
@border.x = @x
@border.y = @y
@content.x = @x + 1
@content.y = @y + 1
unless @last_value == @value
@content.bitmap = generate_content()
@last_value = @value
end
end
def generate_border(color)
border = Bitmap.new(@width, @height)
y = 0
while(y < @height)
# left border
border.set_pixel(0, y, color)
# right border
border.set_pixel(@width - 1, y, color)
y += 1
end
x = 1
while(x < @width)
# up border
border.set_pixel(x, 0, color)
# down border
border.set_pixel(x, @height - 1, color)
x += 1
end
return border
end
def generate_content()
width = @width - 2
height = @height - 2
val = (@value.to_f / 100)
content = Bitmap.new(width, height)
# Gets the color according to the value of the bar.
value = @value.to_f / 100 * @colors.length
while(value.floor > @colors.length - 1)
value -=1
end
while(value.floor < 0)
value += 1
end
color = @colors[value.floor]
# Fills the bar with the appropriate color
x = 0
while(x < width)
column_color = color
if(x > width * val)
column_color = @background_color
end
y = 0
while(y < height)
content.set_pixel(x, y, column_color)
y += 1
end
x += 1
end
return content
end
end
|
Il est très simple à utiliser et ne requiert aucune image.
Pour créer votre barre, il suffit de créer un objet Bar comme suit:
1
| my_bar = Bar.new(x, y, width, height, colors, border_color, background_color, value |
Avec
x = x du coin supérieur gauche de la barre
y = y du coin supérieur gauche de la barre
width = largeur de la barre (attention: 2px sont utilisés pour la bordure)
height = hauteur de la barre (attetion: 2px sont utilisés pour la bordure)
colors = un tableaudes couleurs de la barre (voir plus bas pour explications)
border_color = la couleur de la bordure (sous forme d'un Color)
background_color = la couleur de fond de la barre (uniquement visible sur la partie non remplie)
value = la valeur de la part, doit être entre 0 et 100 (inclus)
Le tableau de couleurs (colors) est utilisé pour changer la couleur de la part en fonction de sa valeur. Si il ne contient qu'une seule couleur, le remplissage se fera toujours avec celle-ci, si il contient deux couleurs, le remplissage se fera avec la première en dessous de 50% et avec la seconde au dessus, avec trois couleurs, la première sera utilisée entre 0 et 33%, la seconde lorsque la valeur dépasse 33% et la troisième lorsqu'elle dépasse 66%.
Quelques images avec une barre à 3 couleurs (rouge, jaune-vert, vert)
Il reste encore pas mal d'optimisation à faire, mais l'idée est là.
De nombreuses améliorations sont prévues notamment pour permettre via une autre classe de changer la façon dont la border et le contenu sont créés ainsi que pour permettre l'utilisation d'images pour créer des barres personnalisées & performantes très facilement.
|
leicsirg -
posté le 29/01/2012 à 00:30:10 (830 messages postés)
| | ça à l'air bien mais je dis ce que tout le monde va dire:
c'est facilement réalisable en évents, et en plus on peut mettre de plus jolies images, après l'avantage est niveau poids, mais on va pas se traccasser pour un png.
|
Livestreamz | FACTIONS: l'appel aux armes |
Alkanédon -
posté le 29/01/2012 à 00:53:58 (8291 messages postés)
- - | Citoyen d'Alent | *facepalm*
Il a dit que ça fonctionnait SANS image justement...
|
Mes musiques |
Sylvanor -
posté le 29/01/2012 à 00:55:52 (24645 messages postés)
- | Le gars chiant qui rigole jamais (il paraît) | C'est précisément ce que dit Leicsirg, qu'au final cet avantage de ne pas utiliser un png, ne servait pas à grand chose vu qu'un png ça pèse pas lourd.
Mais après pourquoi pas. Ca pourra aider ceux qui ne sont pas familiers avec les évènements.
|
Les croissants croâssent en croix, s'ancrent ou à cent croîssent sans crocs à sang. Crois! Sens! ౡ |
Alkanédon -
posté le 29/01/2012 à 00:58:03 (8291 messages postés)
- - | Citoyen d'Alent | Certes, j'ai lu trop vite, au temps pour moi
Sinon oui, c'est sympa, aussi bien au niveau de base (pour le code), comme moi par exemple ça me permet de comprendre certains trucs basique
|
Mes musiques |
Tata Monos -
posté le 29/01/2012 à 07:25:38 (28 messages postés)
| Compte Non utilisé | Citation: Mais après pourquoi pas. Ca pourra aider ceux qui ne sont pas familiers avec les évènements. |
Disons aussi que sur XP/VX/Ace, c'est bien de passer par un script pour c'est choses la, car ça évite plutôt de sortir la rame pour avancer dans le jeu si il y a d'autre truc à coté. C'est le problème des trois logs.
|
TFK -
posté le 29/01/2012 à 08:32:06 (6 messages postés)
| | Merci pour vos réponses,
je suis tout à fait d'accord avec le fait que la barre générée n'est pas très belle et que l'intérêt n'est pas flagrant.
Mais si dans votre jeu vous voulez faire une barre d'hp, une barre de mana, une barre d'xp, vous allez avoir déjà 3 events à faire (il me semble qu'ils ne sont pas rès performants d'ailleurs), 3 images à charger, gérer l'évolution de la barre px par px, soit en chargeant une image de 1px de long, soit en décalant sur le côté de l'écran (et là si votre barre d'xp est au milieu de l'écran, c'est le dawa).
Alors qu'en faisant:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
red_to_green = [Color.new(255, 0, 0, 255), Color.new(128, 128, 0, 255), Color.new(0, 255, 0, 255)]
blues = [Color.new(0, 0, 196), Color.new(0, 0, 255)]
purple = [Color.new(160, 32, 240)]
background = Color.new(128, 128, 128, 196)
border = Color.new(255, 255, 255, 255)
@hp_bar = Bar.new(20, 20, 180, 27, red_to_green, border, background, 100)
@mana_bar = Bar.new(20, 48, 150, 27, blues, border, background, 40)
@xp_bar = Bar.new(20, 76, 150, 17, purple, border, background, 60)
|
et dans un Update,
1
2
3
4
5
|
@hp_bar.refresh
@mana_bar.refresh
@xp_bar.refresh
|
En gros, si on ne compte pas les couleurs, ça prend 1 ligne par barre + 1 ligne pour refresh, ce qui permet de faire des barres très vite sans avoir à ouvrir photoshop ou autre.
Le résultat:
Je vais encore travailler sur cette classe (pour que les barres aient un meilleur design).
Il y a aussi quelques bugs que je corrige en ce moment
|
Alkanédon -
posté le 29/01/2012 à 10:33:21 (8291 messages postés)
- - | Citoyen d'Alent | Et par simple curiosité, tu peux faire suivre une barre sur un chemin ? Par exemple au lieu que ce soit une barre simple, un cercle ?
|
Mes musiques |
TFK -
posté le 29/01/2012 à 10:48:58 (6 messages postés)
| | Tout est réalisable en programmant
Après, c'est moins simple.
Est-ce qu'il existe une method dans RGSS pour dessiner des cercle ou je dois l'implémenter aussi ?
|
Nagato Yuki -
posté le 29/01/2012 à 11:12:38 (351 messages postés)
| | Si les barres ne sont pas très belles, pourquoi ne pas utiliser un PNG pour la barre et les couleurs et créer un bitmap grâce à celui-ci selon les dimensions donnés et faire des stretch_blt pour le dessin de celle-ci ?
Ça ne fais pas 500 PNG pour une barre, si vous en avez 500 c'est que soit la barre est très complexe (elle change en fonction du contenu par exemple plus de HP elle deviens triangulaire fin je dis des conneries là :B), soit vous avez créé une barre pour chaque pourcentages de celle ci alors que c'est faisable avec une seule image. Sur l'image en haut on met la barre qui aura une forme spécifique avec un contenant rectangulaire (contenant : là où l'avancement sera collé). Sur la partie du bas on met le contenu qui prendra un certaine taille en largeur et la taille qu'il reste entre la fin de l'image en hauteur et la fin de l'espace pris par la barre en hauteur.
Au final, il restera plus qu'à initialiser Bar avec les paramètres suivant :
Bitmap : Image de la barre
Bar_height : Hauteur de la barre
Cnu_width : Largeur du contenu si vous le faites avec trois pixel ça feras 33% pour chaque couleurs et le script adapteras en fonction de ça.
Cnt_x : Position x de collage du contenant dans la barre
Cnt_y : Position y de collage du contenant dans la barre
Cnt_width : Largeur du contant dans la barre
Le reste sera calculé, et le script créera deux sprites : Barre et Contenant, la barre aura le droit à un src_rect pour éviter de voir la palette de couleurs et le contenant sera l'objet rafraichis en fonction de ce qu'on demande.
|
Pokémon Workshop, le site de Making Pokémon sur RPG Maker~ |
TFK -
posté le 29/01/2012 à 12:02:10 (6 messages postés)
| | @Nagato Yuki: c'est ce qui est prévu, mais pour l'instant, l'idée d'une progress bar circulaire m'intéresse pas mal.
Voici la classe que j'ai implémenté avec des methods static pour dessiner des cercles facilement:
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
|
class Circle
def self.draw_circle(r, color, bitmap,x_center, y_center)
x = 0
y = r
d = r - 1
while(y >= x)
bitmap.set_pixel(x + x_center, y + y_center, color)
bitmap.set_pixel(y+x_center, x+y_center,color)
bitmap.set_pixel(-x+x_center, y+y_center, color)
bitmap.set_pixel(-y+x_center, x+y_center, color)
bitmap.set_pixel(x+x_center, -y+y_center, color)
bitmap.set_pixel(y+x_center, -x+y_center, color)
bitmap.set_pixel(-x+x_center, -y+y_center, color)
bitmap.set_pixel(-y+y_center, -x+y_center, color)
if(d >= 2 * x)
d = d - 2 * x - 1
x+=1
elsif(d <= (2 * r - y))
d = d + 2 * y - 1
y-=1
else
d + 2 * (y - x - 1)
y = y -1
x +=1
end
end
return bitmap
end
def self.draw_circle_t(r, thickness, color, bitmap, x_center, y_center)
x = 0
while(x < thickness)
bitmap = Circle::draw_circle(r - x, color, bitmap, x_center, y_center)
x+=1
end
return bitmap
end
def self.draw_circle_d(inner_r, outer_r, inner_color, outer_color, bitmap, x_center, y_center)
bitmap = Color::draw_circle(inner_r, inner_color, bitmap, x_center, y_center)
bitmap = Color::draw_circle(outer_r, outer_color, bitmap, x_center, y_center)
return bitmap
end
end
|
L'algo utilisé vient de là: [url]http://fr.wikipedia.org/wiki/Algorithme_de_trac%C3%A9_de_cercle_d'Andres[/url] .
|
Åvygeil -
posté le 29/01/2012 à 12:02:41 (2502 messages postés)
| | Mouais. Ya quand même de gros problèmes dans ce script.
Déjà avec les seules indications que tu donnes, personne ne saura rafraîchir les barres. Il faut impérativement regarder le code pour savoir comment faire.
Médite là dessus.
Sinon, un script maison pour tracer des cercles...
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
|
#===============================================================================
# *** Draw Arc
#-------------------------------------------------------------------------------
# Auteur : Åvygeil
#-------------------------------------------------------------------------------
# Ce script permet de tracer des arcs de cercle dans les fenetres.
#===============================================================================
#===============================================================================
# ** Window_Base
#===============================================================================
class Window_Base < Window
#=============================================================================
# * draw_arc
# x, y : coordonnées du centre du cercle
# radius : rayon du cercle
# angles : angles de début et de fin
# thickness : épaisseur
# color : couleur
#-----------------------------------------------------------------------------
# Méthode pour tracer des arcs de cercle
#=============================================================================
def draw_arc(x, y, radius, angles, thickness, color)
for angle in angles
0.upto(thickness) do |t|
_x = (radius+t) * Math.cos(angle*Math::PI/180) + x
_y = (radius+t) * Math.sin(-angle*Math::PI/180) + y
self.contents.set_pixel(_x, _y, color)
end
end
end
#=============================================================================
# * draw_circle
# x, y : coordonnées du centre du cercle
# radius : rayon du cercle
# thickness : épaisseur
# color : couleur
#-----------------------------------------------------------------------------
# Méthode pour tracer des cercles
#=============================================================================
def draw_circle(x, y, radius, thickness, color)
draw_arc(x, y, radius, 0..360, thickness, color)
end
end
|
|
TFK -
posté le 29/01/2012 à 12:04:57 (6 messages postés)
| | Pour rafraichir la barre, il suffit d'appeler la method refresh, je pense que c'est plutôt évident.
Le changement de contenu se fait au besoin dans la method refresh si "value" a changé.
Il faudrait comparer les perfs de ton algo avec celui d'Andres, car le tiens utilise des cos/sin, des flotant, etc..
|
Åvygeil -
posté le 29/01/2012 à 12:11:29 (2502 messages postés)
| | Citation: Le changement de contenu se fait au besoin dans la method refresh si "value" a changé. |
Oui, mais si tu n'indiques pas justement comment changer "value", les gens ne vont pas le deviner. Des
1
| ma_barre.value = une_nouvelle_valeur |
j'en ai vu NULLE PART dans tes explications.
Réveille toi vieux.
En plus le "au besoin" est RISIBLE.
1
| unless @last_value == @value |
??????
C'est bien, @last_value est tout le temps égal à nil.
Donc ça sert à rien.
Non mais franchement, réfléchis un brin avant de poster.
Si je dis qu'il y a des problèmes, c'est qu'il y a des problèmes.
|
TFK -
posté le 29/01/2012 à 12:16:36 (6 messages postés)
| | Citation: j'en ai vu NULLE PART dans tes explications.
Réveille toi vieux.
|
Tu as tout à fait raison, pour quelqu'un qui ne connaîtrait rien à Ruby il n'y aurait aucun moyen de le remarquer.
Le
ne doit pas parler à tout le monde.
Il faut que je commente le code correctement, mais je ne sais pas trop quelles sont les best practices pour commenter en ruby, si tu connais un lien qui l'explique je serais très intéressé.
Citation: C'est bien, @last_value est tout le temps égal à nil.
Donc ça sert à rien. |
Merci de l'avoir signalé, je n'avais pas remarqué cette erreur, c'est corrigé.
|
Erwsaym -
posté le 29/01/2012 à 12:22:57 (137 messages postés)
| | Pas mal , tu peut encore perfectionner ton script...
Pourquoi pas rajouter des options comme par exemple la gestion d'image , mettre du texte a coter changer le bord de la jauge (en image notamment).
|
Nagato Yuki -
posté le 29/01/2012 à 12:37:33 (351 messages postés)
| | Bah si tu veux d'occuper des cercle je passe le script que j'ai fait alors :B avec les image selon ce que j'ai dit :
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| module Yuki
class Bar
def initialize(bmp,bh,uw,cx,cy,cw,viewport=nil)
raise("Erreur, le bitmap fourni n'est pas de la bonne classe.") if bmp.class != Bitmap
@sp_bar=Sprite.new(viewport) unless @sp_bar
@sp_bar.bitmap=bmp
@sp_cnt=Sprite.new(viewport) unless @sp_cnt
@sp_bar.src_rect.height=
@bh=bh.to_i #Bar Height
@uw=uw.to_i #Cnu Width
@cx=cx.to_i #Cnt x
@cy=cy.to_i #Cnt y
@cw=cw.to_i #Cnt Width
@av=0 #Avancement
@am=1 #Avancement Max
@sp_cnt.bitmap.dispose if @sp_cnt.bitmap
@sp_cnt.bitmap=Bitmap.new(@cw,@sp_bar.bitmap.height-@bh)
@src_rect ? @src_rect.set(0,@bh,1,@sp_cnt.bitmap.height) : @src_rect=Rect.new(0,@bh,1,@sp_cnt.bitmap.height)
@dest_rect ? @dest_rect.set(0,0,1,@sp_cnt.bitmap.height) : @dest_rect=Rect.new(0,0,1,@sp_cnt.bitmap.height)
self.x=x();self.y=y()
@disposed=false
refresh()
end
def refresh()
return if @disposed
av_prc=@av.to_f/@am
@src_rect.x=(av_prc*@uw).to_i
@src_rect.x=@uw-1 if @src_rect.x>=@uw
@dest_rect.width=(av_prc*@cw).to_i
@sp_cnt.bitmap.clear
@sp_cnt.bitmap.stretch_blt(@dest_rect,@sp_bar.bitmap,@src_rect)
end
def x()
return @sp_bar.x
end
def y()
return @sp_bar.y
end
def z()
return @sp_bar.z
end
def viewport()
return @sp_bar.viewport
end
def x=(v)
@sp_bar.x=v
@sp_cnt.x=v+@cx
end
def y=(v)
@sp_bar.y=v
@sp_cnt.y=v+@cy
end
def z=(v)
@sp_bar.z=v
@sp_cnt.z=v+1
end
def reinitialize(bmp,bh,uw,cx,cy,cw)
initialize(bmp,bh,uw,cx,cy,cw)
end
def set_avancement(v)
@av=v.abs.to_i
end
def set_avancement_max(v)
@am=v.abs.to_i if v!=0
end
def get_avancement()
return @av
end
def get_avancement_max()
return @am
end
def dispose()
@disposed=true
@sp_bar.dispose
@sp_bar=nil
@sp_cnt.bitmap.dispose
@sp_cnt.dispose
@sp_cnt=nil
end
end
end |
L'utilisation est simple, pour créer la barre il faut faire :
var=Yuki::Bar.new(Bitmap,Bar_height,Cnu_width,Cnt_x,Cnt_y,Cnt_width,viewport)
Avec les informations suivante :
Bitmap : Image de la barre
Bar_height : Hauteur de la barre
Cnu_width : Largeur du contenu si vous le faites avec trois pixel ça feras 33% pour chaque couleurs et le script adapteras en fonction de ça.
Cnt_x : Position x de collage du contenant dans la barre
Cnt_y : Position y de collage du contenant dans la barre
Cnt_width : Largeur du contant dans la barre
viewport : Viewport des sprites, optionnel
On peut réinitialiser la classe mais sans viewport.
Les méthodes sont :
x(),y(),z() pour obtenir les positions
x=(v),y=(v),z=(v) pour modifier les positions avec v étant un réel.
set_avancement(v) pour modifier l'avancement avec v étant un entier positif.
set_avancement_max(v) pour modifier le maximum de l'avancement avec v étant un entier positif non nul.
get_avancement() et get_avancement_max() sert à les obtenir.
dispose() même effet que Sprite ou presque
Je n'ai pas vraiment poussé dans les méthodes c'est juste un barre en image basique donc bon c'est pas aussi complet que Sprite ou autre.
Voici un exemple avec les images :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $bar=Yuki::Bar.new(Bitmap.new("0.png"),6,12,12,1,39)
$bar.x=60
$bar.y=10
$bar.z=1024
$bar.set_avancement_max(100)
101.times do |i|
$bar.set_avancement(i)
$bar.refresh()
Graphics.update
end
$bar.reinitialize(Bitmap.new("1.png"),24,48,48,4,156)
$bar.set_avancement_max(100)
101.times do |i|
$bar.set_avancement(i)
$bar.refresh()
Graphics.update
end
$bar.set_avancement(0)
$bar.refresh
Graphics.wait(10)
$bar.dispose |
0.png :
1.png :
|
Pokémon Workshop, le site de Making Pokémon sur RPG Maker~ |
Erwsaym -
posté le 04/02/2012 à 13:44:16 (137 messages postés)
| | J'utiliserer bien ton script plus tard
| Index du forum > Généralités > Un petit script pour faire des barres facilement
|
|
|