Skip to content

Commit 975b463

Browse files
committed
create parallax classes. need some factorization
1 parent d44f180 commit 975b463

File tree

9 files changed

+440
-108
lines changed

9 files changed

+440
-108
lines changed

README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
WIP parallax. Openfl for now. Could be agnostic later.
33

44
# TODO
5-
- [] simple bg scrolling and zoom
6-
- [ ] make it configurable
7-
- [ ] use json or xml config
8-
- [ ] add parallax layer
5+
✅ simple bg scrolling
6+
✅ make it configurable
7+
✅ use xml config
8+
✅ add parallax layer
9+
- [ ] zoom
910
- [ ] sample
1011
- [ ] agnostic

parallax.hxproj

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,28 @@
88
<movie fps="0" />
99
<movie width="0" />
1010
<movie height="0" />
11-
<movie version="1" />
11+
<movie version="0" />
1212
<movie minorVersion="0" />
1313
<movie platform="Lime" />
1414
<movie background="#FFFFFF" />
15-
<movie preferredSDK=";3.1.3;" />
15+
<movie preferredSDK="Haxe 4.1.0;4.1.0;" />
1616
</output>
1717
<!-- Other classes to be compiled into your SWF -->
1818
<classpaths>
19-
<class path="C:\HaxeToolkit_347\haxe\lib\openfl\8,6,1\src" />
20-
<class path="C:\HaxeToolkit_347\haxe\lib\lime\7,1,0\src" />
21-
<class path="C:\HaxeToolkit_347\haxe\lib\actuate\1,8,9\src" />
19+
<class path="C:\HaxeToolkit\haxe\lib\openfl\9,1,0\src" />
20+
<class path="C:\HaxeToolkit\haxe\lib\lime\7,9,0\src" />
21+
<class path="C:\HaxeToolkit\haxe\lib\actuate\1,8,9\src" />
2222
<class path="src" />
2323
<class path="bin\html5\haxe" />
2424
</classpaths>
2525
<!-- Build options -->
2626
<build>
27-
<option directives="openfl=8.6.1&#xA;lime=7.1.0&#xA;actuate=1.8.9&#xA;ANDROID_SETUP=true&#xA;ANDROID_NDK_ROOT=C:\Development\Android\NDK\android-ndk-r15c&#xA;howlerjs&#xA;lime-webgl&#xA;lime-dom&#xA;lime-howlerjs&#xA;lime-html5&#xA;HL_PATH=C:\Development\hl-1.10.0-win&#xA;tools=7.1.0&#xA;ANDROID_SDK=C:\Development\Android\SDK\platforms\android-26&#xA;lime-canvas&#xA;no-compilation&#xA;openfl-html5&#xA;JAVA_HOME=C:\Program Files (x86)\java\jdk1.8.0&#xA;HXCPP_COMPILE_CACHE=E:\hxcpp\cache&#xA;html5&#xA;web&#xA;html5" />
27+
<option directives="openfl=9.1.0&#xA;lime=7.9.0&#xA;actuate=1.8.9&#xA;ANDROID_SETUP=true&#xA;ANDROID_NDK_ROOT=C:\Development\Android\NDK\android-ndk-r15c&#xA;howlerjs&#xA;lime-webgl&#xA;lime-dom&#xA;lime-howlerjs&#xA;lime-html5&#xA;openfl-disable-handle-error&#xA;HL_PATH=C:\Development\hl-1.10.0-win&#xA;tools=7.9.0&#xA;ANDROID_SDK=C:\Development\Android\SDK\platforms\android-26&#xA;lime-canvas&#xA;no-compilation&#xA;openfl-html5&#xA;JAVA_HOME=C:\Program Files (x86)\java\jdk1.8.0&#xA;HXCPP_COMPILE_CACHE=E:\hxcpp\cache&#xA;fdb&#xA;html5&#xA;web&#xA;html5" />
2828
<option flashStrict="False" />
2929
<option noInlineOnDebug="False" />
3030
<option mainClass="ApplicationMain" />
3131
<option enabledebug="True" />
32-
<option additional="--macro openfl._internal.macros.ExtraParams.include()&#xA;--macro lime._internal.macros.DefineMacro.run()&#xA;--remap flash:openfl" />
32+
<option additional="--macro openfl.utils._internal.ExtraParamsMacro.include()&#xA;--macro lime._internal.macros.DefineMacro.run()&#xA;--remap flash:openfl&#xA;-debug " />
3333
</build>
3434
<!-- haxelib libraries -->
3535
<haxelib>

project.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
<!-- assets -->
2121
<assets path="assets/img" rename="img" />
22+
<assets path="assets/data" rename="" />
2223

