Sujets sur : Bitmap

Cours ActionScript 3 ‘Bitmap’

Améliorer les performances Flash sous iPhone / Android avec Convert Text to Bitmap

Commentaires fermés sur Améliorer les performances Flash sous iPhone / Android avec Convert Text to Bitmap

Ecrit le 11 mai par Matthieu
Publié dans le(s) sujet(s) Android |iPhone

Et on continue dans la série de tutoriels consacrés au développement flash pour les iPhone, Android avec Adobe AIR.

Ce cours ActionScript est axé sur l’amélioration des performances des applications flash iPhone, Android.

C’est un fait, l’utilisation de textes dynamiques (les fameux TextField) dégrade les performances sur smartphones !

Il est donc important de trouver une alternative au TextField. Le texte est pratique pour afficher un score dans un jeux flash par exemple.

Et voici une classe qui permet de convertir automatiquement un TextField en images Bitmap.

Et ainsi, booster les performances de vos jeux flash pour iPhone et Android !

Text Bitmap

La version TextField et la version Bitmap sont quasiment identiques. Aucune différence à l’oeil nu sur un smartphone.

Il est possible de choisir l’alignement du texte : gauche, droite et centré.

L’affichage de textes multilignes n’est pas encore possible.

Cette classe prend en charge uniquement l’affichage de ligne simple.

Utilisation de BitmapText

Voici le constructeur de la classe BitmapText.

[codesyntax lang= »actionscript3″ title= »BitmapText.as » bookmarkname= »BitmapText.as »]

public function BitmapText(thisField:TextField,thisAlphabet:Object =null, thisCharList:String=null, thisProps:Object = null)

1	public function BitmapText(thisField:TextField,thisAlphabet:Object =null, thisCharList:String=null, thisProps:Object = null)

[/codesyntax]

Voici le détail des paramètres du constructeur :

thisField : l’instance de votre TextField que vous voulez afficher avec le texte, les filtres, le format de la police…
thisAlphabet : un objet qui contient les lettres au format Bitmap déjà créées. Sinon BitmapText s’occupe de créer les lettres Bitmap si le paramètre est null.
thisCharList : la liste des caractères à utiliser pour les lettres Bitmap. Si paramètre null, BitmapText contient par défaut une liste de caractères.
thisProps : un objet qui permet d’initialiser automatiquement les propriétés de la classe.

Et voici un exemple d’utilisation de la classe BitmapText :

[codesyntax lang= »actionscript3″ title= »BitmapText.as » bookmarkname= »BitmapText.as »]

var oTextField:TextField = new TextField();
oTextField.text = "Bonjour AS3 Facile !!!!";

var oTextFormat:TextFormat = new TextFormat();
oTextFormat.font = "Arial";
oTextFormat.size = 18;
oTextFormat.color = 0x006f77;
oTextField.defaultTextFormat = oTextFormat;

var oBitmapText:BitmapText = new BitmapText(oTextField);

var oTextField:TextField = new TextField();

oTextField.text = "Bonjour AS3 Facile !!!!";

var oTextFormat:TextFormat = new TextFormat();

oTextFormat.font = "Arial";

oTextFormat.size = 18;

oTextFormat.color = 0x006f77;

oTextField.defaultTextFormat = oTextFormat;

var oBitmapText:BitmapText = new BitmapText(oTextField);

[/codesyntax]

La classe BitmapText effectue une copie de votre TextField existant et l’enlève de la display list.

Pour mettre à jour le texte, vous pouvez utiliser simplement :

[codesyntax lang= »actionscript3″ title= »BitmapText.as » bookmarkname= »BitmapText.as »]

oBitmapText.text="Text AS3 Facile mis à jour.";

1	oBitmapText.text="Text AS3 Facile mis à jour.";

[/codesyntax]

Il y a également plusieurs getter / setter pour personnaliser la classe BitmapText :

margin : spécifie l’espace entre les caractères.
edge_buffer : spécifie un espace (ou marge) intérieur autour des lettres. C’est pour prendre en compte les filtres autour de chaque caractère.

Exemple Bitmap Text

Et voici un exemple d’affichage qui montre :

en haut le TextField classique.
en dessous le Bitmap Text.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2012/05/bitmap-font-iphone.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2012/05/bitmap-font-iphone.swf

Télécharger le code source

Vous pouvez télécharger le code source de l’exemple utilisé.

Télécharger “Bitmap Fonts Auto iPhone Android”

