Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
layer3d [2019/09/19 11:35] – [Transparent Layer with 2D components] admin | layer3d [Unknown date] (current) – removed - external edit (Unknown date) 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== 2D FMX Components ====== | ||
- | Gorilla3D supports all default 2D Firemonkey components, like TLabel, TButton, TEdit and so on. | ||
- | |||
- | ===== On top ===== | ||
- | |||
- | You can add those components as child of the TGorillaViewport instance to show them on top of the rendered 3D world. | ||
- | |||
- | <file pascal> | ||
- | FLabel := TLabel.Create(FGorilla); | ||
- | FLabel.Parent := FGorilla; | ||
- | FLabel.Text := ' | ||
- | </ | ||
- | |||
- | ===== Layers ===== | ||
- | |||
- | You can also integrate them inside of a layer component, like TLayer3D, TTextLayer3D, | ||
- | **Using a layer may lead to misleading result in first place due to false default settings in FMX.** | ||
- | |||
- | ==== Transparent Layer with 2D components ==== | ||
- | One of the most popular used layer is a transparent 3D layer where 2D FMX components are placed into. | ||
- | |||
- | With default FMX settings this would look simply horrible. | ||
- | |||
- | Here an example of a TLayer3D with a TEdit, TLabel, TButton and TRadioButton component. | ||
- | |||
- | {{ : | ||
- | |||
- | |||
- | //As always, it's not a bug - it's a feature!// | ||
- | |||
- | We need to change a few properties to get this working. | ||
- | To fix the shredded 2D rendering, we need to reset the resolution to a higher value than 50. | ||
- | |||
- | <file pascal> | ||
- | // set resolution higher than 72 at a size of [width=8, height=4] | ||
- | FLayer.Resolution := 72; | ||
- | </ | ||
- | |||
- | To fix the false transparency, | ||
- | Due to original FMX rendering order list generation, the opacity influences the order. | ||
- | |||
- | At the moment a component can only display 2 transparent children layers correctly. | ||
- | <file pascal> | ||
- | if (Left.Opacity < 1) and (Right.Opacity >= 1) then | ||
- | Result := 1 // left layer will be in front | ||
- | else if (Left.Opacity >= 1) and (Right.Opacity < 1) then | ||
- | Result := -1 // right layer will be in front | ||
- | </ | ||
- | |||
- | Setup for 2 layers: | ||
- | <file pascal> | ||
- | TGorillaViewport | ||
- | TDummy (Opacity = 0.999) | ||
- | TLayer3D (Opacity = 1, Transparency = true) | ||
- | TImage | ||
- | TLayer3D (Opacity = 0.999, Transparency = true) | ||
- | TLabel | ||
- | </ | ||
- | |||
- | If we need more transparent layers, we need work around with TDummy objects. | ||
- | <file pascal> | ||
- | TGorillaViewport | ||
- | TDummy (Opacity = 1) | ||
- | TLayer3D (Opacity = 1, Transparency = true) | ||
- | TImage | ||
- | TDummy (Opacity = 0.999) | ||
- | TLayer3D (Opacity = 1, Transparency = true) | ||
- | TImage | ||
- | TLayer3D (Opacity = 0.999, Transparency = true) | ||
- | TLabel | ||
- | </ | ||
- | |||
- | In the end, the result should look like this: | ||
- | |||
- | {{ :: | ||
- | |||
- | Remarks: We're still searching for a better workaround or bugfix, but it is difficult, due to original FMX source code. |