Как сделать спрайт прозрачным

Econ Dude

Страницы

среда, 12 июля 2017 г.

Как сделать прозрачность объектов в Game Maker

Для того чтобы сделать прозрачность объектов в Game Maker Studio любой версии используется функция «image_alpha» (прозрачность картинки).

Под этим понимается прозрачность спрайта, функция будет менять прозрачность.

Изначально значение прозрачности всех объектов установлено равным 1, это значит что объекты абсолютно непрозрачны. Вы можете менять данное значение от 0 (полная прозрачность, невидимость) до 1 (непрозрачный).

Кроме того объекты могут быть прозрачными на уровне спрайта, а так-же прозрачным может быть фон спрайта.

Вот несколько примеров которые помогут вам разобраться:

Как сделать спрайт прозрачным

Это бывает удобно когда мы делаем маску коллизии (соприкосновения) и для того, чтобы фон такого спрайта не наезжал на другие объекты.

Сейчас почти все спрайты для игр делаются с прозрачным фоном.

Как сделать спрайт прозрачным

Тут мы можем добавить спрайту прозрачность с помощью функции opacity (помутнение):

Как сделать спрайт прозрачным

Если там стоит значение 150 и если мы хотим сделать непрозрачный спрайт наполовину прозрачным, то выкручиваем её до 75, в 2 раза.

Однако менять прозрачность самих спарайтов не обязательно, достаточно в самой игре менять их прозрачность с помощью функции:


Допустим в момент создания дерева (create event) мы добавляем код с прозрачностью:

Как сделать спрайт прозрачным

На карте до запуска игры ваши деревья будут непрозрачными, но как только игра начнётся, они сразу получат прозрачность 50%. Примерно вот так:

Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Тут станет понятно зачем может быть нужна прозрачность в гейм мейкер студио, почти всегда это чисто визуальный момент. Например тут можно видеть как герой прячется за деревьями, при этом понятно что он там есть и что дерево над ним.

Иногда в играх с изометрией стены или подвалы / этажи делаются прозрачными, возьмём Fallout tactics в качестве примера:

Как сделать спрайт прозрачным

Выделил красным область применения прозрачности. Так сделано примерно так что при касании спрайта героя с объектом, спрайт объекта делается прозрачным.

Вернёмся к нашему примеру и деревьям.

С помощью прозрачности удобно делать тени, воду, стекло, деревья и некоторые эффекты (хотя лучше не надо), такие как кровь.

Имейте в виду что функция прозрачности требует много ресурсов процессора для обработки таких спрайтов, следовательно не злоупотребляйте ей. Если у вас нет нужды делать что-то прозрачным, не делайте.

В последних версиях Game Maker Studio (и в GMS2) фон у всех спрайтов автоматически делается прозрачным, раньше фон был белым.

Если у вас есть картинка с белым фоном (или любым другим), но вы хотите его убрать в графическом редакторе гейм мейкер, то это делается с помощью функции «erase a color» (убрать цвет), я пользуюсь этой функций очень часто, в том числе и для своих рисунков, а так-же работая практически с какой угодно графикой.

Как сделать спрайт прозрачным

Если цвет не убирается, меняйте либо цвет, подбирая под цвет фона, либо допустимое отклонение (tolerance).

Кстати, вы часто замечали спрайты вот с таким зелёным фоном?

Это так сохраняются некоторые спрайты с прозрачным фоном, вам просто нужно будет потом его убрать вот таким вот образом.

С помощью прозрачности можно делать и тень, хотя это не лучший способ.

Чтобы сделать тень в Game Maker вы берёте ваш спрайт, затем делайте его абсолютно чёрным. Меняйте интенсивность (insensitivity) до 0:

Как сделать спрайт прозрачным

Далее меняете прозрачность изменяя opacity (помутнение), как я и писал выше.

Как сделать спрайт прозрачным

Ну и накладывайте на всё это дело ваш основной спрайт:

Как сделать спрайт прозрачным

Получается примерно что-то такое, фон уже потом добавил, он на спрайте не нужен.

С помощью этой функции можно делать как-бы растворение элементов и объектов, а так-же появление их из ниоткуда. Выглядит прикольно, но жрёт довольно много ресурсов да и это кривоватый метод.

Посмотрите это моё короткое видео про элементы меню:

Посмотрите как тут из темноты появляются элементы меню (кнопки). Сделано это с помощью как раз прозрачности. Просто изначально пишем кнопкам (в create) прозрачность равную нулю (image_alpha = 0), а затем в шаге (step) пишем что-то вроде:

if image_alpha =150 then image_alpha=0;

Реально и сделать еще парочку промежуточных вариантов дальности видимости.

У этого метода есть и другие недостатки, например объекты где вы хотели иметь постоянную прозрачность допустим 50% (0.5) у вас будут тоже менять её в зависимости от дальности от героя, хотя можете у таких объектов сделать изначальную прозрачность спрайта другой.

Ну вот и всё что я могу вам рассказать про прозрачность в Game Maker Studio, функция важная, красивая и полезная, пользуйтесь с умом. Удачи!

Другие мои статьи про создание игр вы можете найти вот тут: Геймдев

Источник

Как сделать спрайт прозрачным

Как сделать спрайт прозрачным Как сделать спрайт прозрачным Как сделать спрайт прозрачным

Вывод спрайта и его прозрачность

afqДата: Вторник, 03 Июля 2018, 06:18 | Сообщение # 1
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Никак не могу понять, можно ли сделать прозрачность спрайта без шейдеров, а то я никак не могу понять как шейдеры использовать, почему нужно то и то писать и где вся инфа по шейдерам есть, раз уж на то пошло.

Проблема вот в чем. Далее будет предоставлен код, это для 2d. Если я не устанавливаю glOrtho, то спрайт рисуется, но большого размера. Если установлю glOrtho, то рисуется только черный квадрат. Ещё была функция какая то, уже не помню как называется, он ещё двигается с помощью glRasterpos, она тоже рисует там где должно быть прозрачно, черным цветом. Из-за того, что не устанавливаю glortho, приходится координаты ставить в 0, 1 и тому подобное. Вот код.

std::fseek ( fd, pos, SEEK_SET );

pixels = new unsigned char [ max_pixels ];

// for ( int i = 0; i
мозги

Как сделать спрайт прозрачным Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
Snake174Дата: Вторник, 03 Июля 2018, 07:00 | Сообщение # 2
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Мне кажется, или init_texture ( ); нужно вызывать после того, как ты заполнишь массив pixels?
Не следует обманывать инспектора
Pipmak Assistant
Love2D Exporter
Love2D-Helpers
Как сделать спрайт прозрачнымOld Consoles Games
Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
afqДата: Вторник, 03 Июля 2018, 07:12 | Сообщение # 3
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Snake174, да ты совершенно прав. Я это поменял в последний момент, подумал что в конструкторе лучше не создавать ничего, потому как если выясниться что файл отсутствует или другая ошибка, то освободить память я не смогу, потому что конструктор не выполнится до конца, а отсюда и то, что деструктор тогда не вызовется. Я init_texture перенес без задней мысли из конструктора в начало фунцкии и забыл о приоритетах, но если поместить эту функцию в конец, то будет работать, но так как я написал в начале темы, то есть без прозрачности и glOrtho.
мозги
Как сделать спрайт прозрачным Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
Snake174Дата: Вторник, 03 Июля 2018, 07:31 | Сообщение # 4
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Код вывода спрайта покажи.

Вот процедура загрузки png изображений из моего старого проекта. Обрати внимание на цикл.

glGenTextures( 1, &id );
glBindTexture( GL_TEXTURE_2D, id );
GLuint *pTexData = new GLuint[ image.width() * image.height() ];
GLuint *sdata = (GLuint *)image.bits();
GLuint *tdata = pTexData;

for (int y = 0; y > 8) & 255) > 16) & 255) > 24) & 255)
Не следует обманывать инспектора
Pipmak Assistant
Love2D Exporter
Love2D-Helpers
Как сделать спрайт прозрачнымOld Consoles Games

Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
afqДата: Вторник, 03 Июля 2018, 08:07 | Сообщение # 5
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Snake174, я тоже раньше в int помещал все четыре цвета. А потом понел что можно по одному ( unsigned char ) для каждого цвета писать в массив, а потом за раз записать в data файл весь массив. И также прочесть одним разом без цикла. Я сегодня поменял и теперь за один раз считывает все цвета из data файла. Сначала размеры считываются, потом количество пикселей, а потом за раз требуемая длина, так лучше.