ex-bitmap-fonts-auto-iphone.zip – Téléchargé 906 fois – 103,01 Ko

Consulter l’article original sur Flash on iPhone – Automatically convert dynamic text to high performance bitmaps (with filters)

Il existe également cette solution plus souple à utiliser, avec des filtres supplémentaires : Bitmap Font Renderer.

Pour des performances encore plus élevées, il est préférable d’utiliser les polices Bitmap avec stage3d et Starling Framework.

Quelles solutions utilisez-vous pour améliorer les performances Flash sur iPhone, Android ?

Partagez vos astuces dans les commentaires ci-dessous.

Modifier la brillance, couleur, saturation et le contraste d’un Bitmap avec ColorMatrix

Commentaires fermés sur Modifier la brillance, couleur, saturation et le contraste d’un Bitmap avec ColorMatrix

Ecrit le 15 mars par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Très souvent, dans des applications flash, des effets de couleurs, contraste, brillance et saturation sont utilisés sur les images.

Avec l’utilisation d’une librairie de Tween, il est possible d’obtenir des résultats très sympa.

Ce tutoriel ActionScript reprend une classe de Grant Skinner, très pratique pour ajouter plusieurs effets sur un bitmap, il s’agit de la classe ColorMatrix.

La classe ColorMatrix

La classe ColorMatrix exploite des fonctionnalités apparues il y a bien longtemps avec Flash 8 (l’époque de l’AS2).

Cette classe permet de modifier :

la saturation.
la couleur.
la brillance.
le contraste ou la teinte.

Ainsi, la classe ColorMatrix permet de modifier le rendu colorimétrique d’une image dans une application flash.

Exemple d’utilisation de ColorMatrix

Par exemple la classe ColorMatrix :

https://e6msyji6epr.exactdn.com/wp-content/uploads/2012/03/ColorMatrix.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2012/03/ColorMatrix.swf

Télécharger l’exemple ColorMatrix

Vous trouverez l’exemple avec le code source commenté ci-dessous.

Télécharger “ColorMatrix Filters”

src-colormatrix.zip – Téléchargé 571 fois – 147,91 Ko

Source originale sur le blog de Grant Skinner.

[codesyntax lang= »actionscript3″ title= »com.gskinner.geom.ColorMatrix » bookmarkname= »com.gskinner.geom.ColorMatrix »]

/**
* ColorMatrix by Grant Skinner. August 8, 2005
* Updated to AS3 November 19, 2007
* Visit www.gskinner.com/blog for documentation, updates and more free code.
*
* You may distribute this class freely, provided it is not modified in any way (including
* removing this header or changing the package path).
*
* Please contact info@gskinner.com prior to distributing modified versions of this class.
*/

