Hey guys,
Does anyone know how I can combine a user interface using the Ui module and a game from the scene module? When editing the .pyui file there is the option of adding a custom view, but I don't know how to display a scene game in it
In your pyui file (example.pyui here), add a custom view, and set its "Custom View Class" field to SceneView. Also set the name to something unique (I've used "sceneview" in the code below), so you can get a reference to the view more easily, after loading the UI. Load the UI, and set the scene attribute of the custom view. That's pretty much it.
from scene import *
import ui
class MyScene (Scene):
def setup(self):
pass
# Define your scene like usual...
v = ui.load_view('example.pyui')
v['sceneview'].scene = MyScene()
v.present('fullscreen')
#!python3
# _*_ coding:utf-8 _*_
from scene import *
import ui
class MyScene(Scene):
def setup(self):
self.background_color = 'midnightblue'
self.ship = SpriteNode('spc:PlayerShip1Orange')
self.ship.position = self.size / 2
self.add_child(self.ship)
v = ui.load_view('UI_with_scene.pyui')
v['sceneview'].scene = MyScene()
v.present('sheet')
# how to run MyScene in the sceneview ?
!!! set its "Custom View Class" field to SceneView
Great, and you both :)
Hey everyone,
thanks for these snippets. They are very useful!
But I wonder how to get the value of a slider, for example a slider named ‚slider1‘, into the MyScene class.
Thanks for every hint
Rownn
Ok, think I got it, but I‘m not sure if it is the best way.
```
from scene import *
import ui
class MyScene (Scene):
def setup(self):
print (self.view.superview['slider1'].value)
pass
# Define your scene like usual...
v = ui.load_view('example.pyui')
v['sceneview'].scene = MyScene()
v.present('fullscreen') ```
setup() is only called once. You might like to call a function/method for changed values. Search for Slider Attributes => Slider.action
not tested:
def setup(self):
slider = self.view.superview['slider1']
slider.action = self.slider_changed
def slider_changed(self, sender):
print(sender.value)
@brumm Perfect! Works great!
Hey,
another question, which still has to do something with combining scenes and UI ... so I keep asking here. It seems that the scene is part of the UI. What would be the best way to separate them? I mean, how could I achieve a hiding/unhiding UI? Or transforming the position of the UI. Or working with several UIs in one scene at all?
sorry for asking that much at once
rownn
Ok, I think I got it. After I recognized that it is possible to add UI elements to a CustomView via long pressing and SubViews I solved the stuff this way.
Pythonista makes fun! Great and nice app!!!
——————————————————————————————————-
——————————————————————————————————
*.py
from scene import *
import ui
class MyScene (Scene):
width = 900
height = 500
activeNode = None
handles = ()
menu_collapse = True
def setup(self):
ground = Node(parent=self)
ground.position = (self.size.w/2, self.size.h/2)
self.ellipse = ShapeNode(ui.Path.oval(0,0, self.width, self.height), fill_color='clear', stroke_color='#b50000')
self.handleWidth = ShapeNode(ui.Path.oval(0,0, 10, 10), fill_color='#b50000', stroke_color='clear')
self.handleHeight = ShapeNode(ui.Path.oval(0,0, 10, 10), fill_color='#b50000', stroke_color='clear')
menuShape = ui.Path.rect(0,0,32,2)
menuShape.append_path(ui.Path.rect(0,-8,32,2))
menuShape.append_path(ui.Path.rect(0,-16,32,2))
self.menu = ShapeNode(menuShape, fill_color='white', stroke_color='clear')
self.menu.position = (24,self.size.y-20)
ground.add_child(self.ellipse)
ground.add_child(self.handleWidth)
ground.add_child(self.handleHeight)
self.add_child(self.menu)
self.add_child(ground)
self.handles = (self.handleWidth, self.handleHeight, self.menu)
self.ui01 = self.view.superview.subviews[1]
self.ui01.x = -400
self.sliderW = self.ui01['slider-01']
self.sliderW.action = self.sliderW_changed
self.sliderH = self.ui01['slider-02']
self.sliderH.action = self.sliderH_changed
self.updateStuff()
def updateStuff(self):
self.ellipse.path = ui.Path.oval(0,0, self.width, self.height)
self.handleWidth.position = (self.width/2,0)
self.handleHeight.position = (0, self.height/2)
self.sliderW.value = round(self.width/1000,2)
self.sliderH.value = round(self.height/1000,2)
self.ui01['label-01'].text = str(self.width)
self.ui01['label-02'].text = str(self.height)
def checkTouchAndSetActiveHandle(self, touch):
l = touch.location
detectSize = 20
for node in self.handles:
p = node.point_to_scene((0,0)) #.position
if (p.x-detectSize < l.x < p.x+detectSize) and (p.y-detectSize < l.y < p.y+detectSize):
self.activeNode = node
def touch_began(self, touch):
self.checkTouchAndSetActiveHandle(touch)
if self.activeNode == self.menu:
if self.menu_collapse == True:
self.menu.position = (424, self.size.y-20)
self.ui01.x = 0
self.menu_collapse = False
else:
self.menu.position = (24, self.size.y-20)
self.ui01.x = -400
self.menu_collapse = True
elif self.activeNode == self.handleWidth:
self.handleWidth.path = ui.Path.oval(0,0, 50, 50)
elif self.activeNode == self.handleHeight:
self.handleHeight.path = ui.Path.oval(0,0, 50, 50)
def touch_moved(self, touch):
x = touch.location.x
y = touch.location.y
if self.activeNode == self.handleWidth:
self.width = max(0,self.handleWidth.parent.point_from_scene((x,y)).x)*2
self.updateStuff()
elif self.activeNode == self.handleHeight:
self.height = max(0,self.handleHeight.parent.point_from_scene((x,y)).y)*2
self.updateStuff()
def touch_ended(self, touch):
self.activeNode = None
self.handleWidth.path = ui.Path.oval(0,0, 10, 10)
self.handleHeight.path = ui.Path.oval(0,0, 10, 10)
def sliderW_changed(self, sender):
value = round(sender.superview['slider-01'].value*1000,2)
sender.superview['label-01'].text = str(value)
self.width = value
self.updateStuff()
def sliderH_changed(self, sender):
value = round(sender.superview['slider-02'].value*1000,2)
sender.superview['label-02'].text = str(value)
self.height = value
self.updateStuff()
v = ui.load_view('test-03_SceneWithUI.pyui')
v['sceneview'].scene = MyScene()
v.present('fullscreen')
——————————————————————————————————-
——————————————————————————————————
*.pyui file
[
{
"nodes" : [
{
"nodes" : [
],
"frame" : "{{0, 0}, {1024, 768}}",
"class" : "View",
"attributes" : {
"flex" : "WHRB",
"alpha" : 1,
"custom_class" : "SceneView",
"frame" : "{{150, -10}, {100, 100}}",
"tint_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
"class" : "View",
"uuid" : "94D2E098-8578-4C00-89C7-CFB241F4AB69",
"background_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
"name" : "sceneview"
},
"selected" : false
},
{
"nodes" : [
{
"nodes" : [
],
"frame" : "{{0, 0}, {400, 768}}",
"class" : "View",
"attributes" : {
"alpha" : 0.20000000000000001,
"flex" : "WH",
"frame" : "{{150, 334}, {100, 100}}",
"class" : "View",
"background_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
"uuid" : "863D3F2F-3606-48E0-907A-83F59724AB15",
"name" : "view1"
},
"selected" : false
},
{
"nodes" : [
],
"frame" : "{{110, 30}, {193, 34}}",
"class" : "Slider",
"attributes" : {
"flex" : "",
"continuous" : true,
"frame" : "{{79, 194}, {200, 34}}",
"uuid" : "668C42E2-A62F-4A49-9460-E3150C231B61",
"class" : "Slider",
"value" : 0.5,
"name" : "slider-01"
},
"selected" : false
},
{
"nodes" : [
],
"frame" : "{{310, 30}, {70, 34}}",
"class" : "Label",
"attributes" : {
"font_size" : 18,
"text_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
"frame" : "{{104, 195}, {150, 32}}",
"uuid" : "BED64DBB-5A87-491A-BE29-FEE43749DC87",
"class" : "Label",
"alignment" : "left",
"text" : "0.5",
"name" : "label-01",
"font_name" : "<System>"
},
"selected" : false
},
{
"nodes" : [
],
"frame" : "{{25, 30}, {75, 34}}",
"class" : "Label",
"attributes" : {
"alpha" : 1,
"font_size" : 18,
"text_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
"frame" : "{{125, 64}, {150, 32}}",
"uuid" : "4796A6EA-2337-4F70-8E9E-09B097F7B271",
"class" : "Label",
"alignment" : "left",
"text" : "Width",
"name" : "label1",
"font_name" : "<System>"
},
"selected" : false
},
{
"nodes" : [
],
"frame" : "{{25, 80}, {75, 34}}",
"class" : "Label",
"attributes" : {
"alpha" : 1,
"font_size" : 18,
"text_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
"frame" : "{{125, 64}, {150, 32}}",
"uuid" : "AD165DAE-C1EE-42EB-8035-5DCE2BFFFDF2",
"class" : "Label",
"alignment" : "left",
"text" : "Height",
"name" : "label2",
"font_name" : "<System>"
},
"selected" : false
},
{
"nodes" : [
],
"frame" : "{{110, 80}, {192, 34}}",
"class" : "Slider",
"attributes" : {
"flex" : "",
"continuous" : true,
"frame" : "{{100, 63}, {200, 34}}",
"uuid" : "F61A2731-DA26-4E24-9648-45B15D58D991",
"class" : "Slider",
"value" : 0.5,
"name" : "slider-02"
},
"selected" : false
},
{
"nodes" : [
],
"frame" : "{{310, 80}, {70, 34}}",
"class" : "Label",
"attributes" : {
"font_size" : 18,
"text_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
"frame" : "{{125, 64}, {150, 32}}",
"uuid" : "A30D7411-95D9-4E3D-8AAF-EC1264C70D86",
"class" : "Label",
"alignment" : "left",
"text" : "0.5",
"name" : "label-02",
"font_name" : "<System>"
},
"selected" : true
}
],
"frame" : "{{0, 0}, {400, 768}}",
"class" : "View",
"attributes" : {
"flex" : "H",
"alpha" : 1,
"frame" : "{{462, 334}, {100, 100}}",
"tint_color" : "RGBA(1.000000,0.347826,0.021739,1.000000)",
"uuid" : "B1E5A256-9CE8-4B7E-962E-FD577172D67D",
"class" : "View",
"name" : "menu-01"
},
"selected" : true
}
],
"frame" : "{{0, 0}, {1024, 768}}",
"class" : "View",
"attributes" : {
"flex" : "",
"custom_class" : "",
"enabled" : true,
"tint_color" : "RGBA(0.000000,0.478000,1.000000,1.000000)",
"border_color" : "RGBA(0.000000,0.000000,0.000000,1.000000)",
"background_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
"name" : ""
},
"selected" : false
}
]
@rownn said:
Pythonista makes fun! Great and nice app!!!
That's sure
@rownn I never tried moving UIs, except for using the bring_to_front() and move_to_back() option. Thanks for positing the solution to your questions, might help me at some point :)
Oh, and Pythonista definitely is a great app
@rownn
Hi, I’d like to try your example
@rownn I’d like to run your example posted two months ago but I don’t know how to convert the text for the .pyui file into an actual .pyui file. I’m brand new to Pythonista.
@Tey rename the file extention in pyui
@wnMark
So simple. Thanks!