Добавлено (03 Июля 2018, 08:07)
———————————————
Snake174, а почему ты показываешь старый проект? Как там рисунок отображается, с прозрачностью?
мозги

Как сделать спрайт прозрачным Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
Snake174Дата: Вторник, 03 Июля 2018, 08:56 | Сообщение # 6
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Да, с прозрачностью. Старый потому что времени нет его допиливать )

Тут тоже всё разом считывается. В цикле то как раз и делается, чтобы было прозрачно. Без него у меня неправильно отображалось.
Не следует обманывать инспектора
Pipmak Assistant
Love2D Exporter
Love2D-Helpers
Как сделать спрайт прозрачнымOld Consoles Games

Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
afqДата: Вторник, 03 Июля 2018, 11:08 | Сообщение # 7
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Snake174, можешь снимок предоставить прозрачного спрайта?
мозги
Как сделать спрайт прозрачным Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
Snake174Дата: Вторник, 03 Июля 2018, 13:08 | Сообщение # 8
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

https://github.com/Snake174/PipmakAssistant/blob/master/res/ramka.png

Да любой файл с прозрачностью скачай и всё.
Не следует обманывать инспектора
Pipmak Assistant
Love2D Exporter
Love2D-Helpers
Как сделать спрайт прозрачнымOld Consoles Games

Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
afqДата: Среда, 11 Июля 2018, 12:14 | Сообщение # 9
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Snake174, я так понел ты с gl_Begin делал, у меня так тоже с прозрачностью рисовался. Но на нетбуке тормозило если несколько рисунков надо было нарисовать, потому что пока в цикле все поинты нарисуются, пройдет время.
мозги
Как сделать спрайт прозрачным Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
Snake174Дата: Среда, 11 Июля 2018, 17:11 | Сообщение # 10
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Да скинь ты уже весь код.

Могу на java скинуть без glBegin если надо.
Не следует обманывать инспектора
Pipmak Assistant
Love2D Exporter
Love2D-Helpers
Как сделать спрайт прозрачнымOld Consoles Games

Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
afqДата: Среда, 11 Июля 2018, 17:58 | Сообщение # 11
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

Snake174, давай на java. Весь код? Сюда? Или на github?
мозги
Как сделать спрайт прозрачным Как сделать спрайт прозрачнымКак сделать спрайт прозрачным
Snake174Дата: Четверг, 12 Июля 2018, 07:34 | Сообщение # 12
Как сделать спрайт прозрачным

Как сделать спрайт прозрачным

import java.io.BufferedInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.nio.ByteBuffer;
import java.nio.FloatBuffer;
import java.nio.IntBuffer;
import main.Engine;
import org.lwjgl.BufferUtils;
import org.lwjgl.opengl.ARBVertexBufferObject;
import static org.lwjgl.opengl.GL11.*;
import static org.lwjgl.opengl.GL13.*;
import static org.lwjgl.opengl.GL15.*;
import static org.lwjgl.util.glu.GLU.*;
import org.lwjgl.util.vector.Vector2f;
import org.lwjgl.util.vector.Vector4f;
import org.newdawn.slick.opengl.ImageDataFactory;
import org.newdawn.slick.opengl.InternalTextureLoader;
import org.newdawn.slick.opengl.LoadableImageData;
import org.newdawn.slick.opengl.TextureImpl;
import org.newdawn.slick.util.ResourceLoader;

public class Sprite
<
public static final int
NORMAL = 0,
FLIP_VERTICAL = 1,
FLIP_HORIZONTAL = 2;

private int texID = 0;
private int texWidth = 0;
private int texHeight = 0;
private int imageWidth = 0;
private int imageHeight = 0;
private FloatBuffer quadVertices = null;
private FloatBuffer quadTexVertices = null;
private int vboQuadHandle = 0;
private int vboQuadTexHandle = 0;

public Sprite( String fileName )
<
try
<
InputStream in = ResourceLoader.getResourceAsStream( fileName );
texID = InternalTextureLoader.createTextureID();
TextureImpl texture = new TextureImpl( fileName, GL_TEXTURE_2D, texID );
glBindTexture( GL_TEXTURE_2D, texID );

LoadableImageData imageData = ImageDataFactory.getImageDataFor( fileName );
ByteBuffer textureBuffer = imageData.loadImage( new BufferedInputStream( in ), false, null );

