[Função] Nine Slice Scale (Nove Fatias)

Está querendo criar um estilo próprio de janelas, mas não está afim de editar uma imagem para cada tamanho de janela? Você poderia usar apenas uma imagem e então redimensionar ela com os novos parâmetros scaleX e scaleY do tfm.exec.addImage, mas isso gera alguns problemas. Veja abaixo:

Note como as imagens ficam distorcidas. Os cantos ficam desproporcionais conforme você estica as imagens. Claramente não é uma boa forma de reutilizar uma imagem para utilizar em diversos tamanhos.

Para resolver este problema, existe uma técnica no design de interfaces que se chama nine slice scaling, ou nova fatias. Com essa técnica você divide a imagem de base em 9 pedaços, 4 vão ser os cantos, 4 são as laterais e 1 vai ser o centro. Veja abaixo como ficaria a divisão de uma imagem:

O intuito de fazer isso, é que ao redimensionar a imagem, você mantenha a proporção dos cantos e estique apenas as laterais e o centro. Veja como fica:

Para isto funcionar no Transformice, você deve dividir a imagem base em 9 imagens diferentes. Na função que eu fiz, você deve fazer upload das 9 imagens (pode ser por aqui) e então colocar numa tabela assim:

Code Lua

1
2
3
4
5
6
7
8
9
10
11

fatias = {
    {img="17f85ff6afb.png", w=28, h=29},
    {img="17f86018555.png", w=8, h=29},
    {img="17f8601f67b.png", w=28, h=29},
    {img="17f860256e6.png", w=28, h=4},
    {img="17f8602b3f0.png", w=8, h=4},
    {img="17f86038225.png", w=28, h=4},
    {img="17f8603de5f.png", w=28, h=29},
    {img="17f86043b4a.png", w=8, h=29},
    {img="17f86049374.png", w=28, h=29},
}

É muito importante colocar no w e no h a largura e a altura da imagem respectivamente. A ordem das imagens também importa: a primeira é o canto superior esquerdo, a segunda é a parte de cima, a terceira é o canto superior direito e assim por diante, veja abaixo o guia:

Depois de criado o modelo, você pode utilizar a função nineSlicedRect para desenhar uma janela.

nineSlicedRect(model, target, targetPlayer, x, y, width, height)

table model - uma tabela com o modelo pronto de imagens
string target - mesmo tipo de target utilizando no addImage ("&10", ":10", "~1", etc)
string targetPlayer - o jogador que vai enxergar a janela
int x - posição x (ancorado à esquerda)
int y - posição y (ancorado ao topo)
int width - largura da janela, incluindo as bordas
int height - altura da janela, incluindo as bordas

A função retorna uma table com o id das imagens para que você possa remover depois.

Abaixo a função para utilizar no código:

Code Lua

1
2
3
4
5
6
7
8
9
10
11
12
13

function nineSlicedRect(source, target, targetPlayer, x, y, width, height)
    return {
        tfm.exec.addImage (source[1].img, target, x, y, targetPlayer, 1, 1),
        tfm.exec.addImage (source[2].img, target, x+source[1].w, y, targetPlayer, (width-source[1].w-source[3].w)/source[2].w, 1),
        tfm.exec.addImage (source[3].img, target, x+width-source[3].w, y, targetPlayer, 1, 1),
        tfm.exec.addImage (source[4].img, target, x, y+source[1].h, targetPlayer, 1, (height-source[1].h-source[7].h)/source[4].h),
        tfm.exec.addImage (source[5].img, target, x+source[1].w, y+source[1].h, targetPlayer, (width-source[1].w-source[3].w)/source[2].w, (height-source[1].h-source[7].h)/source[4].h),
        tfm.exec.addImage (source[6].img, target, x+width-source[6].w, y+source[1].h, targetPlayer, 1, (height-source[1].h-source[7].h)/source[4].h),
        tfm.exec.addImage (source[7].img, target, x, y+height-source[7].h, targetPlayer, 1, 1),
        tfm.exec.addImage (source[8].img, target, x+source[7].w, y+height-source[8].h, targetPlayer, (width-source[1].w-source[3].w)/source[2].w, 1),
        tfm.exec.addImage (source[9].img, target, x+width-source[9].w, y+height-source[9].h, targetPlayer, 1, 1),
    }