2324
<!-- optimize output
2425
<haxeflag name="-dce full" /> -->

src/Main.hx

Lines changed: 88 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,92 @@
11
package;
22

3+
import haxe.xml.Access;
34
import motion.Actuate;
5+
import openfl.Assets;
46
import openfl.display.Bitmap;
57
import openfl.display.Sprite;
68
import openfl.Lib;
79
import openfl.display.StageDisplayState;
810
import openfl.events.Event;
911
import openfl.events.MouseEvent;
1012
import openfl.geom.Point;
13+
import parallax.Parallax;
14+
import parallax.ParallaxLayer;
1115

1216
/**
1317
* ...
14-
* @author Ludovic Bas - www.lugludum.com
18+
* @author Ludovic Bas - www.loudoweb.fr
1519
*/
1620
class Main extends Sprite
1721
{
18-
19-
public var image:Bitmap;
20-
21-
22-
var deltaZoom:Float;
23-
var maxZoom:Float;
24-
var minZoom:Float;
25-
var zoom:Float;
26-
var preZoom:Float;
2722
var bgPos:Point;
2823
var imagePivot:Point;
24+
25+
var parallax:Parallax;
26+
var containers:Array<Sprite>;
27+
28+
var dragX:Float;
29+
var dragY:Float;
2930

3031
public function new()
3132
{
3233
super();
3334

34-
zoom = 1;
35+
//parallax
36+
var xml = Xml.parse(Assets.getText("parallax.xml"));
37+
parallax = Parallax.parse(xml);
3538

3639
bgPos = new Point();
3740
imagePivot = new Point();
3841

42+
containers = [];
43+
3944
// Assets:
40-
var data = openfl.Assets.getBitmapData("img/background-full0000.png");
41-
image = new Bitmap(data, null, true);
42-
addChild(image);
45+
for (layer in parallax.layers)
46+
{
47+
var container = new Sprite();
48+
container.name = layer.id;
49+
50+
container.x = layer.x;
51+
container.y = layer.y;
52+
addChild(container);
53+
containers.push(container);
54+
for (sprite in layer.sprites)
55+
{
56+
var spr = new Bitmap(Assets.getBitmapData("img/" + sprite.img), null, true);
57+
spr.name = sprite.id;
58+
spr.x = sprite.originX;
59+
spr.y = sprite.originY;
60+
container.addChild(spr);
61+
if (parallax.world != "" && layer.id == parallax.world)
62+
{
63+
parallax.width = container.width;
64+
parallax.height = container.height;
65+
parallax.world = "";//reset to avoid setting again with other image
66+
}
67+
}
68+
}
4369

44-
setZoomBounds();
70+
trace(parallax);
4571

46-
imagePivot.setTo(stage.stageWidth / 2, stage.stageHeight / 2);
72+
parallax.setZoomBounds(stage.stageHeight);
4773

74+
imagePivot.setTo(stage.stageWidth / 2, stage.stageHeight / 2);
4875

49-
stage.addEventListener(MouseEvent.CLICK, onClick);
50-
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onWheel);
51-
stage.addEventListener(Event.ENTER_FRAME, onUpdate);
52-
stage.addEventListener(MouseEvent.RIGHT_CLICK, onReset);
53-
stage.addEventListener(Event.RESIZE, onResize);
54-
}
55-
56-
function setZoomBounds():Void
57-
{
58-
//zoom bounds
59-
//to have fluid zoom
60-
minZoom = stage.stageHeight / (image.height / image.scaleY);
61-
trace("image height", image.height / image.scaleY, "stage", stage.stageHeight);
62-
deltaZoom = (1 - minZoom) / 2;
63-
maxZoom = 1;
64-
do {
65-
maxZoom += deltaZoom;
66-
}while (maxZoom < 1.2);
6776

77+
//stage.addEventListener(MouseEvent.CLICK, onClick);
78+
//stage.addEventListener(MouseEvent.MOUSE_WHEEL, onWheel);
79+
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDragStart);
80+
//stage.addEventListener(MouseEvent.RIGHT_CLICK, onReset);
81+
//stage.addEventListener(Event.RESIZE, onResize);
6882
}
6983

7084
function onResize(e:Event):Void
7185
{
72-
setZoomBounds();
73-
var values = [for (i in 0...5) i * deltaZoom + minZoom];
86+
//parallax.camera.width = stage.stageWidth;
87+
//parallax.camera.height = stage.stageHeight;
88+
parallax.setZoomBounds(stage.stageHeight);
89+
/*var values = [for (i in 0...5) i * deltaZoom + minZoom];
7490
trace(values);
7591
//find closest zoom to current
7692
var closest = 42.;
@@ -85,37 +101,51 @@ class Main extends Sprite
85101
trace("resize", minZoom, "old", zoom, "closest", closest, maxZoom);
86102
zoom = closest;
87103
applyZoom();
88-
}
104+
}*/
89105

90106
}
91107

