I have been slowly but steadily working on this on my own for a game/setting I am developing, and my goodness I adore this and can't possibly thank you enough. You are incredible and I've learned so damn much!
@@MidnightHatter Good stuff. Our GM is a master class crazy brain wizard that can pump out rules sets and content, but this time around each member is writing lore for various nations and groups. We're dabbling with AI to script out lore and encounters. Fun stuff.
I have a verse that is about to be on its 16th year of development and in late 2019, I began writing a rulebook for ToVTop 1.0, not knowing how to format or anything about tabletops, because me and my friends wanted a way to get into the ToV without reading the unabridged books, and we didn't want to pay for rulebooks. Now, I'm nearly finished with the core rulebook for ToVTop 1.5, thanks in part to members of my server who give me advice and playtest for me. Because of the support, I never really had any hiccups aside from the initial formatting problems, but now I've hit my first genuine obstacle. My complete inability to code and tech illiteracy. Cue your channel and this video. Thanks Midnight Hatter, you're actually really helpful unlike some other channels that completely confuse me or force me to use code that I have to pay for. Absolute genuine unit.
Wow thank you so much! I’m really happy you’re getting use out of this. I felt the same way. Lots of big ideas and not enough coding chops to make them real so I hope to help fellow travellers seize their gaming destiny. I’d love to see your system sometime! Cheers!
Wow! I want to do this for my game, but I need additional "stuff" as our engine works differently. I have no idea about how to program. I did some years ago, but I would never consider myself a programmer and whole new languages have come out since then. I do not know where to even start, so I just brushed up on HTML and CSS and now I am watching a Javascript tutorial. I have two games with home rules that I have to do this for. I am overwhelmed! GAAA!!!
I was going to comment on the same thing. JavaScript would be: function updateProfBonus() { var palyerLevel = parseInt(document.getElementById("playerLevel").value); document.getElementById("profBonus").value = Math.ceil((palyerLevel / 4) + 1); } Verified that this does work.
Yooo this is SO incredibly helpful. I have almost 0 coding experience, and I made a D&D 5e Homebrew set in the world of the One Piece anime. I'm running a campaign right now as a bit of a long form play test and my group keeps requesting digital character sheets. I can't wait to see more of these!
Hi, first thing, this video is gold, really educating. Now, I'm starting working on a project with a friend our idea was to add a list of items, armor and weapons with well known specs, and make those specs apply as modifiers. In my mind works like this: I'm gonna create a class with a big list of items in the HTML code, assigning them an ID like that i can recall them and apply their specs as modifiers in the character sheet by a java script, cus the armor and weapons specs + the strength of the PG it's supposed to make a certain amount of damage. Do you guys think can work ? It would be awesome if could do a video on it. 😁 Thanks for sharing ur knowledge.
Glad to be of some help! I would direct you to the latest video in this series that I made last month. It has a script to access Google Sheets like a cloud database and load values accordingly. It would be PERFECT for what you have in mind. I’d love to do a video on that as well when I get time. How to create a dynamic catalog of inventory items.
Thnaks man, I used this for my own homebrew Cyberpunk character sheet. I would highly recommend you look up the INTERLOCK system as that would be perfect for Gundam.
Thanks! Of all the systems out there I looked at I’ve never heard of Interlock. I’m going to check that out! I need to go back and finish making this sheet! Haha.
Im currently working on a Achtung Cthulhu 2d20 character sheet for roll 20 and trying my best, the guides aren't that great for a beginner like myself, I will check out your guide and see if that helps.
Good luck! I’ll be honest though, my guide isn’t really meant to be used with Roll20. You’ll have to avoid using tables because they don’t play nice with Roll20’s API. But that’s a formatting issue not a functional one.
Cool Gundam RPG... I was thinking of doing the same thing, but with Savage Worlds as the base instead. You should really check out Foundry VTT... It's totally worth the money. Use the Sandbox system it'll give you everything you need. And unlike roll20 you can write js macros as well as the normal chat ones.
@@Dyanosis It's also online only, which imo is total garbage. Foundry works online AND offline, and you can host your own servers. Foundry VTT is only a one time purchase for full features (not to mention much more), not an invasive subscription like Roll20. Also Foundry has easy to use fanmade custom content packs. It really is no comparison.
Could this be used to create a character builder for any game, even video games? I'm guessing yes and that you would just have to put in the abilities and stats, and mathematical formulas used for whatever game you are making. I want to build something that does all the calculations so that you can see EVERYTHING. So, if your damage is some formula that uses your strength, attack speed, and weapon damage, then I want to be able to type in values for all 3 of those and see what would my actual damage be.
how can i do this for a diffrent system with exploding dices? can i have it to calculate the exploding dice somehow and what would the code be for that?
I don’t know the specifics of your needs but yes it’s pretty simple to account for exploding dice with a series of if statements. For example let’s say you have a button to roll for attack but add damage dice on criticals when rolling d6. You set a up a temporary variable like “tempResult” equal to the result of two random d6 rolls. Then you check it: if (tempResult == 12) then finalResult = tempResult + another random d6 roll. Apologies for the pseudo code, but I hope this makes sense. You can make it much more sophisticated by setting up a dice type variable and adding a loop that continues adding dice if the exploded result equals the target number for the exploding dice.
@@MidnightHatter thank you, im just starting to code, i understand it, but dont know how to put it in acutal code, but im starting with java script and java. need it for Foundry
I'm looking at this tutorial and I wonder... How is the js code to add 2 valors into a 3 input panel? For example: To get the strTotal I'm triying to make a strScore+strRacial, but it isn't working.
Hm, it’s hard to say for sure without looking at your code, but you may need to wrap everything in an if statement connected to a dropdown for racial bonuses. For example, you make a dropdown with the id “characterRace” and in your js say if (characterRace == “orc”) {strRacial = 2} else {strRacial = 0} then you can add strRacial to your total. But make sure you set your document.getElement strScore = strTotal.
I have just started to look at sheet design. I have seen that tables are not permitted for layout on published sheets. I see you are using tables, is this the same as what you are doing with this example. I understand what you went through on you example, but I want to understand what roll20 is going to give me issues on
This would help me make my fallout dnd5e sheet Even with just this i can think on a wsy of use penalties from rads on modifiers (100rads=1radlevel, each radlevel decrease any roll and dc set by your scores, so i can just set it like a score/mod (score/10=idradlevel) and the ad to the attmods the -(idradlevel) so it autoupdate on rolls!
Hello, a friend and I stumbled on your TTRPG creation of Mobile Suit Gundam about 6 months ago. We were wondering if you have plans of making a Roll20 sheet for it, the reason we ask is because we’re both big MTG Nerds, my friend more than I, and we want to be able to do an online game of this with our friends from other states.
Nice! Thanks for checking it out. Sadly I don't use Roll20 so I personally haven't considered creating assets for it. Some others have tried but their efforts fizzled out as well. Most people just use a variant of a 5e sheet.
Would it be an issue if a friend and I attempted our hand at making a sheet, it’s for a private/non-stream game and I would be happy to send you what I come up with, I will say it’s been years since I touched html so it might not be as good as your work but I’m gonna use your videos to help me, with permission of course.
Of course! You don’t need to ask my permission or anything. If you do end up streaming games let me know and I’ll share links. I’m happy to share any additional resources with you as well.
I would want to create a program that controls my rpg game. Player names, Initiative, opponents, terrain ,temperature, random options, dices choices, maps to another screen etc.. Where do i begin? i have minimum computer savvy but can do this. Searching to do this for years. Someone can help?
Quick question, is it possible to import this code directly into roll20 and have it work with their serves? That is their dice roller and initiative tracker as well using their api system?
Unfortunately no, not in this state. I never really intended it to work with Roll20. For starters I know for a fact that you can't use tables to format your sheets in Roll20, so parts of this would need to be reformatted before even trying to hook the variables into their API.
Do you know what script would add 2 stats together? Ex, power 2 plus Intelligence 2 = 4. I added another copy of the first ability score columns, and changed Strength to Attack for my game and need these stats added to get the Assault value of 4.
Hey sorry I didn’t see this question before! Simply create variables of those two stats (ie var power =document.getElementById(“power”).value) and add them together (var assault = power + int)
@@MidnightHatter I started on adding skills. Here codepen.io/Dayminkaynin/pen/XWmyEmR I have set to put ranks in sight which uses the Soul stat. In JS I copied the same Dexmod + Profbonus formula but it wont add them together. Also is there a reddit about this stuff?
hello i have started runing games on roll 20 and saw your tutoreal on how to make a charichter sheet so i thought i would give it a try. iv got the hml side working but every time i close the sheet it whipes it back to factrey setting. could you do a tutoreal on how to keep it from whiping the character sheet
Is this on Roll20 or Codepen? The tutorials aren’t intended for Roll20. They won’t work because I use different formatting. To save your work on Codepen you need to create a free account. Hope this helps! Happy coding!
@@MidnightHatter epic! I was in the Kickstarter for BESM 4th edition. We received our pdf's for Christmas, super awesome, so now i am working to get an early start on dynamic sheet design and you seriously the only tutorial out there. You need to market this post on forums in the tabletop roleplay world. Roll20 is to stringent, obsidian portal is too syntax confusing and everything else is not agnostic enough while mostly catering to D&D, pathfinder and 1 or two more systems in a d20 setup. D6 players need love in tri-stat too! 😅
@@franpietrowski Nice! Thanks for the love! I may have to get in on the late pledge for BESM. If you have any feature requests or suggestions for the next part after skills, let me know! I'd love to be more accommodating to system other than just d20.
@@MidnightHatter one that i think would be awesome for dynamic sheets is a save and modify tag that prevents base stats from being altered without clicking a button to change the stats, skills, attributes until you have gained points to spend after creation. Maybe it goes from the fillable table form as in the video and after submittal it dynamically places the input data into a more stylized sheet that more closely resembles a character sheet from the game system being used. That would be epic. Im not sure but that might encompass more than html, css and javascript but it would be a freat way to grow and keep this series going from here.
I have been slowly but steadily working on this on my own for a game/setting I am developing, and my goodness I adore this and can't possibly thank you enough. You are incredible and I've learned so damn much!
Thank you! I’m glad it’s proven helpful! I really need to continue this series of tutorials...
My core group of friend and I have created and played 10'ish homebrew pen and paper games in the last 15 years. This video is pretty great.
Thank you! I need to get back to this series and add more functionality to it. Hopefully help people make their own web apps for games other than 5e!
@@MidnightHatter Good stuff. Our GM is a master class crazy brain wizard that can pump out rules sets and content, but this time around each member is writing lore for various nations and groups. We're dabbling with AI to script out lore and encounters. Fun stuff.
I have a verse that is about to be on its 16th year of development and in late 2019, I began writing a rulebook for ToVTop 1.0, not knowing how to format or anything about tabletops, because me and my friends wanted a way to get into the ToV without reading the unabridged books, and we didn't want to pay for rulebooks. Now, I'm nearly finished with the core rulebook for ToVTop 1.5, thanks in part to members of my server who give me advice and playtest for me. Because of the support, I never really had any hiccups aside from the initial formatting problems, but now I've hit my first genuine obstacle. My complete inability to code and tech illiteracy. Cue your channel and this video. Thanks Midnight Hatter, you're actually really helpful unlike some other channels that completely confuse me or force me to use code that I have to pay for. Absolute genuine unit.
Wow thank you so much! I’m really happy you’re getting use out of this. I felt the same way. Lots of big ideas and not enough coding chops to make them real so I hope to help fellow travellers seize their gaming destiny. I’d love to see your system sometime! Cheers!
@@MidnightHatter Thanks! And I'll definitely have to run your system with some fellow Gudam fans!
Wow! I want to do this for my game, but I need additional "stuff" as our engine works differently. I have no idea about how to program. I did some years ago, but I would never consider myself a programmer and whole new languages have come out since then.
I do not know where to even start, so I just brushed up on HTML and CSS and now I am watching a Javascript tutorial.
I have two games with home rules that I have to do this for. I am overwhelmed! GAAA!!!
BTW, Proficiency Bonus _can_ be calculated: math.ceiling(playerLevel / 4) + 1. I'm guessing on the function name as I don't know JavaScript.
Ahh yes! That’s correct. Math.ceil is correct as well. I’d better update that as it’s much more efficient.
I was going to comment on the same thing.
JavaScript would be:
function updateProfBonus() {
var palyerLevel = parseInt(document.getElementById("playerLevel").value);
document.getElementById("profBonus").value = Math.ceil((palyerLevel / 4) + 1);
}
Verified that this does work.
@@derangedhermit7981 player is spelled incorrectly but after correcting it, it works -- thank you!!!
Proficiency Bonus
@@derangedhermit7981
it give at the start +2 profenciency bonus (sorry if i missed speel i'm french)
Yooo this is SO incredibly helpful. I have almost 0 coding experience, and I made a D&D 5e Homebrew set in the world of the One Piece anime. I'm running a campaign right now as a bit of a long form play test and my group keeps requesting digital character sheets. I can't wait to see more of these!
You might as well try other systems instead, like Exalted 3e.
For OnePiece, I would try Mutants and Masterminds 3e for sure!
Hi, first thing, this video is gold, really educating.
Now, I'm starting working on a project with a friend our idea was to add a list of items, armor and weapons with well known specs, and make those specs apply as modifiers.
In my mind works like this:
I'm gonna create a class with a big list of items in the HTML code, assigning them an ID like that i can recall them and apply their specs as modifiers in the character sheet by a java script, cus the armor and weapons specs + the strength of the PG it's supposed to make a certain amount of damage.
Do you guys think can work ? It would be awesome if could do a video on it. 😁
Thanks for sharing ur knowledge.
Glad to be of some help! I would direct you to the latest video in this series that I made last month. It has a script to access Google Sheets like a cloud database and load values accordingly. It would be PERFECT for what you have in mind. I’d love to do a video on that as well when I get time. How to create a dynamic catalog of inventory items.
@@MidnightHatter I for one would love to see it!
Thnaks man, I used this for my own homebrew Cyberpunk character sheet. I would highly recommend you look up the INTERLOCK system as that would be perfect for Gundam.
Thanks! Of all the systems out there I looked at I’ve never heard of Interlock. I’m going to check that out! I need to go back and finish making this sheet! Haha.
Im currently working on a Achtung Cthulhu 2d20 character sheet for roll 20 and trying my best, the guides aren't that great for a beginner like myself, I will check out your guide and see if that helps.
Good luck! I’ll be honest though, my guide isn’t really meant to be used with Roll20. You’ll have to avoid using tables because they don’t play nice with Roll20’s API. But that’s a formatting issue not a functional one.
Cool Gundam RPG... I was thinking of doing the same thing, but with Savage Worlds as the base instead.
You should really check out Foundry VTT... It's totally worth the money. Use the Sandbox system it'll give you everything you need. And unlike roll20 you can write js macros as well as the normal chat ones.
Except Roll20 is free and pretty simple to set up.
@@Dyanosis It's also online only, which imo is total garbage. Foundry works online AND offline, and you can host your own servers. Foundry VTT is only a one time purchase for full features (not to mention much more), not an invasive subscription like Roll20. Also Foundry has easy to use fanmade custom content packs.
It really is no comparison.
here the formula to calculate prof bonus from character level "=Floor((playerLevel/4.2)+2)"
Could this be used to create a character builder for any game, even video games? I'm guessing yes and that you would just have to put in the abilities and stats, and mathematical formulas used for whatever game you are making. I want to build something that does all the calculations so that you can see EVERYTHING. So, if your damage is some formula that uses your strength, attack speed, and weapon damage, then I want to be able to type in values for all 3 of those and see what would my actual damage be.
You are correct. While this is all HTML/Javascript, the logic works in C# as well. I use a similar character stat manager for video games in Unity.
how can i do this for a diffrent system with exploding dices? can i have it to calculate the exploding dice somehow and what would the code be for that?
I don’t know the specifics of your needs but yes it’s pretty simple to account for exploding dice with a series of if statements.
For example let’s say you have a button to roll for attack but add damage dice on criticals when rolling d6. You set a up a temporary variable like “tempResult” equal to the result of two random d6 rolls. Then you check it: if (tempResult == 12) then finalResult = tempResult + another random d6 roll.
Apologies for the pseudo code, but I hope this makes sense. You can make it much more sophisticated by setting up a dice type variable and adding a loop that continues adding dice if the exploded result equals the target number for the exploding dice.
@@MidnightHatter thank you, im just starting to code, i understand it, but dont know how to put it in acutal code, but im starting with java script and java. need it for Foundry
Proficiency bonus is actually equal to ceil(playerLevel/4)+1
I'm looking at this tutorial and I wonder... How is the js code to add 2 valors into a 3 input panel? For example: To get the strTotal I'm triying to make a strScore+strRacial, but it isn't working.
Hm, it’s hard to say for sure without looking at your code, but you may need to wrap everything in an if statement connected to a dropdown for racial bonuses. For example, you make a dropdown with the id “characterRace” and in your js say if (characterRace == “orc”) {strRacial = 2} else {strRacial = 0} then you can add strRacial to your total. But make sure you set your document.getElement strScore = strTotal.
I have just started to look at sheet design. I have seen that tables are not permitted for layout on published sheets. I see you are using tables, is this the same as what you are doing with this example. I understand what you went through on you example, but I want to understand what roll20 is going to give me issues on
Ah, sorry this isn’t intended to work with Roll20. You should be able to strip the tables out and replace them with Bootstrap rows/columns if needed.
Aaaaand my free time has become full up
How do you only have 23 minutes of free time?
This would help me make my fallout dnd5e sheet
Even with just this i can think on a wsy of use penalties from rads on modifiers (100rads=1radlevel, each radlevel decrease any roll and dc set by your scores, so i can just set it like a score/mod (score/10=idradlevel) and the ad to the attmods the -(idradlevel) so it autoupdate on rolls!
Hello, a friend and I stumbled on your TTRPG creation of Mobile Suit Gundam about 6 months ago. We were wondering if you have plans of making a Roll20 sheet for it, the reason we ask is because we’re both big MTG Nerds, my friend more than I, and we want to be able to do an online game of this with our friends from other states.
Nice! Thanks for checking it out. Sadly I don't use Roll20 so I personally haven't considered creating assets for it. Some others have tried but their efforts fizzled out as well. Most people just use a variant of a 5e sheet.
Would it be an issue if a friend and I attempted our hand at making a sheet, it’s for a private/non-stream game and I would be happy to send you what I come up with, I will say it’s been years since I touched html so it might not be as good as your work but I’m gonna use your videos to help me, with permission of course.
Of course! You don’t need to ask my permission or anything. If you do end up streaming games let me know and I’ll share links. I’m happy to share any additional resources with you as well.
can I hire you to add my custom player sheet for a new system? I'm new to coding but am happy to pay for commission work.
I would want to create a program that controls my rpg game. Player names, Initiative, opponents, terrain ,temperature, random options, dices choices, maps to another screen etc.. Where do i begin? i have minimum computer savvy but can do this. Searching to do this for years. Someone can help?
This is great, thank you so much :)
Quick question, is it possible to import this code directly into roll20 and have it work with their serves? That is their dice roller and initiative tracker as well using their api system?
Unfortunately no, not in this state. I never really intended it to work with Roll20. For starters I know for a fact that you can't use tables to format your sheets in Roll20, so parts of this would need to be reformatted before even trying to hook the variables into their API.
copy and pasted it and it doesnt work
Do you know what script would add 2 stats together? Ex, power 2 plus Intelligence 2 = 4. I added another copy of the first ability score columns, and changed Strength to Attack for my game and need these stats added to get the Assault value of 4.
Hey sorry I didn’t see this question before! Simply create variables of those two stats (ie var power =document.getElementById(“power”).value) and add them together (var assault = power + int)
@@MidnightHatter I started on adding skills. Here codepen.io/Dayminkaynin/pen/XWmyEmR I have set to put ranks in sight which uses the Soul stat. In JS I copied the same Dexmod + Profbonus formula but it wont add them together. Also is there a reddit about this stuff?
it seem to be a really good and easy tutorial. but can we use it in roll20 without the pro pass?
nah you need the pro version to use custom character sheets, its garbage
hello i have started runing games on roll 20 and saw your tutoreal on how to make a charichter sheet so i thought i would give it a try. iv got the hml side working but every time i close the sheet it whipes it back to factrey setting. could you do a tutoreal on how to keep it from whiping the character sheet
Is this on Roll20 or Codepen? The tutorials aren’t intended for Roll20. They won’t work because I use different formatting. To save your work on Codepen you need to create a free account. Hope this helps! Happy coding!
When is part 2 coming, please!!!
Soon! Hopefully before next weekend!
@@MidnightHatter epic! I was in the Kickstarter for BESM 4th edition. We received our pdf's for Christmas, super awesome, so now i am working to get an early start on dynamic sheet design and you seriously the only tutorial out there.
You need to market this post on forums in the tabletop roleplay world.
Roll20 is to stringent, obsidian portal is too syntax confusing and everything else is not agnostic enough while mostly catering to D&D, pathfinder and 1 or two more systems in a d20 setup.
D6 players need love in tri-stat too! 😅
@@franpietrowski Nice! Thanks for the love! I may have to get in on the late pledge for BESM.
If you have any feature requests or suggestions for the next part after skills, let me know! I'd love to be more accommodating to system other than just d20.
@@MidnightHatter one that i think would be awesome for dynamic sheets is a save and modify tag that prevents base stats from being altered without clicking a button to change the stats, skills, attributes until you have gained points to spend after creation.
Maybe it goes from the fillable table form as in the video and after submittal it dynamically places the input data into a more stylized sheet that more closely resembles a character sheet from the game system being used. That would be epic.
Im not sure but that might encompass more than html, css and javascript but it would be a freat way to grow and keep this series going from here.
tip, next time use bigger fonts
1:57 Nope lost me already. Also, doesn't any one just say "Hello" anymore?