New Comic Book Theme!

Zenjiro

@salor10 Let's not flood them here. How about you open a ticket on my github and upload them there. Or if you prefer, you can post them here but do so as a dropbox, or google drive link. That way it doesn't generate a preview, and it will be less spam-y.

salor10

@Zenjiro https://drive.google.com/file/d/1O3r5TOYgAabiCariRV51y-dMp3pJ0QvN/view?usp=sharing link for the images.

Zenjiro

Progress from here on out is probably going to be slow. I went ahead and uploaded 3.2-Beta2 to my repo.

However any issues or tickets reported here, or on github, I will do my best to swiftly fix if possible.

Adding any new themes will be secondary to fixing what is already created, and a lot of what I created has some graphical issues here and there.

kzieres61

@TMNTturtlguy said in New Comic Book Theme!:
When I follow these steps, my retropi does not let me pick a system like the arcade does.

I worked my way around it and got it to FINALLY ask about the system to use, but it refuses to launch the TMNT Arcade game (I have not tried any other rom yet in this folder) the TMNT game DOES work in my arcade folder.

Did I miss something here?

Zenjiro

@kzieres61 Not entirely sure what you mean. If you are able to launch a game from the Arcade, or any other system for that matter, you should be able to launch it from the custom system you created, as long as you added it to the collection's config.

Here is a small ~2min video of me adding the games from Arcade to a Custom System/Collection and launching them successfully: https://www.dropbox.com/s/x700fhzkhmnf9d3/2020-05-15 18-16-28_2.mp4?dl=0

I'd also imagine you could also edit the es_systems.cfg to get something similar, but you would be locking yourself in to a specific emulator to launch. So I do not recommend it.

<system>
	<name>tmnt</name>
	<fullname>Teenage Mutant Ninja Turtles</fullname>
	<path>C:\PATH_TO_COLLECTION\tmnt</path>
	<extension>.zip .ZIP .7z .7Z .etc .ETC</extension>
	<command>COMMAND_LINE_LAUNCH_OF_SYSTEM</command>
	<platform>tmnt</platform>
	<theme>tmnt</theme>
</system>

If anything else, if your issue persists after following the video then more than likely the issue is not related to the theme.

kzieres61

@Zenjiro
I was following this guide for my Retropie 3B+ The QUICk run by on the screen is no config file loaded

Ok, Now that @meleu has had a chance to release is awesome script for getting the roms to work with the custom systems in the theme, i want to share with you an alternate method of doing this. This is the method that initially inspired @meleu to create his script. I would suggest that his script is better for most cases than my method. Here is a link to his newest script: Create a custom ES system able to launch games for many systems however my method also has valid uses.

Create multiple emulator systems:

This method of creating custom systems like TMNT, Mario, Mega Man, and Fighting allows you to create systems with games from any system you want in one location. You can group all of your TMNT games into one list. This method requires the creation of a new system that functions exactly the same as the current Arcade folder works. The Arcade system allows you to place all the Mame, FBA and Neo Geo roms into one place and then select the appropriate emulator to launch them. This is the same concept. If you use this concept you will either be copying roms into another folder, which means duplication of roms, or you want to create a group of systems like TMNT, Mega Man, Mario, Batman and do not wish to have the standard, NES, Sega, Arcade systems. I am using this method on a bartop arcade that will only have TMNT games. No other systems will be present. If you wish to use this concept, but don’t want to have copies of games, or to set the emulator yourself, please see the link to @meleu thread and his scripts to create links to games. It is definitely the best way to proceed if you plan to keep the standard system folders and have the games located into the special systems.

go to /home/pi/RetroPie/roms and create a new folder named: "TMNT" (note use the same steps in this process and change TMNT to whatever you want.

Add roms from any system you would like to this folder, that is right ANY rom, any system!

Go to your favorite theme and choose a system to copy, copy the folder and rename it "TMNT" this will create a duplicate of that system including logos so you will need to edit that if you can. This is the hardest part of the process. If you use my ComicBook Theme I have provided the TMNT system so there is no work to be done!

Download the needed files for the following steps here: mega.nz link

Create a TMNT folder for our conifgs and retroarch files:
a) go to /opt/retropie/configs create a new folder named "TMNT"
b) copy the files in the folder "copy these to cofigs folder" from the download link into the new TMNT folder.
c) Open retroarch.cfg modify line 3 - delete "arcade" and replace with "favorites" it should look like this:
input_remapping_directory = "/opt/retropie/configs/TMNT/"
d) Open emulators.cfg within the favorites folder. This is where we need to add in the emulators we want to be able to run and launch in our new Favorites System. In the folder in the download i have added lr-fceumm, lr-nestopia (for NES) and lr-genesis-plus-gx and lr-picodrive (for genesis). To add other systems, simply open any system folder within /opt/retropie/configs/ and open the emulator.cfg file. Copy the entire system line for each emulator and paste into the file in your favorites folder. Be sure not to copy the default = line as we only can have one default set in the folder.