int width = imageData.getWidth();
int height = imageData.getHeight();
boolean hasAlpha = imageData.getDepth() == 32;

texture.setTextureWidth( imageData.getTexWidth() );
texture.setTextureHeight( imageData.getTexHeight() );

texWidth = texture.getTextureWidth();
texHeight = texture.getTextureHeight();

IntBuffer temp = BufferUtils.createIntBuffer( 16 );
glGetInteger( GL_MAX_TEXTURE_SIZE, temp );
int max = temp.get(0);

if ((texWidth > max) || (texHeight > max))
<
System.err.println(«Attempt to allocate a texture to big for the current hardware»);
Engine.Ptr().Window.close();
>

texture.setWidth( width );
texture.setHeight( height );
texture.setAlpha( hasAlpha );

imageWidth = texture.getImageWidth();
imageHeight = texture.getImageHeight();

glTexEnvf( GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE );
glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_NEAREST );
glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP );
glTexParameterf( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP );
gluBuild2DMipmaps( GL_TEXTURE_2D, componentCount,
InternalTextureLoader.get2Fold( width ),
InternalTextureLoader.get2Fold( height ),
srcPixelFormat, GL_UNSIGNED_BYTE, textureBuffer );
glBindTexture( GL_TEXTURE_2D, 0 );

float[] vert = <
0.0f, 0.0f,
(float)texWidth, 0.0f,
(float)texWidth, (float)texHeight,
0.0f, (float)texHeight
>;

float[] texVertices = <
0.0f, 0.0f,
1.0f, 0.0f,
1.0f, 1.0f,
0.0f, 1.0f
>;

vboQuadHandle = glGenBuffers();
vboQuadTexHandle = glGenBuffers();

quadVertices = BufferUtils.createFloatBuffer( 4 * 2 );
quadVertices.put( vert );
quadVertices.flip();

quadTexVertices = BufferUtils.createFloatBuffer( 4 * 2 );
quadTexVertices.put( texVertices );
quadTexVertices.flip();

ARBVertexBufferObject.glBindBufferARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, vboQuadHandle );
ARBVertexBufferObject.glBufferDataARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, quadVertices,
ARBVertexBufferObject.GL_STREAM_DRAW_ARB );

ARBVertexBufferObject.glBindBufferARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, vboQuadTexHandle );
ARBVertexBufferObject.glBufferDataARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, quadTexVertices,
ARBVertexBufferObject.GL_STREAM_DRAW_ARB );

ARBVertexBufferObject.glBindBufferARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, 0 );
>
catch (IOException e)
<
System.out.println( «Can’t load texture from file » + fileName + «: » + e.getLocalizedMessage() );
Engine.Ptr().Window.close();
>
>

public void use()
<
glBindTexture( GL_TEXTURE_2D, texID );
>

public Vector2f size()
<
return new Vector2f( texWidth, texHeight );
>

public int width()
<
return texWidth;
>

public int height()
<
return texHeight;
>

public Vector2f imageSize()
<
return new Vector2f( imageWidth, imageHeight );
>

public int imageWidth()
<
return imageWidth;
>

public int imageHeight()
<
return imageHeight;
>

public int ID()
<
return texID;
>

public void destroy()
<
glDeleteTextures( texID );
ARBVertexBufferObject.glDeleteBuffersARB( vboQuadHandle );
ARBVertexBufferObject.glDeleteBuffersARB( vboQuadTexHandle );
>

public void setTexEnvi( int param1, int param2 )
<
glTexEnvi( GL_TEXTURE_ENV, param1, param2 );
>

public static void activeTexture( int num )
<
glActiveTexture( GL_TEXTURE0 + num );
glEnable( GL_TEXTURE_2D );
>

public void draw( Vector4f geom, float angle, float alpha, boolean centered, int mode )
<
float[] vert = <
0.0f, 0.0f,
geom.getZ(), 0.0f,
geom.getZ(), geom.getW(),
0.0f, geom.getW()
>;

quadVertices.clear();
quadVertices.put( vert );
quadVertices.flip();

// Normal render
float[] texVertices = <
0.0f, 0.0f,
1.0f, 0.0f,
1.0f, 1.0f,
0.0f, 1.0f
>;