92108
function onReset(e:MouseEvent):Void
93109
{
94-
zoom = 1;
95-
Actuate.tween(image, 0.25, {scaleX: zoom, scaleY: zoom});
110+
//parallax.zoom = 1;
111+
/*for (container in containers)
112+
{
113+
Actuate.tween(container, 0.25, {scaleX: zoom, scaleY: zoom});
114+
}*/
96115
}
97116

98-
function onUpdate(e:Event):Void
117+
function onDragStart(e:MouseEvent):Void
99118
{
100-
if (this.mouseX < 30)
101-
{
102-
image.x += 10;
103-
}else if (this.mouseX > stage.stageWidth - 30)
104-
{
105-
image.x -= 10;
106-
}else if (this.mouseY < 30)
107-
{
108-
image.y += 10;
109-
}else if (this.mouseY > stage.stageHeight - 30)
119+
dragX = e.stageX;
120+
dragY = e.stageY;
121+
stage.addEventListener(MouseEvent.MOUSE_MOVE, onDragMove);
122+
stage.addEventListener(MouseEvent.MOUSE_UP, onDragEnd);
123+
stage.addEventListener(MouseEvent.RELEASE_OUTSIDE, onDragEnd);
124+
}
125+
126+
function onDragEnd(e:MouseEvent):Void
127+
{
128+
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onDragMove);
129+
stage.removeEventListener(MouseEvent.MOUSE_UP, onDragEnd);
130+
stage.removeEventListener(MouseEvent.RELEASE_OUTSIDE, onDragEnd);
131+
}
132+
133+
function onDragMove(e:MouseEvent):Void
134+
{
135+
136+
137+
parallax.moveCamera(dragX - e.stageX, dragY - e.stageY);
138+
dragX = e.stageX;
139+
dragY = e.stageY;
140+
for (i in 0...containers.length)
110141
{
111-
image.y -= 10;
112-
}else{
113-
return;
142+
containers[i].x = parallax.layers[i].x;
143+
containers[i].y = parallax.layers[i].y;
114144
}
115-
bgPos.setTo(image.x, image.y);
116-
checkBounds(bgPos, stage.stageWidth, stage.stageHeight, image.width, image.height);
117-
image.x = bgPos.x;
118-
image.y = bgPos.y;
145+
//bgPos.setTo(image.x, image.y);
146+
//checkBounds(bgPos, stage.stageWidth, stage.stageHeight, image.width, image.height);
147+
//image.x = bgPos.x;
148+
//image.y = bgPos.y;
119149

120150
}
121151
function onClick(e:MouseEvent):Void
@@ -125,47 +155,8 @@ class Main extends Sprite
125155
}
126156
function onWheel(e:MouseEvent):Void
127157
{
128-
preZoom = zoom;
129-
zoom += e.delta/100 * deltaZoom;
130-
if (zoom > maxZoom)
131-
zoom = maxZoom;
132-
if (zoom < minZoom)
133-
zoom = minZoom;
134-
135-
imagePivot = image.globalToLocal(new Point(e.stageX, e.stageY));
136-
137-
applyZoom();
138-
139-
}
140-
141-
function applyZoom():Void
142-
{
143-
if (preZoom == zoom)
144-
return;
145-
146-
var offsetX = image.x + imagePivot.x * preZoom - imagePivot.x * zoom;
147-
var offsetY = image.y + imagePivot.y * preZoom - imagePivot.y * zoom;
148-
149-
bgPos.setTo(offsetX, offsetY);
150-
image.scaleX = image.scaleY = zoom;
151-
checkBounds(bgPos, stage.stageWidth, stage.stageHeight, image.width, image.height);
152-
image.x = bgPos.x;
153-
image.y = bgPos.y;
154-
}
155-
156-
function checkBounds(pt:Point, screenX:Int, screenY:Int, imageWidth:Float, imageHeight:Float):Void{
157-
if (pt.x > 0){
158-
pt.x = 0;
159-
}else if (pt.x < screenX - imageWidth){
160-
pt.x = screenX - imageWidth;
161-
}
162-
163-
if (pt.y > 0){
164-
pt.y = 0;
165-
}else if (pt.y < screenY - imageHeight){
166-
pt.y = screenY - imageHeight;
158+
parallax.onZoom(e.delta / 100);
167159

168-
}
169160
}
170161

171162
}

0 commit comments

Comments
 (0)