end

Outros modelos para utilizar:

Code Lua

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

windows95button = {
    {img="17f83de5e4a.png", w=3, h=3},
    {img="17f83decc1d.png", w=1, h=3},
    {img="17f83df26b3.png", w=3, h=3},
    {img="17f83df8406.png", w=3, h=1},
    {img="17f83dfe21f.png", w=1, h=1},
    {img="17f83e04755.png", w=3, h=1},
    {img="17f83e0a283.png", w=3, h=3},
    {img="17f83e0fd89.png", w=1, h=3},
    {img="17f83e1586f.png", w=3, h=3},
}

windows95window = {
    {img="17fcc19defe.png", w=3, h=20},
    {img="17f8400d793.png", w=1, h=20},
    {img="17f840196d7.png", w=3, h=20},
    {img="17f83df8406.png", w=3, h=1},
    {img="17f83dfe21f.png", w=1, h=1},
    {img="17f83e04755.png", w=3, h=1},
    {img="17f83e0a283.png", w=3, h=3},
    {img="17f83e0fd89.png", w=1, h=3},
    {img="17f83e1586f.png", w=3, h=3},
}

paint = {
    {img="17f841eb960.png", w=16, h=16},
    {img="17f841f1ba0.png", w=68, h=16},
    {img="17f841f7a7d.png", w=14, h=16},
    {img="17f841fdc5a.png", w=16, h=66},
    {img="17f8420320c.png", w=68, h=66},
    {img="17f84208872.png", w=14, h=66},
    {img="17f8420fb8a.png", w=16, h=16},
    {img="17f84215ba6.png", w=68, h=16},
    {img="17f8421ca26.png", w=14, h=16},
}

http://images.atelier801.com/17f863e0d75.png

Dernière modification le

Sofri muito com aquele problema, nunca tive paciência pra tentar achar outras formas hehe Salvou nonão

Sensacional cara você salvo minha vida inves de criar uma do zero eu posso agora criar e organizar

Dernière modification le

mas como faço pra remover as img

Dernière modification le

Sklag a dit :
mas como faço pra remover as img

Você precisa colocar o resultado da função numa variável, que será uma tabela, então pra remover é só dar tfm.exec.removeImage() nos elementos dessa tabela.

Code Lua

1
2
3
4
5
6

ids = nineSlicedRect(...)

-- pra remover
for i, v in pairs(ids) do
  tfm.exec.removeImage(v)
end

Ninguem a dit :
Sklag a dit :
mas como faço pra remover as img

Você precisa colocar o resultado da função numa variável, que será uma tabela, então pra remover é só dar tfm.exec.removeImage() nos elementos dessa tabela.
Code Lua
1
2
3
4
5
6
ids = nineSlicedRect(...)

-- pra remover
for i, v in pairs(ids) do
  tfm.exec.removeImage(v)
end

obrigado

Muito bom None, eu já conhecia o conceito mas nunca pensei em aplicar ele no tfm.

@Edit: Seria legal se o Tig nos permitisse criar nossas próprias interfaces para os minigames, usando o design do jogo mesmo.

Dernière modification le

Gamedroit a dit :
Muito bom None, eu já conhecia o conceito mas nunca pensei em aplicar ele no tfm.

@Edit: Seria legal se o Tig nos permitisse criar nossas próprias interfaces para os minigames, usando o design do jogo mesmo.

em fala nisso

Gamedroit a dit :
Muito bom None, eu já conhecia o conceito mas nunca pensei em aplicar ele no tfm.

@Edit: Seria legal se o Tig nos permitisse criar nossas próprias interfaces para os minigames, usando o design do jogo mesmo.

em falando sobre interfaces vo tenta fazer uma interface usano o design de pokemon
se quise vc pode faze uma pra mim kk

Dernière modification le

#11

o ninguem qual editor vc usou pra separa essas imgs?

English	Français
Português do Brasil	Español
Türkçe	Polski
Magyar	Română
العربية	Skandinavisk
Nederlands	Deutsch
Bahasa Indonesia	Русский
中文	Filipino
Lietuvių kalba	日本語
Suomi	עברית
Italiano	Česky
Hrvatski	Slovensky
Български	Latviešu
Estonian

Langue