// Flip vertical
if (mode == FLIP_VERTICAL)
<
texVertices = new float[] <
0.0f, 1.0f,
1.0f, 1.0f,
1.0f, 0.0f,
0.0f, 0.0f
>;
>

// Flip horizontal
else if (mode == FLIP_HORIZONTAL)
<
texVertices = new float[] <
1.0f, 0.0f,
0.0f, 0.0f,
0.0f, 1.0f,
1.0f, 1.0f
>;
>

quadTexVertices.clear();
quadTexVertices.put( texVertices );
quadTexVertices.flip();

ARBVertexBufferObject.glBindBufferARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, vboQuadHandle );
ARBVertexBufferObject.glBufferSubDataARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, 0L, quadVertices );
glVertexPointer( 2, GL_FLOAT, 0, 0L );

ARBVertexBufferObject.glBindBufferARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, vboQuadTexHandle );
ARBVertexBufferObject.glBufferSubDataARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, 0L, quadTexVertices );
glTexCoordPointer( 2, GL_FLOAT, 0, 0L );

ARBVertexBufferObject.glBindBufferARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, 0 );

glEnable( GL_BLEND );
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
glEnable( GL_TEXTURE_2D );
glBindTexture( GL_TEXTURE_2D, texID );

glColor4f( 1.0f, 1.0f, 1.0f, alpha );

glEnableClientState( GL_VERTEX_ARRAY );
glEnableClientState( GL_TEXTURE_COORD_ARRAY );

glDrawArrays( GL_QUADS, 0, 4 );

glDisableClientState( GL_TEXTURE_COORD_ARRAY );
glDisableClientState( GL_VERTEX_ARRAY );

glDisable( GL_TEXTURE_2D );
glDisable( GL_BLEND );
>

public void drawPart( Vector4f geom, Vector4f partGeom, float angle, float alpha,
boolean centered, int mode )
<
float[] vert = <
0.0f, 0.0f,
geom.getZ(), 0.0f,
geom.getZ(), geom.getW(),
0.0f, geom.getW()
>;

quadVertices.clear();
quadVertices.put( vert );
quadVertices.flip();

float tx = partGeom.getX() / (float)texWidth;
float ty = partGeom.getY() / (float)texHeight;
float tw = partGeom.getZ() / (float)texWidth;
float th = partGeom.getW() / (float)texHeight;

// Normal render
float[] texVertices = <
tx, ty,
tx + tw, ty,
tx + tw, ty + th,
tx, ty + th
>;

// Flip vertical
if (mode == FLIP_VERTICAL)
<
texVertices = new float[] <
tx, ty + th,
tx + tw, ty + th,
tx + tw, ty,
tx, ty
>;
>

// Flip horizontal
else if (mode == FLIP_HORIZONTAL)
<
texVertices = new float[] <
tx + tw, ty,
tx, ty,
tx, ty + th,
tx + tw, ty + th
>;
>

quadTexVertices.clear();
quadTexVertices.put( texVertices );
quadTexVertices.flip();

ARBVertexBufferObject.glBindBufferARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, vboQuadHandle );
ARBVertexBufferObject.glBufferSubDataARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, 0L, quadVertices );
glVertexPointer( 2, GL_FLOAT, 0, 0L );

ARBVertexBufferObject.glBindBufferARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, vboQuadTexHandle );
ARBVertexBufferObject.glBufferSubDataARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, 0L, quadTexVertices );
glTexCoordPointer( 2, GL_FLOAT, 0, 0L );

ARBVertexBufferObject.glBindBufferARB( ARBVertexBufferObject.GL_ARRAY_BUFFER_ARB, 0 );

glEnable( GL_BLEND );
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
glEnable( GL_TEXTURE_2D );
glBindTexture( GL_TEXTURE_2D, texID );

glColor4f( 1.0f, 1.0f, 1.0f, alpha );

glEnableClientState( GL_VERTEX_ARRAY );
glEnableClientState( GL_TEXTURE_COORD_ARRAY );

glDrawArrays( GL_QUADS, 0, 4 );

glDisableClientState( GL_TEXTURE_COORD_ARRAY );
glDisableClientState( GL_VERTEX_ARRAY );

glDisable( GL_TEXTURE_2D );
glDisable( GL_BLEND );
>
>

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *