Code Monkey home page Code Monkey logo

aoe4_overlay's Introduction

AoE4 Overlay

  • DOWNLOAD HERE (Windows)
  • Or run the script with Python 3.6+ (Windows/Mac/Linux)

Screenshot

What does the app do?

  • Shows information about players you are in match with.
  • Provides additional player statistics in-app.
  • Shows an overlay widget for build orders (BO) in two formats:
    • Simple TXT format.
    • Illustrated with resources distribution and game pictures (+ BO step selection).
  • Supports a highly customizable streaming overlay (with CSS/JS).

API calls are done through AoE4World.com. For build orders, check age4builder.com or aoe4guides.com. For questions and issues visit my discord server.

How to use

  • Download and extract the archive.
  • Run AoE4_Overlay.exe.
  • Find your profile by entering your profile ID, Steam ID or player name.
  • Set up the hotkey for showing/hiding overlay.
    • Overlay will be automatically shown when a new game starts (or app starts).

โ†’ Video tutorial for app setup and using buildorders.

โ†’ Note: To update the app delete the app folder and extract the new archive elsewhere.

Build orders

  • Two build orders types are available:
    • Simple TXT
    • Illustrated with resources distribution and game pictures (+ BO step selection).
  • Add or remove build orders with Add/Remove build order (write the content on the left panel, and the title on the top of the right panel).
    • Write anything for the Simple TXT format.
    • For the Illustrated format, you need to have a JSON format compatible with the RTS_Overlay from CraftySalamander (see examples here).
    • Many build orders can be downloaded from https://age4builder.com or from https://aoe4guides.com.
      • To get the Simple TXT format, click on Simple TXT Build Order to clipboard on the top of any open build order (M icon).
      • To get the Illustrated format, click on Illustrated Build Order to clipboard on the top of any open build order (salamander icon).
  • Change their order using Move build order up/down.
  • Set up hotkeys (with Hotkey for/to...) for showing/hiding overlay, cycling between build orders and selecting the previous/next step of a build order (only available for the Illustrated format).
    • Use the corresponding hotkeys to show/hide/cycle build orders and steps.
    • You can uncheck a build order so that it does not appear when cycling between the build orders with the dedicated hotkey.
  • Change the overlay font size with Overlay font size.
  • Change the height of the build order images (only for the Illustrated format) with Overlay images height.
  • Change the position of the build order overlay with Change BO overlay position. Once fixed, the upper right corner will never move, but the size of the overlay will be automatically adapted to its content.

Authors

Screenshots

Build order widget (Illustrated format):

Screenshot

Additional civilization stats (currently only for 1v1):

Wintime is the median game length of won games with given civilization (indicates in what game phase the player is the strongest).

Screenshot

Settings:

Screenshot

Game history:

Screenshot

Build order configuration tab:

Screenshot

Built-in randomizer:

Screenshot

Streaming

To use the custom streaming overlay simply drag the overlay.html file to OBS or other streaming software. The file is located in src/html directory in the app folder. Move and rescale as necessary once some game information is shown.

Screenshot

If drag & drop doesn't work, add new source to your scene manually. The source type will be Browser and point to a local file overlay.html.

Overlay active:

Screenshot

  • Streaming overlay supports team games as well
  • The streaming overlay can be fully customized with CSS and JS, see the next section.
  • The override tab can be used to change the information on the overlay. This might be useful when casting from replays or changing a player's barcode to their actual name.

Screenshot

Or change values to something completely different

Screenshot

Customization

  1. Overlay position and font size can be changed in the app.

  2. Build order (BO) font, images size, position and hotkeys can be changed in the app. Other attributes can also be customized in config.json (to find the file click File/config & logs in the app). You have to close the app before making changes to the config file. What can be changed:

    "bo_show_title": true : true to show the BO title, false otherwise

    "bo_title_color": [230, 159, 0] : color for the BO title

    "bo_overlay_hotkey_show": "" : hotkey to show/hide the BO

    "bo_overlay_hotkey_cycle": "" : hotkey to cycle between the different BO available

    "bo_overlay_hotkey_previous_step": "" : hotkey to go to the previous step of the BO

    "bo_overlay_hotkey_next_step": "" : hotkey to go to the next step of the BO

    "bo_font_size": 12 : font size

    "bo_text_color": [255, 255, 255] : text RGB color

    "bo_color_background": [30, 30, 30] : background RGB color

    "bo_font_police": 'Arial' : police font

    "bo_opacity": 0.75 : opacity of the window

    "bo_upper_right_position": [1870, 70] : position for the upper right corner

    "bo_image_height": 30 : height of the images

    "bo_border_size": 15 : size of the borders

    "bo_vertical_spacing": 10 : vertical space between the BO lines

    The images used in the build order overlay can also be defined in the same configuration file (path relative to src/img/build_order).

  3. Team colors can be changed in the config.json. Colors are stored as a list of RGBA colors for team 1, 2, and so on.

    "team_colors": [
        [74, 255, 2, 0.35],
        [3, 179, 255, 0.35],
        [255, 0, 0, 0.35]
      ]
  4. Civilization stats color can be changed in config.json.

    "civ_stats_color": "#BC8AEA",
  5. Streaming overlay customization can be done via custom.css and custom.js in the html folder in app directory. These files will not be overridden with an app update. Look at main.css to see what you can change. In custom.js you can define this function that runs after each update.

    function custom_func(data) {
        console.log("These are all the player data:", data);
    }

Releases & Changelog

All here

aoe4_overlay's People

Contributors

fluffymaguro avatar craftysalamander avatar jensbuehl avatar willfindlay avatar dnaroma avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.