Tuesday, 4 December 2018

Importing Character From lllustrator To DragonBones


1. Illustrator PSD export

There is no support for Illustrator file format in DragonBones. However Illustrator has an option to export a file in .psd format. 

  1. In Illustrator Go to File > Export > Export as..

  2. From the resulting windows pick psd as format
  3. Give it a name and export.
  4. Drag and drop the psd file into DragonBones

Import a psd file into DB


You must have a project opened first before you can import a psd into DragonBones

2. Not Working !


So you might encounter a problem when the import actually doesn't work as it should be. Have a look at the following GIF


Import stuck


This is less of a DragonBones problem more like how your character inside Illustrator is structured.

Examine the following two figures.



Figure 1 has different layers with objects inside that layer but these objects inside the layer are grouped with other objects.

Figure 2 has a simple layer with no grouped objects. 

PSD file of figure 1 will be stuck while the PSD file of figure 2 can be imported into DragonBones without problem. So the issue here that DragonBones can't import grouped Objects or things like nested layers as in fig. 1. You have to keep your layers as simple as possible. 

2.1 How to keep file structure and still be able to import

Now we can overcome this problem with a different way importing into DragonBones. If you have only Illustrator installed but not Photoshop this will not work. We need Photoshop because we need to do very small edit to the exported psd file.

So once again export a psd file from your illustrator.

The export will make a group folder for each layer as shown in left picture.

Open your psd file in photoshop.






What you have to do before exporting from Photoshop is to merge each group folder. So the layer structure will be exactly the same as in Illustrator.

For this purpose Right click on group folder then "merge group"

Repeat for each group folder.












2.1 Install DB PSD export plugin

When you open DB and go to help there is a field "PSD export plugin installation guideline"
When you click on it you get a good explanation of how to install the PSD export plugin. Simply follow the instructions there and that's how you install it. I think nothing more to explain here.


2.2 Export 

Go to File>scripts>exportToDragonBones
Export psd file using the DragonBones plugin for Photoshop




3. Character is imported


This is the same character we previously couldn't import through Drag and Drop. But having edited the psd file with merging the layers then simply using the DragonBones plugin we were able to import it easily into DragonBones. The whole things takes less than 2 minutes.


Fun fact: PSD import feature is added in DragonBones 5.6

1 comment:

  1. Ya çok ilginç as bayrakları as as :) Bende Godot Engine'de 3 oyun yaptım. Öğrenmeye devam ediyorum. Sonradan okudum hakkımda kısmını. Türk olduğunuzu görünce gurur duydum. Anlatım tekniğiniz gerçekten harikaydı. Artık oyunlarımda kendi karakterimi oluşturmayı düşünüp Google'dan araştırınca blogunuzla karşılaştım. Şimdilik sadece cepten okudum. Bilgisayara geçtiğimde hepsini birebir denemeye çalışacağım. Öğretici çok için teşekkürler.

    Bu da benim ilk oyunumdu. Oyunlarımı incelersiniz.
    https://play.google.com/store/apps/details?id=com.maxi.savethepuka

    ReplyDelete