package com.gskinner.geom {

	dynamic public class ColorMatrix extends Array {

	// constant for contrast calculations:
		private static const DELTA_INDEX:Array = [
			0,    0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1,  0.11,
			0.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24,
			0.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42,
			0.44, 0.46, 0.48, 0.5,  0.53, 0.56, 0.59, 0.62, 0.65, 0.68,
			0.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98,
			1.0,  1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54,
			1.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0,  2.12, 2.25,
			2.37, 2.50, 2.62, 2.75, 2.87, 3.0,  3.2,  3.4,  3.6,  3.8,
			4.0,  4.3,  4.7,  4.9,  5.0,  5.5,  6.0,  6.5,  6.8,  7.0,
			7.3,  7.5,  7.8,  8.0,  8.4,  8.7,  9.0,  9.4,  9.6,  9.8,
			10.0
		];

		// identity matrix constant:
		private static const IDENTITY_MATRIX:Array = [
			1,0,0,0,0,
			0,1,0,0,0,
			0,0,1,0,0,
			0,0,0,1,0,
			0,0,0,0,1
		];
		private static const LENGTH:Number = IDENTITY_MATRIX.length;

	// initialization:
		public function ColorMatrix(p_matrix:Array=null) {
			p_matrix = fixMatrix(p_matrix);
			copyMatrix(((p_matrix.length == LENGTH) ? p_matrix : IDENTITY_MATRIX));
		}

	// public methods:
		public function reset():void {
			for (var i:uint=0; i&lt;LENGTH; i++) {
				this[i] = IDENTITY_MATRIX[i];
			}
		}

		public function adjustColor(p_brightness:Number,p_contrast:Number,p_saturation:Number,p_hue:Number):void {
			adjustHue(p_hue);
			adjustContrast(p_contrast);
			adjustBrightness(p_brightness);
			adjustSaturation(p_saturation);
		}

		public function adjustBrightness(p_val:Number):void {
			p_val = cleanValue(p_val,100);
			if (p_val == 0 || isNaN(p_val)) { return; }
			multiplyMatrix([
				1,0,0,0,p_val,
				0,1,0,0,p_val,
				0,0,1,0,p_val,
				0,0,0,1,0,
				0,0,0,0,1
			]);
		}

		public function adjustContrast(p_val:Number):void {
			p_val = cleanValue(p_val,100);
			if (p_val == 0 || isNaN(p_val)) { return; }
			var x:Number;
			if (p_val&lt;0) {
				x = 127+p_val/100*127
			} else {
				x = p_val%1;
				if (x == 0) {
					x = DELTA_INDEX[p_val];
				} else {
					//x = DELTA_INDEX[(p_val&lt;&lt;0)]; // this is how the IDE does it.
					x = DELTA_INDEX[(p_val&lt;&lt;0)]*(1-x)+DELTA_INDEX[(p_val&lt;&lt;0)+1]*x; // use linear interpolation for more granularity.
				}
				x = x*127+127;
			}
			multiplyMatrix([
				x/127,0,0,0,0.5*(127-x),
				0,x/127,0,0,0.5*(127-x),
				0,0,x/127,0,0.5*(127-x),
				0,0,0,1,0,
				0,0,0,0,1
			]);
		}

		public function adjustSaturation(p_val:Number):void {
			p_val = cleanValue(p_val,100);
			if (p_val == 0 || isNaN(p_val)) { return; }
			var x:Number = 1+((p_val &gt; 0) ? 3*p_val/100 : p_val/100);
			var lumR:Number = 0.3086;
			var lumG:Number = 0.6094;
			var lumB:Number = 0.0820;
			multiplyMatrix([
				lumR*(1-x)+x,lumG*(1-x),lumB*(1-x),0,0,
				lumR*(1-x),lumG*(1-x)+x,lumB*(1-x),0,0,
				lumR*(1-x),lumG*(1-x),lumB*(1-x)+x,0,0,
				0,0,0,1,0,
				0,0,0,0,1
			]);
		}

		public function adjustHue(p_val:Number):void {
			p_val = cleanValue(p_val,180)/180*Math.PI;
			if (p_val == 0 || isNaN(p_val)) { return; }
			var cosVal:Number = Math.cos(p_val);
			var sinVal:Number = Math.sin(p_val);
			var lumR:Number = 0.213;
			var lumG:Number = 0.715;
			var lumB:Number = 0.072;
			multiplyMatrix([
				lumR+cosVal*(1-lumR)+sinVal*(-lumR),lumG+cosVal*(-lumG)+sinVal*(-lumG),lumB+cosVal*(-lumB)+sinVal*(1-lumB),0,0,
				lumR+cosVal*(-lumR)+sinVal*(0.143),lumG+cosVal*(1-lumG)+sinVal*(0.140),lumB+cosVal*(-lumB)+sinVal*(-0.283),0,0,
				lumR+cosVal*(-lumR)+sinVal*(-(1-lumR)),lumG+cosVal*(-lumG)+sinVal*(lumG),lumB+cosVal*(1-lumB)+sinVal*(lumB),0,0,
				0,0,0,1,0,
				0,0,0,0,1
			]);
		}

		public function concat(p_matrix:Array):void {
			p_matrix = fixMatrix(p_matrix);
			if (p_matrix.length != LENGTH) { return; }
			multiplyMatrix(p_matrix);
		}

		public function clone():ColorMatrix {
			return new ColorMatrix(this);
		}

		public function toString():String {
			return "ColorMatrix [ "+this.join(" , ")+" ]";
		}

		// return a length 20 array (5x4):
		public function toArray():Array {
			return slice(0,20);
		}

	// private methods:
		// copy the specified matrix's values to this matrix:
		protected function copyMatrix(p_matrix:Array):void {
			var l:Number = LENGTH;
			for (var i:uint=0;i&lt;l;i++) {
				this[i] = p_matrix[i];
			}
		}

		// multiplies one matrix against another:
		protected function multiplyMatrix(p_matrix:Array):void {
			var col:Array = [];

			for (var i:uint=0;i&lt;5;i++) {
				for (var j:uint=0;j&lt;5;j++) {
					col[j] = this[j+i*5];
				}
				for (j=0;j&lt;5;j++) {
					var val:Number=0;
					for (var k:Number=0;k&lt;5;k++) {
						val += p_matrix[j+k*5]*col[k];
					}
					this[j+i*5] = val;
				}
			}
		}

		// make sure values are within the specified range, hue has a limit of 180, others are 100:
		protected function cleanValue(p_val:Number,p_limit:Number):Number {
			return Math.min(p_limit,Math.max(-p_limit,p_val));
		}

		// makes sure matrixes are 5x5 (25 long):
		protected function fixMatrix(p_matrix:Array=null):Array {
			if (p_matrix == null) { return IDENTITY_MATRIX; }
			if (p_matrix is ColorMatrix) { p_matrix = p_matrix.slice(0); }
			if (p_matrix.length &lt; LENGTH) {
				p_matrix = p_matrix.slice(0,p_matrix.length).concat(IDENTITY_MATRIX.slice(p_matrix.length,LENGTH));
			} else if (p_matrix.length &gt; LENGTH) {
				p_matrix = p_matrix.slice(0,LENGTH);
			}
			return p_matrix;
		}
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

/**

* ColorMatrix by Grant Skinner. August 8, 2005

* Updated to AS3 November 19, 2007

* Visit www.gskinner.com/blog for documentation, updates and more free code.

* You may distribute this class freely, provided it is not modified in any way (including

* removing this header or changing the package path).

* Please contact [email protected] prior to distributing modified versions of this class.

package com.gskinner.geom {

dynamic public class ColorMatrix extends Array {

// constant for contrast calculations:

private static const DELTA_INDEX:Array = [

0, 0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1, 0.11,

0.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24,

0.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42,

0.44, 0.46, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.65, 0.68,

0.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98,

1.0, 1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54,

1.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0, 2.12, 2.25,

2.37, 2.50, 2.62, 2.75, 2.87, 3.0, 3.2, 3.4, 3.6, 3.8,

4.0, 4.3, 4.7, 4.9, 5.0, 5.5, 6.0, 6.5, 6.8, 7.0,

7.3, 7.5, 7.8, 8.0, 8.4, 8.7, 9.0, 9.4, 9.6, 9.8,

10.0

];

// identity matrix constant:

private static const IDENTITY_MATRIX:Array = [

1,0,0,0,0,

0,1,0,0,0,

0,0,1,0,0,

0,0,0,1,0,

0,0,0,0,1

];

private static const LENGTH:Number = IDENTITY_MATRIX.length;

// initialization:

public function ColorMatrix(p_matrix:Array=null) {

p_matrix = fixMatrix(p_matrix);

copyMatrix(((p_matrix.length == LENGTH) ? p_matrix : IDENTITY_MATRIX));

}

// public methods:

public function reset():void {

for (var i:uint=0; i<LENGTH; i++) {

this[i] = IDENTITY_MATRIX[i];

}

public function adjustColor(p_brightness:Number,p_contrast:Number,p_saturation:Number,p_hue:Number):void {

adjustHue(p_hue);

adjustContrast(p_contrast);

adjustBrightness(p_brightness);

adjustSaturation(p_saturation);

}

public function adjustBrightness(p_val:Number):void {

p_val = cleanValue(p_val,100);

if (p_val == 0 || isNaN(p_val)) { return; }

multiplyMatrix([

1,0,0,0,p_val,

0,1,0,0,p_val,

0,0,1,0,p_val,

0,0,0,1,0,

0,0,0,0,1

]);

}

public function adjustContrast(p_val:Number):void {

p_val = cleanValue(p_val,100);

if (p_val == 0 || isNaN(p_val)) { return; }

var x:Number;

if (p_val<0) {

x = 127+p_val/100*127

} else {

x = p_val%1;

if (x == 0) {

x = DELTA_INDEX[p_val];

} else {

//x = DELTA_INDEX[(p_val<<0)]; // this is how the IDE does it.

x = DELTA_INDEX[(p_val<<0)]*(1-x)+DELTA_INDEX[(p_val<<0)+1]*x; // use linear interpolation for more granularity.

}

x = x*127+127;

}

multiplyMatrix([

x/127,0,0,0,0.5*(127-x),

0,x/127,0,0,0.5*(127-x),

0,0,x/127,0,0.5*(127-x),

0,0,0,1,0,

0,0,0,0,1

]);

}

public function adjustSaturation(p_val:Number):void {

p_val = cleanValue(p_val,100);

if (p_val == 0 || isNaN(p_val)) { return; }

var x:Number = 1+((p_val > 0) ? 3*p_val/100 : p_val/100);

var lumR:Number = 0.3086;

var lumG:Number = 0.6094;

var lumB:Number = 0.0820;

multiplyMatrix([

lumR*(1-x)+x,lumG*(1-x),lumB*(1-x),0,0,

lumR*(1-x),lumG*(1-x)+x,lumB*(1-x),0,0,

lumR*(1-x),lumG*(1-x),lumB*(1-x)+x,0,0,

0,0,0,1,0,

0,0,0,0,1

]);

}

public function adjustHue(p_val:Number):void {

p_val = cleanValue(p_val,180)/180*Math.PI;

if (p_val == 0 || isNaN(p_val)) { return; }

var cosVal:Number = Math.cos(p_val);

var sinVal:Number = Math.sin(p_val);

var lumR:Number = 0.213;

var lumG:Number = 0.715;

var lumB:Number = 0.072;

multiplyMatrix([

lumR+cosVal*(1-lumR)+sinVal*(-lumR),lumG+cosVal*(-lumG)+sinVal*(-lumG),lumB+cosVal*(-lumB)+sinVal*(1-lumB),0,0,

lumR+cosVal*(-lumR)+sinVal*(0.143),lumG+cosVal*(1-lumG)+sinVal*(0.140),lumB+cosVal*(-lumB)+sinVal*(-0.283),0,0,

lumR+cosVal*(-lumR)+sinVal*(-(1-lumR)),lumG+cosVal*(-lumG)+sinVal*(lumG),lumB+cosVal*(1-lumB)+sinVal*(lumB),0,0,

0,0,0,1,0,

0,0,0,0,1

]);

}

public function concat(p_matrix:Array):void {

p_matrix = fixMatrix(p_matrix);

if (p_matrix.length != LENGTH) { return; }

multiplyMatrix(p_matrix);

}

public function clone():ColorMatrix {

return new ColorMatrix(this);

}

public function toString():String {

return "ColorMatrix [ "+this.join(" , ")+" ]";

}

// return a length 20 array (5x4):

public function toArray():Array {

return slice(0,20);

}

// private methods:

// copy the specified matrix's values to this matrix:

protected function copyMatrix(p_matrix:Array):void {

var l:Number = LENGTH;

for (var i:uint=0;i<l;i++) {

this[i] = p_matrix[i];

}

// multiplies one matrix against another:

protected function multiplyMatrix(p_matrix:Array):void {

var col:Array = [];

for (var i:uint=0;i<5;i++) {

for (var j:uint=0;j<5;j++) {

col[j] = this[j+i*5];

}

for (j=0;j<5;j++) {

var val:Number=0;

for (var k:Number=0;k<5;k++) {

val += p_matrix[j+k*5]*col[k];

}

this[j+i*5] = val;

}

// make sure values are within the specified range, hue has a limit of 180, others are 100:

protected function cleanValue(p_val:Number,p_limit:Number):Number {

return Math.min(p_limit,Math.max(-p_limit,p_val));

}

// makes sure matrixes are 5x5 (25 long):

protected function fixMatrix(p_matrix:Array=null):Array {

if (p_matrix == null) { return IDENTITY_MATRIX; }

if (p_matrix is ColorMatrix) { p_matrix = p_matrix.slice(0); }

if (p_matrix.length < LENGTH) {

p_matrix = p_matrix.slice(0,p_matrix.length).concat(IDENTITY_MATRIX.slice(p_matrix.length,LENGTH));

} else if (p_matrix.length > LENGTH) {

p_matrix = p_matrix.slice(0,LENGTH);

}

return p_matrix;

}

[/codesyntax]

Partagez vos classes utilitaires

Vous aussi, vous avez des classes qui vous simplifient la création d’applications flash, partagez-les ci-dessous avec la Communauté AS3 Facile.

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : Bitmap

Cours ActionScript 3 ‘Bitmap’

Améliorer les performances Flash sous iPhone / Android avec Convert Text to Bitmap

Text Bitmap

Utilisation de BitmapText

Exemple Bitmap Text

Télécharger le code source

Quelles solutions utilisez-vous pour améliorer les performances Flash sur iPhone, Android ?

Modifier la brillance, couleur, saturation et le contraste d’un Bitmap avec ColorMatrix

La classe ColorMatrix

Exemple d’utilisation de ColorMatrix

Télécharger l’exemple ColorMatrix

Partagez vos classes utilitaires

Cours Récents

Liens / Partenaires