Share
Bienvenido a esta introducción para trabajar a nivel de píxeles con el objeto BitmapData de ActionScript 3. Tomaremos algunas imágenes en 2D, las dividiremos en sus píxeles componentes, luego las volveremos a ensamblar como imágenes en 3D que podemos mover y rotar..
Echemos un vistazo al resultado final en el que trabajaremos:
Justo antes de saltar, tomemos un momento para ver cómo se presenta el proyecto de muestra. Al abrir el código fuente para este tutorial, tendrá fuentes para cada paso significativo, puede seguir adelante y hacer una copia del archivo. empezar carpeta ya que esto servirá como nuestro punto de partida.
Dentro de esta carpeta encontrarás otras dos carpetas; src y compartimiento. los src carpeta es donde guardaremos todos nuestros códigos y archivos FLA y la compartimiento carpeta es donde Flash guardará los archivos SWF. Dentro de src carpeta hay la Main.FLA y el Principal.AS clase de documento.
Si por alguna razón encuentra un error en su código, intente solucionarlo (siempre es bueno aprender de los errores), pero si no puede, ¡no se preocupe! Puede volver a saltar y usar una de las carpetas de pasos en el archivo zip de origen más cercano al paso en el que estaba.
Si ya has echado un vistazo a la Main.as Ya notará algunas referencias a Away3D, un marco 3D para Flash. Vamos a necesitar descargar esto y agregarlo a nuestro proyecto para continuar.
Puedes obtener su última versión desde el sitio de Away3D.
Una vez completada esta descarga, abra el archivo zip y dentro de la away3d_3_6_0 \ src carpeta encontrarás tres carpetas, away3d, nochump y Wumedia. Copie estos, como se muestra abajo a su src carpeta.
Si aún no lo has hecho, abre Main.fla y Main.as. Mirando en la Biblioteca Flash puede ver una imagen llamada 1.png y una Clip de película con un nombre de instancia de img1, que servirá como un contenedor básico para el png.
Vamos a realizar una compilación rápida solo para asegurarnos de haber agregado Away3D correctamente. Si todo va bien, deberíamos ver una película Flash en blanco con un fondo gris oscuro y sin mensajes de error de Flash.
Examinando el Main.as En el archivo podemos ver algunas variables que se utilizan en Away3D, ya hay una gran cantidad de tutoriales en Away3D pero resumiremos rápidamente estos:
// propiedades básicas de Away3D protegidas var scene: Scene3D; cámara var protegida: TargetCamera3D; Vista de var protegida: View3D;
Accentsconagua
Scene3D Es un espacio que podemos usar para agregar objetos 3D como cubos y esferas..TargetCamera3D es uno de los muchos tipos de cámaras disponibles en Away3D, es lo que usamos para mirar a Scene3D.View3D Es una ventana gráfica, a menudo descrita como la "ventana" en la que vemos nuestra escena..Sin entrar en detalles, también puede ver que una escena básica está lista para su uso con el initAway3d () método. Note que agrega un ENTER_FRAME EventListener, esto simplemente le dice a Away3D que hacer() (o dibujar) cualquier objeto agregado al Scene3D cada cuadro.
/ ** * Configuración de escena básica de Away3D * / función privada initAway3d (): void scene = new Scene3D (); camera = new TargetCamera3D (z: -200); view = new View3D (scene: scene, camera: camera); addChild (ver); addEventListener (Event.ENTER_FRAME, renderLoop); / ** * el bucle de procesamiento * / la función privada renderLoop (evento: Evento): void view.render ();
Eso es todo para la introducción de la Main.as Clase, estaremos construyendo todo lo demás a medida que avanzamos..
Vamos a entrar directamente e introducir estas dos clases, ya que trabajaremos con ellas a lo largo del tutorial. Si eres nuevo en Mapa de bits y BitmapData Usted puede pensar en ellos como un lienzo de pintores y una colección de hojas de pintura. Son objetos totalmente diferentes pero ambos están conectados, el BitmapData contiene toda la información de píxeles o pinceladas y no sería nada sin ser pintado en un lienzo o, en este caso, el Bitmap!
Probemos esto agregando una instancia de la img1 MovieClip al escenario y haciendo una copia de ella usando Bitmap / BitmapData.
Modifique el Main.as a lo siguiente:
/ ** * constructor * / public function Main () initAway3d (); drawExample (); / ** * un ejemplo rápido de uso de BitmapData y Bitmap * / private function drawExample (): void // cree una instancia del objeto img1 en el escenario para copiar var img: MovieClip = new img1 (); addChild (img); // crear un objeto BitmapData con los siguientes parámetros: ancho, alto, transparente, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dibuja una copia del clip de película img en BitmapData bmpData.draw (img); // agrega un Bitmap al escenario con la información BitmapData (copia de img1) para mostrar var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp);
Mirando a la drawExample () Código, las dos primeras líneas simplemente agregan el img1 objetar al escenario, Esta es la imagen que haremos de copia de..
A continuación creamos un BitmapData Objeto con los siguientes parámetros:
anchura, el ancho para hacer el BitmapData altura, la altura para hacer el BitmapData transparente, si el BitmapData debe contener píxeles transparentescolor, el color de fondoComo sabemos el ancho y la altura desde img1 los hemos establecido directamente, ya que vamos a necesitar transparencia, configuramos el siguiente parámetro como verdadero y, por último, especificamos 0x000000 o negro como color de fondo, ya que aparecerá transparente hasta que lo llenemos.
Continuando, ahora tenemos el BitmapData configuración de objetos tenemos varias opciones disponibles para nosotros, por ejemplo, podríamos recorrer cada píxel a píxel y copiar la imagen (usaremos algo como esto más adelante en el tutorial), o podríamos usar el dibujar() método.
los dibujar() método toma un Clip de película o Duende como parámetro y copiará toda la información de píxeles del objeto a la BitmapData.
/ ** * un ejemplo rápido del uso de BitmapData y Bitmap * / private function drawExample (): void // cree una instancia del objeto img1 en el escenario para copiar var img: MovieClip = new img1 (); addChild (img); // crear un objeto BitmapData con los siguientes parámetros: ancho, alto, transparente, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dibuja una copia del clip de película img en BitmapData bmpData.draw (img); // agrega un Bitmap al escenario con la información BitmapData (copia de img1) para mostrar var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp);
A continuación, las siguientes líneas crean una Mapa de bits objeto con el BitmapData La información de píxeles como parámetro, que luego se mueve debajo del original. img MovieClip y añadido a la escenario.
/ ** * un ejemplo rápido del uso de BitmapData y Bitmap * / private function drawExample (): void // cree una instancia del objeto img1 en el escenario para copiar var img: MovieClip = new img1 (); addChild (img); // crear un objeto BitmapData con los siguientes parámetros: ancho, alto, transparente, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dibuja una copia del clip de película img en BitmapData bmpData.draw (img); // agrega un Bitmap al escenario con la información BitmapData (copia de img1) para mostrar var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp);
No hay mucha configuración involucrada en la configuración del Mapa de bits aspecto simplemente muestra un BitmapData, toda la magia está con el BitmapData. Ahora, al probar, deberíamos obtener lo siguiente:
Ahora tenemos contenido dentro del BitmapData Las cosas de los objetos comienzan a ponerse interesantes, ya que podemos empezar a manipular imágenes usando getPixel32 () y setPixel32 ().
Empezando con getPixel32 () enmendar el drawExample () Código de arriba a lo siguiente:
/ ** * un ejemplo rápido del uso de BitmapData y Bitmap * / private function drawExample (): void // cree una instancia del objeto img1 en el escenario para copiar var img: MovieClip = new img1 (); addChild (img); // crear un objeto BitmapData con los siguientes parámetros: ancho, alto, transparente, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dibuja una copia del clip de película img en BitmapData bmpData.draw (img); // agrega un Bitmap al escenario con la información BitmapData (copia de img1) para mostrar var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp); // lea la información de píxeles de BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); trace (pixelInformation, pixelInformation.toString (16));
Al examinar el código, hemos creado una variable uint regular y la hemos asignado al valor del píxel en el bmpData a 5 píxeles horizontalmente y 0 píxeles verticalmente. Recuerda que los valores comienzan en 0 como tal:
Sabiendo que elegimos obtener la información de píxel de 5,0, eso lo convertiría en un píxel negro en la fila superior y con una cantidad suficiente de Flash: 4278190080 ff000000
Eso podría no parecer correcto al principio, pero setPixel32 lee el valor alfa del píxel (donde como setPixel solo lee el color). Generalmente estamos acostumbrados a trabajar con valores hexadecimales para colores como FFFFFF o 000000 para que podamos decirle a Flash aString (16) para obtener el valor hexadecimal:
Ahora sabemos cómo leer la información de píxeles, dibujando píxeles a la BitmapData Es muy similar, solo que esta vez usamos. setPixel32 () para dibujar píxeles en BitmapData, y también lanzaremos una para bucle para dibujar algunos píxeles.
Primero modifique el código a lo siguiente:
/ ** * un ejemplo rápido del uso de BitmapData y Bitmap * / private function drawExample (): void // cree una instancia del objeto img1 en el escenario para copiar var img: MovieClip = new img1 (); addChild (img); // crear un objeto BitmapData con los siguientes parámetros: ancho, alto, transparente, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dibuja una copia del clip de película img en BitmapData bmpData.draw (img); // agrega un Bitmap al escenario con la información BitmapData (copia de img1) para mostrar var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp); // lea la información de píxeles de BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); trace (pixelInformation, pixelInformation.toString (16)); // escriba la información de píxeles en el color var de BitmapData: uint = 0xffff0000; // ff0000 - full red var row: uint = 0; columna var: uint = 0; para (fila; fila < bmpData.height; row++) bmpData.setPixel32(column, row, color); column++; if(column > bmpData.width) columna = 0;
El nuevo código comienza creando un regular. uint variable nombrada color que almacenamos 0xffff0000 que es: ff totalmente transparente, ff completamente rojo, 00 no verde, 00 no azul.
Luego hay dos contadores hechos para filas y columnas (las filas son una línea de píxeles horizontales, las columnas son una línea de píxeles verticales). Estos contadores se colocan en un para bucle que aumenta el valor de la fila y el contador cada vez, por lo que cuando se mezcla con el setPixel32 () Método que dibujará una línea diagonal:
En este paso vamos a introducir el PixelObject3D.as clase. Para ahorrar un poco de tiempo, tome una copia de la clase de la Paso 8 carpeta en la fuente zip y suéltela en su src carpeta además de la Main.fla y Main.as.
Una vez que haya hecho esto, echémosle un vistazo rápido antes de comenzar a agregar el código para crear objetos 3D a partir de píxeles.
// propiedades protegidas var _bitmapData: BitmapData = null; public var _scaleFactor: Number = 1; var _width protegido: Número = 0; var _height protegido: Número = 0;
Tenemos algunas variables protegidas en la parte superior de la clase, una para una BitmapData y tres Números Para la anchura, altura y escala del objeto..
/ ** * constructor * / función pública PixelObject3D () / ** * comienza el proceso de creación * / función pública createFromMovieClip (mc: MovieClip): void
Después de ellos hay un constructor de clase vacío y el método con el que trabajaremos., createFromMovieClip (). Notarás que este método toma un parámetro de Clip de película escribe, así que como ya puedes adivinar pasamos un Clip de película Y nos devolverá una representación 3D de ello. Cuando se termine eso es!
Mientras que la PixelObject3D.as clase en realidad no hace nada todavía vamos a agregar una instancia de la misma a la Main.as clase, así que en realidad podemos ver los cambios en la pantalla a medida que avanzamos.
Comenzando con la adición de una variable privada:
// propiedades básicas de Away3D protegidas var scene: Scene3D; cámara var protegida: TargetCamera3D; Vista de var protegida: View3D; // el Pixel3DObject protegido var po3d: PixelObject3D;
A continuación, agregue al constructor una llamada a createPixelObect3D ().
/ ** * constructor * / public function Main () initAway3d (); drawExample (); createPixelObect3D ();
Por último añadir la siguiente función a la Main.as expediente. Esto creará una instancia de la PixelObject3D clase, invoca el createFromMovieClip () Método y pasarlo un nuevo Clip de película, la img1 hemos utilizado anteriormente.
Una última línea para señalar es que agregamos el PixelObject3D clase como hijo de la escena, ya que es un objeto 3D, no el Escenario.
/ ** * crea una función privada PixelObject3D * / createPixelObect3D (): void po3d = new PixelObject3D (); po3d.createFromMovieClip (new img1 ()); scene.addChild (po3d);
Sabiendo que hemos pasado el Clip de película Queremos recrear desde este método, lo primero en nuestra agenda es hacer una copia del mismo usando BitmapData exactamente como lo hicimos antes. Luego podemos usar los datos de píxeles para comenzar a crear objetos 3D..
Al igual que antes, vamos a crear un BitmapData objeto y dibujar el mc MovieClip objeto:
/ ** * comienza el proceso de creación * / public function createFromMovieClip (mc: MovieClip): void // almacena las referencias y crea el bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // establece width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor);
También establecemos el _anchura y _altura variables de acuerdo a la mc ancho y alto y multiplica esto por el _factor de escala variable, esto nos permite escalar hacia arriba o hacia abajo el tamaño de los píxeles 3D si lo deseamos. Más sobre esto más adelante.
Recuerde que BitmapData es solo la información de píxeles y sin agregar BitmapData a un Bitmap no podremos verlo, pero podemos leerlo y escribirlo. Esto es perfecto para nosotros, ya que vamos a utilizar este paso para comenzar a recorrer los píxeles de BitmapData y separar los valores rojo, verde, azul y alfa..
Enmiende su createFromMovieClip () método para que coincida con esto:
/ ** * comienza el proceso de creación * / public function createFromMovieClip (mc: MovieClip): void // almacena las referencias y crea el bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // establece width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // pixel information var pixelValue: uint = 0; var rojo: uint = 0; var verde: uint = 0; var azul: uint = 0; var alfa: uint = 0; // recorre cada píxel horizontalmente para (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 y 0xFF; rojo = pixelValue >> 16 & 0xFF; verde = pixelValue >> 8 & 0xFF; azul = pixelValue & 0xFF; traza ("alfa:" + alfa + "rojo:" + rojo + "verde:" + verde + "azul:" + azul); Aquí hemos configurado algunas variables para el color y los valores alfa y luego comenzamos una para bucle basado en el mc's anchura.
Esta para bucle establece el pixelValue variable al valor del píxel actual usando el getPixel32 () Método que usamos anteriormente, pero esta vez, nota que hemos usado 0 para el segundo parámetro que es y, por lo que sólo vamos a procesar la primera línea horizontal de píxeles.
Después de esto, hay una matemática bastante compleja conocida como enmascaramiento y desplazamiento de bits. Para ahorrar un poco de tiempo, puede asumir que cada uno de los colores se extrae de la pixelValue variable y luego de salida para que podamos ver usando rastro(). Si desea obtener más información sobre los operadores bitwise, el desplazamiento de bits y el enmascaramiento, puede encontrar una excelente publicación en el sitio web de Polygonal Labs..
Lo que deberías ver es la salida de un montón de 0 Valores, pero prestar atención a los dos alfa: 255 líneas, estos son los dos píxeles negros en la parte superior de la mano.
¡Vaya, había bastante lógica en esos últimos pasos! Ahora que tenemos los conceptos básicos en funcionamiento, comencemos a usar la información de píxeles que obtuvimos anteriormente para crear una obra maestra en 3D. casi.
Si ha usado Away3D o Papervision 3D antes de familiarizarse con este paso, comenzaremos a crear cubos 3D y aplicarles materiales. Para cada píxel que es alfa es 255 (opaco) tomamos su color y creamos un material basado en el color que se aplicará a un cubo 3D, a continuación se muestra el código para comenzar:
/ ** * comienza el proceso de creación * / public function createFromMovieClip (mc: MovieClip): void // almacena las referencias y crea el bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // establece width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // pixel information var pixelValue: uint = 0; var rojo: uint = 0; var verde: uint = 0; var azul: uint = 0; var alfa: uint = 0; // recorre cada píxel horizontalmente para (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 y 0xFF; rojo = pixelValue >> 16 & 0xFF; verde = pixelValue >> 8 & 0xFF; azul = pixelValue & 0xFF; // si el píxel es opaco si (alfa == 255) // crea una cadena de color hexadecimal normal, es decir, FFFFFF o 000000 var color: String = red.toString (16) + green.toString (16) + blue.toString (16 ); if (color == "000") color = "000000"; traza ("#" + color); // crear un material del color y aplicar a un cubo 3D material var: Material = nuevo ColorMaterial (color); var cube: Cubo = nuevo Cubo (material: material, ancho: 2 * _scaleFactor, altura: 2 * _scaleFactor, profundidad: 2 * _scaleFactor); // posicionar el cubo desde un valor - de modo que el punto de registro / transformación siempre sea el centro cube.x = 0 - (_width / 2) + cube.width * i; this.addChild (cubo); En el código anterior hemos utilizado el rojo, verde y azul variables y creó un color hexadecimal regular, que puede ver el resultado de la rastro().
Entonces el color hexadecimal color variable se utiliza para crear una Colormaterial con Away3D, que es solo un material regular basado en un color que se puede aplicar a objetos 3D.
A continuación creamos un Cubo objeto y especifique el material ser el material Objeto creamos la línea anterior. También vale la pena señalar aquí es que hemos establecido la anchura, altura y profundidad (recuerde que ahora estamos trabajando en tres dimensiones) a un valor del doble del valor de _scaleValue variable, esto nos permite hacer los cubos más grandes o más pequeños cambiando _scaleValue.
Por último posicionamos el Cubo a cero menos la mitad del ancho de la mc multiplicado por el para contador de bucles yo, esto hace que el punto de registro o transformación del objeto 3D terminado en el centro. Luego se agrega como niño y cuando hagas la prueba verás dos pequeñas 3D en negro Cubo objetos.
Ahora, dos cubos 3D son geniales y todos, pero realmente queremos que toda la forma de la mano se convierta en cubos 3D. Ya estamos usando un para bucle para recorrer todos los píxeles de la primera fila, pero ¿cómo podemos hacer que circule a través de las filas de píxeles restantes??
Lo has adivinado, otro para lazo!
/ ** * comienza el proceso de creación * / public function createFromMovieClip (mc: MovieClip): void // almacena las referencias y crea el bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // establece width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // pixel information var pixelValue: uint = 0; var rojo: uint = 0; var verde: uint = 0; var azul: uint = 0; var alfa: uint = 0; // recorre cada fila de píxeles para (var j: int = 0; j < mc.height; j++) // loop through each pixel horizontally for (var i:int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, j); alpha = pixelValue >> 24 y 0xFF; rojo = pixelValue >> 16 & 0xFF; verde = pixelValue >> 8 & 0xFF; azul = pixelValue & 0xFF; // si el píxel es opaco si (alfa == 255) // crea una cadena de color hexadecimal normal, es decir, FFFFFF o 000000 var color: String = red.toString (16) + green.toString (16) + blue.toString (16 ); if (color == "000") color = "000000"; traza ("#" + color); // crear un material del color y aplicar a un cubo 3D material var: Material = nuevo ColorMaterial (color); var cube: Cubo = nuevo Cubo (material: material, ancho: 2 * _scaleFactor, altura: 2 * _scaleFactor, profundidad: 2 * _scaleFactor); // posicionar el cubo desde un valor - de modo que el punto de registro / transformación siempre sea el centro cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; this.addChild (cubo); Esta vez solo hemos cambiado tres cosas, una nueva para bucle que esta vez tiene j por su contador. los getPixel32 () ahora tiene el j variable añadida como la y parámetro y por último el Cubo se coloca verticalmente utilizando el j mostrador.
Esto completa bastante la lógica principal, ahora se desplazará horizontalmente, leerá los valores de píxeles, creará una Colormaterial y un Cubo y posicionarlos en consecuencia. Una vez que llega al final de la línea horizontal, debido a la nueva para en bucle pasará al siguiente píxel hacia abajo y continuará en forma horizontal hasta que la imagen se complete. Echa un vistazo por ti mismo probando la película:
Ahora tenemos todos estos objetos en 3D, pero se ven muy en 2D, por lo que vamos a agregar un poco de movimiento y lograr que todo el objeto gire.
Para ello tendremos que hacer un seguimiento de la Main.as archiva y localiza el renderLoop () método. Recuerde que Away3D deberá renderizar (o pintar) la imagen 3D en cada fotograma, para que podamos agregar algunas rotaciones simples a nuestro PixelObject3D ver a todo el niño Cubitos girar:
/ ** * el bucle de procesamiento * / la función privada renderLoop (evento: Evento): void pObject3D.rotationZ ++; view.render ();
Siéntete libre de experimentar con rotaciónX, rotaciónY y rotación z aquí solo recuerda restablecerlo al código anterior antes de continuar. También puede agregar a la create3DObject () para centrar mejor y alinear el Cubitos a la camara.
/ ** * crea un objeto de píxel 3D desde un MovieClip * / public function create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img1 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Ahora que esto es más parecido, finalmente podemos ver el objeto de píxel 3D girando. Podemos comenzar a ajustar esto y agregar una vista explosionada simplemente editando el z valor de la Cubitos cuando los creamos.
Saltar de nuevo a la PixelObject3d.as Clase y encontrar las líneas donde colocamos el Cuboes X y y y añade lo siguiente:
// si el píxel es opaco si (alfa == 255) // crea una cadena de color hexadecimal normal, es decir, FFFFFF o 000000 var color: String = red.toString (16) + green.toString (16) + blue.toString (16 ); if (color == "000") color = "000000"; traza ("#" + color); // crear un material del color y aplicar a un cubo 3D material var: Material = nuevo ColorMaterial (color); var cube: Cubo = nuevo Cubo (material: material, ancho: 2 * _scaleFactor, altura: 2 * _scaleFactor, profundidad: 2 * _scaleFactor); // posicionar el cubo desde un valor - de modo que el punto de registro / transformación siempre sea el centro cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; cube.z = -25 + (Math.random () * 50); this.addChild (cubo); Esto moverá cada Cubo a una profundidad aleatoria de -25 a positivo 25 y crea un efecto explotado agradable:
Como el PixelObject3D Es un poco pequeño en la pantalla, vamos a ajustar la escala ligeramente. Podemos hacer esto rápidamente ajustando el _scaleValue variable en el PixelObject3D.as clase y aumentándolo a 1.5.
/ ** * crea un objeto 3D desde MovieClip * * @author Anton Mills * / clase pública PixelObject3D extiende ObjectContainer3D // propiedades protegidas var _bitmapData: BitmapData = null; public var _scaleFactor: Number = 1.5; var _width protegido: Número = 0; var _height protegido: Número = 0;
Utilizando la PixelObject3D la clase para crear otras imágenes es fácil, simplemente importe la imagen que desea procesar en Flash. Luego conviértalo a MovieClip como de costumbre, esta vez déle un Nombre de la clase de img2 Me gusta esto:
Ahora puedes alterar Main.as usar el nuevo img2 Objeto con una pequeña alteración:
/ ** * crea un objeto de píxel 3D desde un MovieClip * / public function create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img2 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Puedes usar tantos como quieras, solo asegúrate de agregarlos a la escena Away3D y podrías tener varios. En este ejemplo he quitado el z Propiedad que usamos en el Paso 16 para el efecto de explosión..
Main.as con otro PixelObject3D adicional:
/ ** * Un tutorial destinado a introducir BitmapData * de ActionScript 3 y cómo utilizar la información de BitmapData para crear una forma de píxel 3D * utilizando Away3D. * * @autor Anton Mills * / public class Main extiende MovieClip // propiedades básicas de Away3D protegidas var scene: Scene3D; cámara var protegida: TargetCamera3D; Vista de var protegida: View3D; protegido var pObject3D: PixelObject3D; protegido var pObject3D2: PixelObject3D;
Luego crea otra instancia:
/ ** * crea un objeto de píxel 3D desde un MovieClip * / public function create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img2 ()); pObject3D.x = 40; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D); pObject3D2 = nuevo PixelObject3D (); pObject3D2.createFromMovieClip (new img1 ()); pObject3D2.x = 115; pObject3D2.y = -55; pObject3D2.rotationX = -5; scene.addChild (pObject3D2);
Y por último rotarlo en el bucle de renderización de Away3D:
/ ** * el bucle de procesamiento * / la función privada renderLoop (evento: Evento): void pObject3D.rotationY ++; pObject3D2.rotationY--; pObject3D2.rotationZ--; pObject3D2.rotationX ++; view.render ();
Todo lo que queda es para que pruebes tu película y disfrutes de lo maravilloso de los píxeles 2D transformados en objetos 3D. Ahora, ¿qué puedes hacer con BitmapData en tu próxima aplicación o juego?
A través de este tutorial, hemos analizado una mezcla de elementos, pero nos hemos centrado principalmente en BitmapData uso como el dibujo Clips de película dentro BitmapData, utilizando setPixel32 () para dibujar píxeles individuales, mostrando la BitmapData usando un Mapa de bits y leyendo valores de pixel usando getPixel32 ().
También hemos cubierto algunos cálculos de color, obteniendo colores hexadecimales e incluso valores alfa, rojo, verde y azu
