Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Decide how to implement the Ruffle GUI #895

Open
Herschel opened this issue Jul 21, 2020 · 3 comments
Open

Decide how to implement the Ruffle GUI #895

Herschel opened this issue Jul 21, 2020 · 3 comments
Labels
meta Misc. organizational tasks

Comments

@Herschel
Copy link
Member

Herschel commented Jul 21, 2020

We should plan on how to handle various GUI elements for the player itself, on both desktop and web.

There are several approaches we can take. We don't necessarily have to decide on the same solution for everything (for example, we could use some native UI for file loading on desktop, but also render our own UI for message dialogs, etc.).

  • Render the UI using our render backend: since we have vector/text rendering from Flash itself, we could just piggyback on this and use it to render our UI. This has the benefit of working the same on both desktop and web (and we could even design the visuals in Flash itself).
  • HTML elements on web: we could render UI using standard HTML elements and attach/remove them to the DOM, as necessary.
  • Native UI on desktop: There are some cross-platform crates to provide simple native UI (for file dialogs, for example).
  • GUI libraries: use something like imgui-rs (this would be problematic on web).

Here are the various areas of UI we might need:

  • Message dialogs
    • Show simple message popups (for example, errors on unsupported content).
  • Right-click context menu
    • Flash displays a menu with various actions on right-click
    • Apps can add custom items to this using ContextMenu API
    • Add option to disable entirely (often it's unwanted).
    • desktop: there doesn't seem to be a lightweight cross-platform Rust wrapper for native UI menus.
  • Touch UI
    • On-screen virtual buttons that allow controlling games with keyboard controls.
  • Open File menu (desktop only)
    • Display a file list for loading SWF files similar to the standalone Flash Player.
    • Could use nfd-rs
  • Settings menu
    • Mimic the right-click -> Settings menu from the official Flash Player.
    • Provide additional options on desktop (video settings, etc.)
  • Debugger UI
    • Introspect the SWF, AS debugger, etc.
    • This would be the most complex UI. Could just limit it to desktop (at least to start).
@blackjyn
Copy link

For desktop and mobile GUI , we don't even need Ruffle. This is because AIR is still alive so we can target directly to mobile/desktop. No plugins required.

We should rather focus on web target as this is the "missing" part of Flash.

@Justin-CB
Copy link
Contributor

Justin-CB commented Jul 22, 2020

For the web:

Message dialogs can be opened on the web using window.alert() in JavaScript.

Right-click menus can be made using the contextmenu event in JavaScript(the return value of the event handler determines whether or not the normal browser context menu is displayed).

The settings menu for individual swf's on the web can be an HTML element(it can be on top using z-index in CSS, I believe). The global settings interface for the browser extension is more or less standard & I already have an open pull request for that. Opening the global settings page from a right-click menu would probably need to use custom events to break out of sandboxing.

@desertking
Copy link

In my experience I would highly suggest for the web-player:

right-click (desktop): open context-menu with "fullscreen" "un/mute" option
mobile: global "fullscreen" and "un/mute" "top right, top left, bottom left, bottom right" (option to show the 2 icons/buttons)

pre-loader: The player desperately needs a pre-loader, also i get freezes in my "dom" and I can't interact with the website sometimes when the .swf is loaded which is a no-go

virtual gamepad: "top right, top left, bottom left, bottom right" in non fullscreen version option which overlays the game. In fullscreen landscape you can easily put a keypad to the left next to the game and the buttons right. (customization for webmasters)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
meta Misc. organizational tasks
Projects
None yet
Development

No branches or pull requests

5 participants