Edit your es_systems.cfg file. /etc/emulationstation/ ALWAYS make a backup of the original and I suggest you copy the es_systems.cfg file to the following location /home/pi/.emulationstation edit the es_systems.cfg in this location. Copy and paste the system I have created for you in the es_systems.cfg in the folder. Change the names everything you desire, leave the <extension> line as is for every system you create. Example below:

<system>
<name>TMNT</name>
<fullname>TMNT</fullname>
<path>/home/pi/RetroPie/roms/TMNT</path>
<extension>.fba .zip .FBA .ZIP .smd .nes</extension>
<command>/opt/retropie/supplementary/runcommand/runcommand.sh 0 SYS TMN %ROM%</command>
<platform>arcade</platform>
<theme>TMNT</theme>
</system>
Now for the boring explanation of what you see above and how it works:
a) <Name> name of the system folder your roms are in.
b) <fullname> is the full name of the system.
c) the <path> is the path to the roms folder we created in step 1 above.
d) the <extension> are all of the file types of the roms you want to have in your favorites folder. In the above I have provided all the extensions for the main systems available on retropie.
c) the <command> is telling the startup to use the favorites folder we just created in step 4 to launch the rom using the runcommand.
d) <platform>you can put just about anything in there, some things might use this, i think the naming for the new screensaver build might use this line? Stick with Arcade to avoid error messages when shutting down, however I don’t believe the message means anything.
e) <theme> this directs the sytem to display the "TMNT" folder from within your theme. We created this in step 3.

That is it. Now restart your system. You should see the TMNT system in the theme with a list of games you put in the roms folder. The gamelist and metadata are not created for you, so you can rescrape, or recreate a new gamelist for each system. On launch of the games, you will need to select the emulator you want to use. This is similar to using the Arcade folder and launching FB Alpha and Neo Geo roms where you will need to select the emulator. If bios are needed, you will also need to place those in the appropriate location.

kzieres61

@Zenjiro I undid all that I did from Turtle's post, and tried your way in the video.

When i make the theme I see it in my list of "systems" but none of the games show up in it. Also, when I tell it I'm done editing the theme, and restart the retropie the "system" goes away?

kzieres61

@Zenjiro NM I see My mistake now!! when making the theme's, I did not go into the other systems and designate them to go to the TMNT favorites file. TY for the vid!

Zenjiro

Another small bit of news, this is probably more geared towards those who wish to help expand and develop this theme.

I have created a new repo called: Comicbook-Theme_Assets

This repo is still in its infancy, but I will be uploading all my raw editable image files to this repo. Think of this repo as the "source-code" for the theme's comics, system images, and comic_rips before they are rendered and added to es-theme-comicbook.

I keep everything in GIMP's .xcf file format. Why GIMP and not Adobe Photoshop, you ask? Because GIMP is open-source, free, and it gets the job done. I don't want expensive software potentially gating passionate people who would like to contribute.
I will be adding tutorials and guides for those who wish to learn.
I highly encourage others who wish to add their creations to es-theme-comicbook to submit pull requests through Comicbook-Theme_Assets that way it will be easier to render and test before adding into the main repo.
Because I am using some assets provided by @TMNTturtlguy in his ComicBook-Templates repo I will be honoring the same license from this theme.
I will provide submission details in the Readme file, along with other helpful tools.

If anyone else has any ideas or concerns about this I am all ears. I hope this sparks some cool creative advancements for this theme.

Clyde

@Zenjiro Kudos for your efforts, and especially for choosing free software like GIMP that everyone can use regardless of their operating system and personal funds. 👍

Zenjiro

And to be clear, I am NOT anti-Photoshop. If you wish to use Photoshop, Krita, or Paint.NET over GIMP go for it. I just ask that if you plan on submitting something, it be submitted in such a format that at a minimum GIMP is able to open and render the final product.

I know GIMP can open .psd files (or at least some of them) so it should be simple enough to import a .psd file into GIMP then export it as .xcf. I have not tested the other image editing suites.

Other great tools that I use are waifu2x-caffe for upscaling and denoising images. And PNGquant/Pngyu for optimizing .png files for smaller file sizes. (I recommend updating the pngquant that is packaged with pngyu).

In the future I plan on going into greater detail with these tools in the readmes and tutorials.

Krakatoa

Is anyone keeping the 4:3 format updated with images? Its seems to lagging behind

rodclemen

Would anyone be able to help me out, and make the comic text for Cave ?

I cannot for the life of me figure that Adobe Illustrator out :(

Zenjiro

@rodclemen I don't mind making it. What colors? And is it for Cave Story or something else called Cave?

@Krakatoa I myself am not maintaining the 4:3 branch. It simply requires way to much work to the comics twice. Once for 16:9 and once for 4:3. I will however upload a 4:3 template for others to use, so that if anyone else wants to take on the task of maintaining the 4:3 branch they are welcome to do so.

rodclemen

@Zenjiro its a game system called Cave, and as you can see the "official" colours were red and green, so something in that colorrange :)

if you were able to make a video doing the text that would be bloody awesome ;) because I would be able to see how its done (I have some other names I wanted to get done as well, and some collections as well).

Zenjiro

@rodclemen Sure I can do a small video. But it wont be until Sunday or Monday. I'm not in a good location to do the recording. But I do need to make a tutorial video so it's a good excuse to make one. Everything will be done in GIMP as I do not own Adobe Illustrator or Photoshop.

