Tip:
Highlight text to annotate it
X
OK so you've got your tools. Now for this demo I am going to be using a
windows machine so I can use the GunApp.exe to test on the same machine that I am developing
my weapon on. If you are on a mac with a device attached
it's a little more difficult because you have the extra step of copying the content onto
the device each time you want to test, but otherwise everything
else is the same.
I started my setup by downloading the Windows version of GunApp.
Which is this file here. Then I've extracted all the existing mod weapons
into the assets/ directory.
As you can see if I open up the gunlist.txt here
Every time I press one of these numbers it will open the corresponding weapon.
So lets get started.
The very first step is probably the the most important thing when working on a weapon,
and that is to choose an appropriate existing weapon as a base.
Obviously I could make a handgun or sword out of the existing mod weapons but
I want to do something a little different to show how flexible the system is.
I decided I want to make a TOASTER weapon today. This TOASTER will shoot badly burnt
toast at anyone I want.
So in this case, what weapon should I choose as a base?
Well the lightsabers are a bad choice because they don't move anything like my toaster should
move. Let's take a look at Bazinga!
Bazinga! is a poor base for this because in Bazinga, only the frames change,
as you can see, there's no movement in the image.
Only frames changing.
The phaser could work... I do want the toaster to move somewhat like
a handgun.
But actually I think the scribble gun here is the best choice in this case, because the
scribble gun also has a spawning particle coming out of the end.
And I want toast to spawn out of the end of my toaster towards the side of the screen
just like this.
OK
So now that I've decided on a base, I can take the scribble gun xml, it's called 'drawGun.xml'
and then copy it into a new folder that I will call the same as my new asset.
Lets call the folder 'toaster'. ...and while I'm doing this I should also
take the .json file and the small image file while I am at this.
these 2 files are related to how the weapon displays on the GunApp menu.
Let's rename all these files. Now remember this is still just a copy of
the drawGun.xml
Now at this point you should set up your sounds and images to whatever you need,
so I am going to do that now...
OK so I made my assets, and I put them all next to the toaster.xml
notice that I named them all uniquely to my asset. In my case 'toaster'.
Doing this is important so that my assets don't collide with assets from any other mod
weapons or with assets already in GunApp.
So here I have several images of my toaster, lets take a look...
these here are for reloading. these are for the shot. I have 1 image for
the particle... and I want this toaster to be able to run
out of ammo so I made this ammo that will look like an untoasted loaf of sliced bread.
When I line this up it will look like a loaf. Notice that image frames for GunApp have to
be 600x400, and that images for particles have to be at
any power of 2: that means 16x16, 32x32, 64x64, or 128x128 ...etc etc
in this case I chose 128. These are requirments related to the internal
workings of GunApp and your iOS device.
Btw there are limits to how many total images you can use in a weapon
I think its 13 or 14 total. Weapons with many images take longer to load,
so it's best to stay away from the limit.
Now, for sounds, I have this 'reload - ding' toaster sound...
and this other sound that I will use as a firing sound...
For the reload I made sure that it times up with the scribble gun reload sounds so that
the animation will still match when I swap one sound for the other.
So lets hook it all up by modifying the xml.
First the images. We just have to swap the old ones out with
my new ones...
and emitters go inside the emitters section. in this case it's just called 'toast'
And we want to keep the blend the same on this one because we are going to use
alpha transparency just like the Scribble Gun bullet particle.
Which is just an image with some transparency.
Now the sounds. You can see them in the 'sounds' section.
same idea. Swap out the old ones with the new ones.
Now it's time to set up the animations. You can see in the 'animations' section you
have different animations. Here's 'shot1'.
and here's another animation... It's called 'reload'.
and that should be all we have... and it is.
Now another reason that I chose the Scribble Gun to start with is that it has the same
number and type of animations that I want for my toaster weapon: a shot and a reload.
So hopefully I won't have much to do in the next step of setting up the animations.
Lets take a look at the weapon as it is now in GunApp.
I'm going to copy these into the assets/ folder. I'm going to assign my weapon a number in
gunList.txt so I can call it by just pressing a button.
Here we go. The movement is ok, but the frames don't really
match, the bullets are weird and the particle is weird.
Let's tackle these things one at a time.
The first thing is that it has an eject. We don't need a cartridge ejecting for this
weapon so I'm going to remove it now. The way I do that is by going into the ejectCartridge
section and setting the image to -1 and the scale
to -1. If you take this off completely GunApp will
crash so you have to tell it specifically that there is no eject.
Next we have to take it out from the frame that used to call the eject...
and this can just be deleted.
Let's save it and try it again. That's better let's go on to the next thing.
The next big thing is to get these images swapping properly.
So the way that I do that is by going into the frames
and in each of these frames you see that there is an image being called here.
In this case image '0', in this case image '2', '1'.
and these correspond to the images up here. You can see these have an 'id'
That id is exactly this 'img'. This is telling GunApp on this frame use the
image with id '0'... and on this frame use the image with id '3'.
Now each frame represents 1/30th of a second. So 30 frames = 1 second, to give you an idea
of how much time is given to each one of these
and that comes out to 33.3 milliseconds for each.
So I'm going to take my time to swap these out.
OK so as I started working on my frames I ran into my first problem
look at my reload animation. Looks pretty messed up!
One of my frames seems to get stuck in the middle when I reload!
What the heck is going on? Well if this happens to you, and one of your
frames is stuck like this, the first thing to check is if you have ammo for your weapon
Which I do. Lets take a look at the xml
let's find the ammo node here it is.
Sure enough, my ammo is using the wrong image. It's using image '6'
which is just one of the frames this is what image 6 looks like
and it's also the same image that's stuck big on the screen.
Ammo always displays at its actual resolution, so an image set to the size of a full frame
will of course look wrong and take up the whole screen.
'ammo' always displays at it's actual resolution so an images that's the size of the full frame
that's set to ammo will of course look wrong and take up the whole screen.
This is just because it was left over from the scribble gun and now corresponds to the
wrong image. So let's fix it.
This should be image 8 'toastAmmo.png'
Let's save it and test. Much better.
Now I seem to have a different problem. The background seems kinda weird on the reload.
It's black.
Well, every animation has the ability to have a 'background' image if you want it to.
let's take a look at the reload xml. It has a background that was set from the
Scribble Gun. Sure enough its using an image that was not
designed to be used as a background. It's using one of the frames.
If you want to use a background it has to be 480 x 320. and as I said before all these
images are 600 x 400. So let's remove the background by putting
-1 in the slot. and let's test it again.
nice.
OH and one thing about these frame numbers here
they are really for your convenience, GunApp doesn't care if they are in order or even
if they exist. Just make sure the XML syntax is preserved
if you change them or copy them around between animations.
OK let's see if I can wrap up the frame swapping now.
Alright, So I think I got it to where I'm satisfied with the animations.
And again, I got to this point only by changing the 'img' parameter on the frames.
Also I did do some slight tweaking to the images, incuding moving them up a little bit
to frame them better.
Now lets fix this particle. It's pretty wrong looking.
So to fix it I first have to look for the frame that is causing this particle to
spawn, and it's right here frame 2
it's indicated by this 'spawn' xml node that is a child of frame 2.
To fix this I am going to have to mess with all these values in here.
Now it would be a little cumbersome for me to explain
what they all do in the video so we made sure they have all been documented
in the wiki if you go to this page in step 4
look for the section called 'spawn particle attributes'
this, which is the same thing as this
and here, the function of every variable is explained.
Ok so I am going to adjust this now.
--- OK so by adjusting these numbers here I got
this pretty sweet toast jumping out! burnt *** toast of fury.
OH and Another thing I had to do was change which frame was causing the spawn,
It used to be frame 2 I moved it to here to frame 5 to time it better
with the sound the timing wasn't right.
One thing to know too is that you can have as many different spawn children of a frame
node as you want. In other words, you can have a bunch of these
different images spawning on the same frame.
So let's talk about the ammo now if our weapon doesn't require reloading
you don't need ammo either like maybe you are working on a knife... or
something that can fire continuously forever and if you want to do that
you can go up to the ammo section and you can delete all the bullets out of
here and change img="-1" and remove count="".
Then you can get rid of the reload animation like this
you can just delete the reload animation it can just be gone.
Now in this case, I do have ammo and I do want to reload so I'm going to leave
it.
now what if I want to change the amount of ammo that we have?
For example maybe I want this to be 20 bullets because real life bread loafs
have 20 breads. right now it's just 16
I can copy 4 of these and just paste them here
then I change the numbers. and most importantly have to make sure that
to update the 'count' too. it has to be 20 now
and remember it counts from 0 so even though it ends at 19 it's 20 total
If I do this wrong, GunApp will crash.
The next problem is that the ammo is not in a spot I want. These X and Y positions are
relative to the top left of the screen.
If I can get the first slice of bread to line up,
setting up the rest of the loaf should be easy since I know the resolution of the image
since I made it myself or of course I can use my image viewer and
it will tell me the resolution. In this case it's 16 x 64 pixels... and these
also have to be power of 2 by the way, but not necessarily square
like the particles So I am going to adjust these and make it
look more like a loaf of bread now.
OK so I set up the bread. I also changed my mind about how many to have, when I had 20
it was realistic but it didn't look good so I went it back
down to 15. Also you can control which of these draw on
top of others by reordering them. For example the last ones
draw on top of the first ones.
alright this is looking kinda
nice. BTW I don't have to restart GunApp every time
I want to see a change. If I want to test my change right away
All I have to do is press the key that I assigned to the weapon.
See it just reset right away.
OK now let's prepare the .json file and the toaster.small.png so that the toaster will
appear properly in the game menu.
This is what the .json file looks like and right now the toaster.small.png looks
just like the Scribble Gun So I'm going to fix this and we'll come back
to the .json The small png was easy enough, I just put
a picture of the toaster in there and kept it at 110 x 77 pixels
now the .json file has a couple of settings. The first is the weapon name
Lets put a proper name in there... Toaster a proper link to wikipedia
this is what the browser will go to when you hit the information button
and the category now I think the category for this weapon should
be the 'fun' category To make it appear in the 'fun' category I
have to go to the wiki and look up the index because I can't remember it.
It's here in step 5. The 'fun' category...
Is 305. let's put that here
and now let's test this thing out on the device!
alright let's try it out.. it should be in the fun category
and first lets try out information
sure enough, wikipedia toaster and
try the weapon perfect
Now we could call this weapon done here, so I am going to conclude the video.
But if you want your weapon to be as polished as the rest of GunApp watch my next video
to see how I add some finishing touches.