Custom hero clothes with TNTAnimator class?

Apollo14 · July 2018

Hi guys!
IMO customizable skin system is extremely important part of game design. Currently in many game genres it is pretty much mandatory. There was discussion on forum about customizing hero clothes.

I've managed to create setup, using TNT Animator class.
But I'm not sure, if it is even optimal to do it this way.

For tiny games it may work well. But what if we have, let's say 20 skins and 10 advanced hero animations. There will be 20 huge texturepacks with all the consequences. And besides hero we may need to customize other stuff.

I've attached whole gproj with textures.
Can you take a look and suggest some improvements?
Thanks!

P. S. And how to properly use CTNTAnimator:free() function? I've tried to free my 'hero.anim' tnt object before switching to another skin, always got errors.

main.lua:

application:setBackgroundColor(0x2c3e50); application:setKeepAwake(true)
 
--***Add 3 texture packs with skins:
local skin1texturePack = TexturePack.new("pics/skin1.txt", "pics/skin1.png")
local skin2texturePack = TexturePack.new("pics/skin2.txt", "pics/skin2.png")
local skin3texturePack = TexturePack.new("pics/skin3.txt", "pics/skin3.png")
animLoader1 = CTNTAnimatorLoader.new(); animLoader1:loadAnimations("pics/skin1.tan", skin1texturePack, true)
animLoader2 = CTNTAnimatorLoader.new(); animLoader2:loadAnimations("pics/skin2.tan", skin2texturePack, true)
animLoader3 = CTNTAnimatorLoader.new(); animLoader3:loadAnimations("pics/skin3.tan", skin3texturePack, true)
 
--Add hero to stage:
local hero=Hero.new();
stage:addChild(hero); hero:setPosition(205,290)
 
--Add 3 buttons (R-G-B) to stage:
local redBtn=colorfulBtn.new("0xe74c3c",40,"R",hero)
local greenBtn=colorfulBtn.new("0x27ae60",190,"G",hero)
local blueBtn=colorfulBtn.new("0x3498db",340,"B",hero)
 
--Move our hero's y-position with sine waves:
local t,speed=1,.1
stage:addEventListener(Event.ENTER_FRAME, function()
	t+=.3
	hero:setY(30*math.sin(t*speed)+290)
end)

hero.lua:

Hero=Core.class(Sprite)
 
function Hero:init()
	self.anim = CTNTAnimator.new(animLoader1)
	self.anim:setAnimation("FLY")
	self.anim:addToParent(self)
	self.anim:playAnimation()
end

colorfulBtn.lua:

colorfulBtn=Core.class(Sprite)
function colorfulBtn:init(btnColor,xPosition,letter,hero)
	self:setPosition(xPosition,550); stage:addChild(self)
	self.pixel=Pixel.new(btnColor,1,100,50); self:addChild(self.pixel)
	self.letter=TextField.new(nil, letter); self:addChild(self.letter)
	self.letter:setTextColor(0xffffff);self.letter:setScale(4.5);self.letter:setPosition(40,42)
 
	self:addEventListener(Event.MOUSE_DOWN, function(event)
		if self.pixel:hitTestPoint(event.x,event.y) then
			event:stopPropagation()
			self:setAlpha(.7)
		end
	end)
 
	self:addEventListener(Event.MOUSE_UP, function(event)
		self:setAlpha(1)
		if self.pixel:hitTestPoint(event.x,event.y) then
			event:stopPropagation()
			if letter=="G" then
				print"gotta change skin to green"
				hero.anim = CTNTAnimator.new(animLoader2)
				hero.anim:setAnimation("FLY")
				hero.anim:addToParent(hero)
			elseif letter=="B" then
				print"gotta change skin to blue"
				collectgarbage()
				hero.anim = CTNTAnimator.new(animLoader3)
				hero.anim:setAnimation("FLY")
				hero.anim:addToParent(hero)
			elseif letter=="R" then
				print"gotta change skin to red"
				hero.anim = CTNTAnimator.new(animLoader1)
				hero.anim:setAnimation("FLY")
				hero.anim:addToParent(hero)
			end
		end
	end)
end

oleg · July 2018

I do not know how to say it in English

1- можна скіни робити не в png а у svg http://docs.giderosmobile.com/reference/gideros/Path2D#Path2D

2 - можна колір міняти режимами накладення накладаючи зверху маску лише тії частини тіла якій треба змінити колір

по конкретно твоїй мухі:
1. розділи муху на частини - 1-крило 2-тіло кольорове, 3.тіло інші деталі
додаєш всі частини в спрайт окремии бітмапами
на крило чипляєш якір в місце його приєднання до спини і робиш анімаці. поворота крила синусом і ентерфрейм

колір тіла міняєш трансформколор
інше крило робиш з тої самої текстури фліпнувши його
бінго..

Apollo14 · July 2018

1. розділи муху на частини - 1-крило 2-тіло кольорове, 3.тіло інші деталі
додаєш всі частини в спрайт окремии бітмапами
на крило чипляєш якір в місце його приєднання до спини і робиш анімаці. поворота крила синусом і ентерфрейм

this could work for me, but I'm scared to imagine how much time it will take to monkey-code so many animations (I'm not doing mini-game from flash portal era)

though for many game objects this method will actually be useful

@oleg did you use TNT Animator for Gideros? Don't you like it?

oleg · July 2018

я використовую власний редактор, також можна використовувати live coding від ZeroBrane.
а кодом анімуати дуже просто - звичайний копіпаст формули і коректування якорів, швидкості і амплітуди

ps\\ велику гру зробити не проблема, проблема в тому що займатись однією грою 2 роки надоїсть

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Custom hero clothes with TNTAnimator class?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Custom hero clothes with TNTAnimator class?

Comments