Also If I do the colors of Green as the text's base, with Red Outline and Red Dot-Matrix it might look kind of "Christmas-y" I think going with a black Dot-matrix with a high occupancy might look better. I'll give you a couple to choose from.

rodclemen

@Zenjiro you are most awesome! a GiMP tutorial will be fine, I can convert that to Photoshop at least :)

Zenjiro

@rodclemen Is this any good?

I did make a tutorial vid, but after the recording I discovered that OBS did not capture the drop down menus. So I will have to redo it.

rodclemen

@Zenjiro oh yes! :)

Zenjiro

As promised here is a small tutorial video 13min long: System Image Tutorial Download for best quality.

I did not have any audio as it is very self explanatory, but I will dictate some notes here for some context.

Prerequisite is that you install the Shaka-Pow font before you start up your Image Editor Suite.
Start with a 2400x900 (8" by 3") pixel canvas with 300dpi
Create 5 Blank Layers: Base, Stroke - White, Stroke - Black, Stroke - Color, and Gradient.
(Optional) If you have an image with colors that you wish to use you can add it as another layer. I used the cave.png file that was provided to me, as the base for all the colors in this system image.
On the Base Layer create a Text Layer using the Text Tool with Shaka-Pow font at 150.0 pt, and have the text centered, then adjust the text box so that you can center the word(s) in the dead center of the canvas. It does not need to be perfect, as you can always adjust the canvas size later if needed, but life is easier if you do it now.
Next adjust the text kerning so that they are just barely touching one another.
(!!ATTENTION!!) Now create a "Path" of the text by right clicking on the Text and selecting "Path from Text" Once you have created the Path you must not move the Text layer at all, else it could cascade and you will have to start over again. It is best to no longer touch the Text at this point. If you want duplicate the layer so that if you do make a mistake you can revert it.
Move the Text Layer so that it is on top of the Stroke - Black, but below the Gradient and Stroke - Color Layer.
Next select the Stoke - White layer and change your color to all white.
Select the Paths Tab and right click the path you just created select "Stroke Path..."
Line Width should be 25.0pt, Cap Style Square, Joint Style Miter, and Miter Limit should be 4.0. Select Stroke.
The White Stroke should appear behind the text, and you will repeat the same process, only this time you will select the Stroke - Black Layer, and the only things to change is the Color (to black obviously), and Line Width which should be 16.35pt
Do the same thing again but for the Stroke - Color Layer, using the color of your choice. Line Width should be between 1.50pt and 2.50pt. I normally use 2.50pt. You also want to change the miter to 11.0, this helps with certain letters like 'N', 'M', 'V' which have sharp pointed edges, and with the triangle in the 'A'.
Now import the Dot-matrix, and keep everything if prompted, place it above the Text Layer, but below the gradient and move it around on the canvas till the small dots are just barely on the text still.
Right-click your Text Layer and select "Alpha to Selection" this should highlight everything that is text with a selection line.
(!!ATTENTION!!) Be sure to select the Dot-matrix layer after all the text has been added to the selection, before continuing.
While on the Dot-matrix layer, invert the current selection, then clear/delete. You should be left with only the text having the dot-matrix on it. You can then, and should, deselect everything.
Next duplicate the Stroke - White Layer and place the Duplicate Layer below the original. Rename it if you want for your convenience.
Hide the original Stroke - White Layer, it will not be obvious at first that it is hidden as the duplicate is right underneath it, then with the fill tool, color it whatever color you want. Normally the Stroke - Color layer and this layer are the same, but this is art, make it whatever you want it to be.
Move the layer down a little and to the right. Then turn the original Stroke - White Layer on.
Move the Duplicate Colored layer till it aligns well with one of the edges of your choice and move it down to your liking.
Next go back and select the color you used for the Text, and add the text to your selection again. Then select the Gradient - Layer
With the gradient tool (I normally use Linear Gradients, but choose what you like and experiment if you want) add the gradient on the Gradient - Layer. The Gradient - Layer should be below the Stroke - Color Layer and above the Dot-Matrix Layer.
Lastly, select the Duplicated Stroke - White Layer that you colored earlier and add 4 Drop Shadows. Each one with a blur radius of 30.00. And each one with a different X,Y combination. (20,20) (-20,-20) (-20,20) (20,-20)
At this point you are pretty much done.
For the Retropie you will need to make some finalizing adjustments. ALWAYS scale the final product to have a width of 2000p with a dpi of 72.0dpi any higher and it will not render on the Raspberry Pi. Then export the image as a png file and uncheck all options.
I did not show it in the video, but I would recommend using something like PNGquant/Pngyu and compressing it from a 256bit to 128bit image. Which can cut the overall size of the image down 70-80%
After-Thoughts Some System's or Collection's images might be larger than the 2400 x 900p feel free to adjust the canvas to the length that it needs to be, before creating the stroke path. You will also need to ensure all other layers are also adjusted to the new canvas size. Just be sure that once you are ready to export you make sure the final product is no larger than 2000p with 72.0dpi.